How To Deploy Multiple Sites to Firebase using GitHub Actions | Hacker Noon

June 11th 2020

Author profile picture

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.

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

YAML File Explanation

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

staging

and

master

branch in the repository.

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

<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.

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!

read original article here