Deploy React app into Firebase using GitHub Actions

Hello everyone, hope you guys doing very well. In this article we’re going to build an React application and deploy into Firebase using GitHub actions.

Firebase is a powerful platform developed by Firebase Inc that’s provides powerful features for developing mobile and web application development. This tutorial will focus on the Firebase Hosting.

Image from github.blog

Launched in 2019, GitHub Actions helps you build, test, and deploy applications on any platform, including Linux, macOS, and Windows. Easy to automate all your software workflows with world-class CI/CD. GitHub Actions supports NodeJs, Python, Java, PHP, Go build your application in your language of choice. Matrix builds let you easily test multiple versions of your project in parallel. Check this link to know more about GitHub Actions.

So let’s get started.

Setting up React Application

First we need to setup our react application. If you have already installed node follow the below steps:

• Open command prompt in folder where you want to create application
• In command prompt run following commands.

npx create-react-app firebase-github-action
cd firebase-github-action
npm start

• If you see the following, in your browser our first step is done

Setting up Firebase

Now we need to setup Firebase into our react application. First you need to install Firebase into your application.

npm install -g firebase-tools

Then run the following command. This command will generate a unique token. Copy and save the token.

firebase login:ci

After that run the following command to initialize Firebase in your application.

firebase init

Choose Firebase Hosting and your default project. And complete the Firebase Hosting setup.

After complete those steps push your project into GitHub repository. You can use GitHub Desktop, GitKraken or GitCLI to push your project.

Setting up GitHub Actions

Now let’s setup GitHub Actions for our application.

• First of all you need add your unique token into GitHub. Go to setting tab on your project. Then move into Secret section. Click on add a new secret and paste your token. Make sure your secret name must be FIREBASE_TOKEN.

• After add token go to actions tab on your project. Under actions choose NodeJS workflow template.

After that copy the following code and paste into your yaml.file and rename it to firebase.yaml

After rename the file commit your firebase.yaml file.

Then go to the Actions tab you will see there is running our NodeJS workflow.

After 1–2 minutes you can see that our workflow is successfully completed and deployed our react application into the Firebase Hosting.

You can find your Firebase Hosting URL in Deployment log.

So that’s it we deploy react application into Firebase using GitHub Actions.

Conclusions

Whether you are you student or profession GitHub Actions and Firebase very helpful in your projects. GitHub Actions can do a whole lot more than just CI. And Firebase is a Backed-as-a-Service solution both for mobile and web-based applications that includes services for building, testing, and managing apps.

Finally

I hope this article will help you to know about of Firebase Hosting and GitHub Actions. In next articles let’s talk about how to work with Firebase and GitHub. If you need any help follow me on GitHub, LinkedIn or Twitter.

That’s it, thank you all..! don’t forget to leave a 👏✌️ Use Firebase🔥 Happy Coding✌️❤️