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

on your terminal to get one. Please ensure that you have installed the Firebase CLI before doing so. A pop up should appear which you have to log in to your account. You should see your token on your terminal once you have login successfully.

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

in your repository. Click

Add a new secret

The name will be

FIREBASE_TOKEN

and the value will be the authentication token.

Click

Add secret

once you have completed the form.

You should see the

FIREBASE_TOKEN

secret appear on the Secrets section.

Workflow YAML file

To create a GitHub Action Workflow, go to

Actions

and click on set up this workflow yourself at the top left-hand side of the banner. You will be redirected to a code editor page.

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>

placeholder with your Firebase Project ID and the two

<TARGET NAME>

placeholders to the target name that you have created respectively in part 1 of this tutorial.

YAML File Explanation

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

staging

and

master

branch in the repository.

deploy

is the only job that is defined in this workflow. The environment of the workflow will be on the latest version of Ubuntu.

actions/checkout@v2

checkout your repository so that the job can access it.

Install firebase tools

will install firebase-tools globally in the workflow environment. It will use the

<FIREBASE PROJECT ID>

that you have specified and authenticate using your

FIREBASE_TOKEN

secret.

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

target name

depending on the branch where the workflow is being triggered. You can learn more about how this works here.

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

file (the code above) to our repository. I will be committing the file directly to the

master

branch. You may choose to create a new branch and then do a pull request to the

master

branch instead.

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!