Automate React builds to Firebase Hosting: Preview Channels and Deploy using Github Actions
By: Victor Bruce-Crabbe
Tags: Continuous Integration, React, Github Actions, Firebase, Preview Channel

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 host 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 or pull request to your GitHub project. 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

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 straight forward. 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:

An existing Github project A firebase project firebase-cli with a minimum version of 8.12.0 or higher 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 😊