How To Deploy Multiple Sites to Firebase Hosting using GitHub Actions by@zhizhan

How To Deploy Multiple Sites to Firebase Hosting using GitHub Actions

Zhi Zhan HackerNoon profile picture

Zhi Zhan

Software Engineer

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

and the value will be the authentication token.


Add secret
once you have completed the form.


You should see the

secret appear on the Secrets section.

Workflow YAML file

To create a GitHub Action Workflow, go to

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

    branches: [ master, staging ]

    runs-on: ubuntu-latest

    # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
    - uses: actions/[email protected]

    - 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 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/[email protected]
        path: build


placeholder with your Firebase Project ID and the two
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

branch in the repository.

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

actions/[email protected]
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
that you have specified and authenticate using your

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

file (the code above) to our repository. I will be committing the file directly to the
branch. You may choose to create a new branch and then do a pull request to the
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.


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!


Signup or Login to Join the Discussion


Related Stories