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.
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
- 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.
After that run the following command to initialize Firebase in your application.
Choose Firebase Hosting and your default project. And complete the Firebase Hosting setup.
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.
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.
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✌️❤️