How To Deploy Multiple Sites to Firebase Hosting using GitHub Actions

Welcome back! We will learn how to automate the deployment of multiple sites to Firebase hosting using GitHub Action in this tutorial. GitHub provides a freemium (free for open source) CI/CD tool that is integrated with their repository.

I will be using the Get Started React App project that I have created in Part 1 of this tutorial to set up a Git repository in GitHub.

Alternatively, you can refer to part 2 of this tutorial if you wish to learn how to use GitLab CI/CD tool.

Firebase Authentication Token

An authentication token is required to log in to your Firebase account via GitHub Action. You have to run

firebase login:ci

CI/CD Configurations

We will be adding the authentication token to the Secrets setting in our repository. Secrets allow us to store sensitive information, such as access tokens in our repository.

You will be able to see the Secrets section under

Settings > Secrets

Add a new secret

The name will be

FIREBASE_TOKEN 

Click

Add secret

You should see the

FIREBASE_TOKEN

Workflow YAML file

To create a GitHub Action Workflow, go to

Actions 

Replace the content into code editor with the code below.

name: Firebase hosting

on:
  push:
    branches: [ master, staging ]

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
    # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
    - uses: actions/checkout@v2

    - name: Install firebase tools
      run: |
        sudo npm install -g firebase-tools
        firebase use <FIREBASE PROJECT ID> --token ${{ secrets.FIREBASE_TOKEN }}
        
    - name: Build website
      run: |
        yarn
        yarn build
        
    - name: Deploy to staging site
      if: github.ref == 'refs/heads/staging'
      run: firebase deploy --only hosting:<TARGET NAME> --non-interactive --token ${{ secrets.FIREBASE_TOKEN }} -m "RunID ${{ github.run_id }} Commit SHA ${{ github.sha }}"
      
    - name: Deploy to production site
      if: github.ref == 'refs/heads/master'
      run: firebase deploy --only hosting:<TARGET NAME> --non-interactive --token ${{ secrets.FIREBASE_TOKEN }} -m "RunID ${{ github.run_id }} Commit SHA ${{ github.sha }}"

    - name: Archive build Artifact
      uses: actions/upload-artifact@master
      with:
        path: build

Replace

<FIREBASE PROJECT ID>

<TARGET NAME>

YAML File Explanation

The workflow will be triggered when there are changes (push) to the

staging

master

deploy

actions/checkout@v2

Install firebase tools

<FIREBASE PROJECT ID>

FIREBASE_TOKEN

The project will be build and deployed to either one of the

target name

Finally, it will upload the production build artifact so that you can download it later.

Deploy the Workflow

Let’s start a commit to push to the

main.yml

master

master

The workflow should start running once you have successfully committed to master branch.

You should see a green tick if there are no errors after the workflow is completed.

Conclusion

Congratulation! You have come to the end of this tutorial. I hope that this is helpful to you. Feel free to check out the repository for this project here.

If you spot any errors or have suggestions on how to do this better, please let me know!