Step-By-Step Guide to integrate CI & CD pipeline to React JS Project with Firebase using GitHub Actions

We will be creating a simple React JS project, and we will be using Firebase hosting services and using GitHub actions, we will also be creating a workflow (.yml file) which will perform the CI (continuous integration such as the automated builds and tests) & CD (continuous deployments) using firebase hosting.

GitHub's actions are used to automate the builds, test, and deployments this is because its time-consuming always create the build manual after every single change we make instead by using a workflow provided by GitHub we can automate this process, and we only have to push the changes to GitHub the rest will be taken care by the GitHub actions workflow.

Firstly let’s create the React starter template application using the terminal

  • Set your terminal to direct the desktop path for convenience.
  • Create a React Application using the following command:

npx create-react-app app

  • Once created head up to firebase.com and create a new project and also set it up for web hosting.

Once we have created the React App and set up firebase we have to connect both of these, but before we need to get something called the user TOKEN which comes from firebase and with to be used for Continuous deployment purpose to get this token use the following command as shown in the terminal below.

firebase login:ci

  • Once you run the above command a browser will pop open for authentication and the steps from there to authorize yourself will be self-explanatory. Once authorized you will be able to get a token number from the CLI (terminal) copy and paste that somewhere for later use.
  • Once that’s also done now we have to connect our React app to Firebase, using the same terminal (same path “cd app”), enter the following command:

firebase login

  • Again a browser will pop up and the usual way to authenticate yourself has to be done, easy work!
  • Once that's done, back to the CLI and enter the following command to initialize the project with firebase:

firebase init

You should be able to see something like the above image, if so, enter Y

Go to hosting and by using the “space bar” then followed by the “enter key” select hosting from firebase.

Select your project created using firebase and set up the “build” folder

(NOTE: Do not select CI CD option from firebase when prompt just say “no” because we will be creating our own workflows file)

Once your React Project is connected to firebase hosting project now it's time to create the workflow.

Create a GitHub repo and push all your React Project code into it.

Then select create new workflow, since this is a React project the node.js workflow setup would be fine.

Given below is the code snippet for the workflow used to perform the CI and CD

You also can follow the same code from my GitHub repo given below:

If you can remember we had the user firebase TOKEN stored somewhere for later use, that has to be copy now and paste here under GitHub settings > Secrets,

Once you're done with this as well you are good to go, make some changes in your React app project and commit the changes, head back to GitHub and under actions tab you will be able to an activated workflow running (which is your CI and CD pipeline happening) once that's completed it will be ticked in green if its successful else red if any errors occurred.

Happy Coding!

--

--

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
Nazhim Kalam

Nazhim Kalam

Learning is a never-ending journey be it in college or in life, just enjoy it