Streamlining Firebase Hosting CD Previews with GitHub Actions
Tired of manually deploying your Firebase Hosting projects for every code change? Want a seamless way to preview your website or web app before pushing to production? GitHub Actions can be your solution!
This article will guide you through setting up a GitHub Action that automatically deploys your code to a Firebase Hosting preview environment whenever you push a new commit to your repository.
Let's get started!
The Scenario
Imagine you're developing a website hosted on Firebase Hosting. You want to see how your latest changes look before pushing them to production. Traditionally, you'd manually deploy each change to Firebase, which can be time-consuming and prone to errors.
The Solution
GitHub Actions to the rescue! By leveraging the power of GitHub Actions, we can automate this process and make previewing your Firebase Hosting projects as easy as pushing code.
Here's a basic example of a GitHub Action workflow file (main.yml) that deploys to Firebase Hosting:
name: Firebase Hosting Preview Deployment
on:
push:
branches:
- main
jobs:
deploy-preview:
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v3
- name: Configure Firebase CLI
uses: firebase/action-login@v1
with:
token: ${{ secrets.FIREBASE_TOKEN }}
- name: Deploy to Firebase Hosting
uses: firebase/action-hosting-deploy@v1
with:
projectId: ${{ secrets.FIREBASE_PROJECT_ID }}
site: ${{ secrets.FIREBASE_SITE }}
channel: preview
token: ${{ secrets.FIREBASE_TOKEN }}
Explanation:
name: Firebase Hosting Preview Deployment: This defines the name of your workflow.on: push: branches: [main]: This triggers the workflow on every push to the 'main' branch.jobs: deploy-preview:: This defines the job to be run.runs-on: ubuntu-latest: This specifies the runner environment (Ubuntu).steps: This defines the steps to be executed within the job:Checkout code: This step checks out the latest code from your repository.Configure Firebase CLI: This step authenticates the Firebase CLI using your Firebase token (stored as a secret in GitHub).Deploy to Firebase Hosting: This step uses the Firebase Hosting Deploy action to deploy your code to Firebase Hosting.
Breaking Down the Workflow
Let's dive into the key aspects of this workflow:
- Firebase CLI: This essential tool is used to interact with Firebase services, including Hosting. It requires authentication to access your Firebase project.
- Firebase Token: You'll need a Firebase token with sufficient permissions to deploy to your Firebase Hosting project. You can create one by going to your Firebase project settings and choosing 'Service Accounts'. This token should be stored securely as a GitHub secret.
- Project ID and Site: These are unique identifiers for your Firebase Hosting project. Make sure to configure them correctly within the workflow file.
channel: preview: This setting ensures the deployment goes to a preview environment (usually atyourproject.web.app/preview).
Additional Tips
- Environment Variables: Store your sensitive information (Firebase token, project ID, site name) as GitHub secrets to ensure security.
- Preview URL: Once the workflow completes, you'll receive a link to your preview environment. This link will usually have
previewappended to the domain name (e.g.,yourproject.web.app/preview). - Custom Domains: You can also deploy to a custom preview domain. Refer to the Firebase Hosting documentation for more information.
Conclusion
By implementing this simple GitHub Action workflow, you can automate the process of previewing your Firebase Hosting changes, saving time and increasing efficiency. This workflow provides a seamless way to test and validate your website or web app before it goes live, ensuring a smooth and reliable development process.
Don't forget to adapt the code and configuration to match your specific project setup.
Happy Coding!
