Automate Website Deployment on Firebase Hosting with GitHub Actions

Introduction

Deploying your website manually to Firebase Hosting can be tedious, especially if you’re frequently updating your project. With GitHub Actions, you can automate your deployment process, ensuring that every push to your repository triggers an update on Firebase Hosting. In this guide, we’ll walk you through setting up GitHub Actions to deploy your static site or web app automatically to Firebase.

Prerequisites

Before getting started, ensure you have the following:

• A Firebase account with a project set up
• Firebase CLI installed (npm install -g firebase-tools)
• A GitHub repository containing your website’s code
• Firebase Hosting configured (firebase init hosting in your project directory)

Step 1: Setting Up Firebase Authentication

1. Authenticate Firebase CLI locally:

   firebase login
   

2. Obtain a Firebase CI token to authenticate deployments from GitHub Actions:

   firebase login:ci
   

   Copy the generated token—this will be used in GitHub Actions.
3. Add the Firebase token as a GitHub Secret:
   • Go to your GitHub repository.
   • Navigate to Settings > Secrets and variables > Actions.
   • Click New repository secret.
   • Name it FIREBASE_TOKEN and paste the token.

Step 2: Writing a GitHub Actions Workflow

Create a GitHub Actions workflow file inside .github/workflows/deploy.yml in your repository:

name: Deploy to Firebase Hosting

on:
  push:
    branches:
      - main  # Change this if you use a different branch

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout Repository
        uses: actions/checkout@v3

      - name: Install Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18

      - name: Install Firebase CLI
        run: npm install -g firebase-tools

      - name: Deploy to Firebase Hosting
        run: firebase deploy --token "${{ secrets.FIREBASE_TOKEN }}"

Step 3: Push Your Code and Test Deployment

Once everything is set up:

1. Commit and push your code to GitHub:

   git add .
   git commit -m "Set up GitHub Actions for Firebase deployment"
   git push origin main
   

2. GitHub Actions will trigger the deployment automatically.
3. Check the Actions tab in your GitHub repository to monitor the workflow.
4. Visit your Firebase Hosting URL to confirm the deployment.

Conclusion

By using GitHub Actions, you can streamline your Firebase Hosting deployment process, saving time and effort. This setup ensures a continuous deployment workflow, automatically updating your site with every push to the main branch.