How to Add Firebase Hosting GitHub Action?

name: Deploy to Preview Channel

on:
  pull_request:

jobs:
  build_and_preview:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: FirebaseExtended/action-hosting-deploy@v0

action-hosting-deploy

Automatically deploy shareable previews for your Firebase Hosting sites

Making the deployment of preview and production environments easier by using Firebase Hosting and the new GitHub Action. Below is a step-by-step configuration to set it up effectively.

On top of that, this action will make our development workflow super fast. It gives instant feedback every time a change is made in PRs using Preview URLs. It will keep the live site updated by default with the latest changes merged, further reducing the manual steps of deployments and possible errors.

How do you deploy to some new preview channel for each opened PR?​

• Workflow File: .github/workflows/deploy-preview.yml

  name: Deploy to Preview Channel
  
  on:
    pull_request:
      # Does not have to be set purely to get the sample files running
      # paths:
      # - "website/**"
  
  jobs:
    build_and_preview:
      runs-on: ubuntu-latest
      steps:
        - uses: actions/checkout@v4
        # Add all the steps to make the project here
        # For instance
        # - run: npm ci && npm run build
        - uses: FirebaseExtended/action-hosting-deploy@v0
          with:
            repoToken: "${{ secrets.GITHUB_TOKEN }}"
            firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT }}"
            expires: 30d
            projectId: your-Firebase-project-ID
  

This workflow opens a PR and deploys a preview of your application on a new Firebase preview channel. It is very important for reviewing changes before they will be merged into the main branch. The preview channel is also automatically deleted after 30 days. This functionality is only possible if your Firebase service account and your GitHub secrets are properly configured.

How to Move to live on Merge?​

• Workflow File: .github/workflows/deploy-prod.yml

  name: Deploy to Live Channel
  
  on:
    push:
      branches:
        - main
      # Set to run only some files if desired For instance:
      # path:
      # - "website/**"
  
  jobs:
    deploy_live_website:
      runs-on: ubuntu-latest
      steps:
        - uses: actions/checkout@v4
        # Embellish this section with any badge you like
        # run: npm ci && npm run build
        - uses: FirebaseExtended/action-hosting-deploy@v0
          with:
            firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT }}"
            projectId: 'your-Firebase-project-ID'
            channelId: live
  

This workflow triggers a publication to the Firebase live channel once you push changes on the main branch. This automates the deployment, meaning that anything pushed or merged into the main branch will be made available on the production environment. It is vital to have this setup for a continuous deployment pipeline, so that your production site always has the latest changes.

This allows us to organize our Firebase Hosting deployments effectively, enabling us to easily impact our CI/CD pipeline for preview and production deployments.