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-toolsname: Deploy to Firebase Hosting on PR'on': pull_requestjobs:build_and_preview:runs-on: ubuntu-lateststeps:- uses: actions/checkout@v2# Run multiple commands using the runners shell- name: Install Dependenciesrun: |sudo npm isudo npm i -g firebase-tools- name: Run Testsrun: npm run test- name: Build Prod Apprun : |npm run build --if-present- uses: FirebaseExtended/action-hosting-deploy@v0with:repoToken: '${{ secrets.GITHUB_TOKEN }}'firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT }}'projectId: project_nameenv: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:- masterjobs:build:runs-on: ubuntu-latest# Run multiple commands using the runners shellsteps:- uses: actions/checkout@v2- name: Install Dependenciesrun: |sudo npm isudo npm i -g firebase-tools- name: Run Testsrun: npm run test- name: Build Prod Apprun: |npm run build --if-present- uses: FirebaseExtended/action-hosting-deploy@v0with:repoToken: '${{ secrets.GITHUB_TOKEN }}'firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT }}'channelId: liveprojectId: project_idenv: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 😊

--

--

--

A Frontend and Mobile Developer. I share my learning experience through writing based on what I will want to read when learning a new concept to help others.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

The Joys of building React Native Apps with Expo

How to add Bootstrap to React

Build a Traffic Light with Johnny-Five Inventor’s Kit Featuring Tessel 2: No Cloud Service Used…

Adding City Images to My React App

How to Add Dark Mode to Your Next.js Project Using Tailwind CSS

Singleton Pattern

Day 64 Training at Ryaz: Class based components.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Victor Bruce-Crabbe

Victor Bruce-Crabbe

A Frontend and Mobile Developer. I share my learning experience through writing based on what I will want to read when learning a new concept to help others.

More from Medium

Sign in with Apple using React and Nodejs

A Guide To Firebase Authentication In React (with Google Sign-In)

Grouping Bar in React Pivot Table

How To Create and Set Up a React Project with Create React App in Windows?