How to deploy react app to firebase hosting

Note: This is the second part of the article, for the first part on how to deploy a node js server on vercel visit here.

What is firebase?

Firebase is a service-based company that offers free (to some extent) cloud database and hosting services. It was found by Google in 2011. Firebase provides a NoSQL database and real-time hosting services to its clients. With firebase, you can create and deploy apps to Android, IOS, Web, etc.

Prerequisite:

A google account.
A firebase account.

How to host react frontend on firebase

To deploy react app on firebase, follow the given instruction:

First of all, copy the domain (link) generated after the deployment of the node js server on vercel, and replace all the localhost addresses with the vercel address on your react js application.
Now inside your project, open a terminal and create a build version of your react app by running the command "npm run start". After a few seconds react with generate an optimized version of your app which we can deploy to firebase.
After the build is created, open your firebase account and click on the Add project button.
Give a suitable name to your project and click on the continue button. It will ask you about the Google Analytics for your project, toggle it on/off as per your need and click on the continue button and wait for a few seconds until firebase creates your project, and again finally click on the continue button.
On the project overview page, click on the build option and select the hosting option, and then click on the get started button.
On the setup firebase hosting page, you will see some npm commands. that you need to execute on your project in order to deploy it.
1st command is "npm install -g firebase-tools": Copy and paste it on your terminal (firebase tools install globally (-g) so no need to install it inside your project root directory), and it will install the necessary tools for firebase to deploy your project.
2nd command is "firebase login": Copy and paste it on your project terminal. For first-time users, it will ask you to allow the firebase CLI to access your account, so type "y" and hit enter to allow, then select your account and click on the allow button.
3rd command is "firebase init": Copy and paste it on your project terminal. It will start your firebase project initialization and ask you for some parameters.
Type "y" and hit enter to proceed.
Press down-arrow and press space-bar to select the option that says "Hosting: Configure files for firebase hosting and (optionally) set up GitHub Action deploys" and hit enter.
Now select "Use an existing project" from the options list and hit enter, after that select you project from the list.
Now it will ask you about the directory name, so previously we have create a build version of our project. So write "build" and press the enter button.
We are deploying a react app i.e., a single-page app, so type "y" for the next question and hit enter.
Now it will ask you for automatic deploy vai GitHub, so type "n" (for this article) and press enter.
Finally, it ask you to overwrite the build, type "n" because we don't want any changes to our build version and hit enter. After that it will take a few seconds to initialize our project.
4th command is "firebase deploy": Copy and paste it on your project terminal. This is the last step and command. Now it will deploy your project and provide you with the link where you can see your project running live.

Note: If any errors occurs, or any corrections done by you, you have to rebuild your project and repeat command 1 to command 4 every time because we have not setup the GitHub account (in this article).

How to host react app on firebase

This is how you can deploy a react on firebase. This article completes the hosting of a MERN app with two different service providers. We have deployed Node JS server on Vercel and React JS frontend on Firebase.

I hope this article was helpful to you.

Thank you.

Search This Blog

Read Write Deploy