Before you go, check out these stories!

0
Hackernoon logoHow To Deploy Multiple Sites to Firebase using GitHub Actions by@zhizhan

How To Deploy Multiple Sites to Firebase using GitHub Actions

Author profile picture

@zhizhanZhi Zhan

Software Enginee

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!

Tags

The Noonification banner

Subscribe to get your daily round-up of top tech stories!