Automate React builds to Firebase Hosting: Preview Channels and Deploy using Github Actions

Github Actions

Performing the same series of steps over and over again can be boring, tedious, and unproductive. With CI/CD you can increase your pace when deploying your code to a hosted environment and increase the quality of your code by catching bugs early in your development process. This gives you confidence as a developer when you ship your code to production knowing very well that every feature has been tried and tested.

Github Action

Github actions is a CI/CD service provided by GitHub that enables you to perform Continuous Integration and Delivery to various environments.

Github action is an important tool to consider if you have a process you want to automate on every push, pull request, or any other event to your GitHub repository. Unlike CI/CD tools like Circle ci, Jenkins, etc with GitHub actions, all you have to do is to navigate to your project source and configure one.

What is CI/CD

Continuous Integration means committing code to a shared repository frequently where each commit triggers an automated workflow on a continuous integration server(Github actions, circle ci, Travis ci, Jenkins, etc)that can notify developers when there are issues with their changes.

Continuous Delivery is when code is built, tested, and released faster and more frequently but it isn’t pushed to production unless you make the decision to do so.

Benefits of CI/CD

1. CI/CD helps you save time by automating steps you will have to do manually every time.

2. CI/CD helps you detect small problems early before any disaster can happen in the long run, hence increasing the quality of code pushed to production.

Github Actions With React and Firebase Hosting

Working with Github actions to deploy your production-ready code is quite straightforward. I will walk you through how to push your code to Firebase hosting using Preview channels when an event (push, merge, pull request) is triggered on a branch.

Preview channels are an easy way to deploy development versions of your site to a temporary, shareable URL

Below are the pre-requisites you should have in place before we start:

1. An existing Github project
2. A firebase project
3. firebase-cli with a minimum version of 8.12.0 or higher
4. Already connected firebase with your React app using the firebase configuration keys for your web app.

Getting Started

At this stage, I assume you have firebase initialized in your React project. Check out this article to set up firebase hosting.

Next, allow firebase-CLI to perform automatic deploys to Github by running the command:

firebase init hosting:github

Firebase will ask you to authenticate by logging in so it can access GitHub and perform certain actions on your behalf.

# Type in your github repository (eg: username/repo_name):
For which Github repository would you like to set up a Github flow?

The step above will allow firebase-cli to initialize your Github repository for automatic deploys. Behind the scenes, the following steps will be performed on your behalf

• A Firebase service account with deployment permissions to firebase hosting
• Setting up a secret token in your Github repository
• Creating GitHub workflow YAML files

Continuing, firebase will ask if you would like to create a firebase-hosting-pull-request.yml file? Type yes to create or no to skip.

# This file was auto-generated by the Firebase CLI
# https://github.com/firebase/firebase-tools
name: Deploy to Firebase Hosting on PR
'on': pull_request
jobs:
build_and_preview:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
# Run multiple commands using the runners shell
- name: Install Dependencies
run: |
sudo npm i
sudo npm i -g firebase-tools
- name: Run Tests
run: npm run test
- name: Build Prod App
run : |
npm run build --if-present
- uses: FirebaseExtended/action-hosting-deploy@v0
with:
repoToken: '${{ secrets.GITHUB_TOKEN }}'
firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT }}'
projectId: project_name
env:
FIREBASE_CLI_PREVIEWS: hostingchannels

Lastly, firebase will ask if you would want to set up automatic deployment to your live preview channel.

name: Deploy to Firebase Hosting on merge
'on':
push:
branches:
- master
jobs:
build:
runs-on: ubuntu-latest
# Run multiple commands using the runners shell
steps:
- uses: actions/checkout@v2
- name: Install Dependencies
run: |
sudo npm i
sudo npm i -g firebase-tools
- name: Run Tests
run: npm run test
- name: Build Prod App
run: |
npm run build --if-present
- uses: FirebaseExtended/action-hosting-deploy@v0
with:
repoToken: '${{ secrets.GITHUB_TOKEN }}'
firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT }}'
channelId: live
projectId: project_id
env:
FIREBASE_CLI_PREVIEWS: hostingchannels

Note: Remember to add a channel Id: live to deploy your production build to the live channel (that is, your production server)

At the end of the day, you should end up with two YAML files. One that deploys to a feature branch channel preview or your development hosting environment when a pull request event occurs and the other that deploys to your live or production-ready environment when a push event occurs on the master branch.

End

We’ve come to the end of this tutorial. Kindly alert me if I have missed a step or anything goes wrong while following the steps above.

Thank you 😊