How to Host React app on firebase?

Creating a Firebase Account

To work with Firebase, you just need a Google account. So, go to the Firebase site at https://firebase.google.com/ and click Go to Console in the top-right corner. You need to be logged in with your Google account to do so, as shown in Figure.

Setting Up New Project and Hosting

Click the Add Project link on the page, as shown in Figure. Since I have a lot of projects, the figure shows them on this page. For the first time, you will see only the Add Project link.

On the page that opens, give the project a name like Demo for hosting react app and click the continue button, as shown in Figure.

On the next page, click the Create Project button after disabling Google Analytics, as shown in Figure. We are disabling Google Analytics as we’re creating a demo project here. If you intend to deploy your app in production, you should keep it enabled.

Now, click the Settings icon at the top-left corner of the screen, as shown in Below Figure. After that, click Project Settings.

On the next page, click the code icon at the bottom of the page, as shown in Figure.

On the next page, enter the same name of the app that you entered earlier, which is Demo React app in my case. Also, click the checkbox for Firebase hosting. After that, click the Register app button, as shown in Figure.

On the next page, just click the Next button as per the below image.

On the next page, you will see the command to install firebase-tools globally from the terminal. So, open any terminal and run the command from anywhere. Notice that this is a one-time setup on a machine since we are using it with the -g option. The -g option specifies that it needs to be installed globally.

Ignore the next set of commands for now and click the Continue to the console button.

Deploying a Simple ReactJS Project from the Terminal

In this section, you will learn how to deploy a simple ReactJS app on Firebase.

Now Hear For the tutorial Purpose we create a simple React app using Below Command:-

npx create-react-app

This command will help you to create a simple react app.

After that Go to the App.js file and Replace it with the Below Code :

Now run npm start command in the terminal and check the output. Its Looks like below image:

Note that it will running on localhost. Now go into your project directory and run the Below Command on the terminal

firebase login 

from the terminal. If you are running it for the first time, it will ask for an email and password. give your Firebase email and password. 

After that, run the below command to initialize your application.

firebase init 

Type Y to proceed further.

Next, go down to Hosting using the arrow keys, press the spacebar to select Hosting, and then press Enter, as shown in Figure.

Then select Use an existing project and press Enter, as shown in Figure

Here, you need to select the correct project, which is fir-for-hosting-react-app in my case. 

Next, choose the public directory, which is build. The next option is Yes for a single-page app and GitHub deploys, where you select No.

Now, you need to run the below command in your terminal for a production-optimal build.

command:-

npm run build

Now your react app production bundle is ready to deploy on Firebase. now run the final command in the terminal.

firebase deploy 

This will deploy your Project online and it will automatically deploy your app on firebase.

Now, you need to go to your Hosting URL. By Pressing ctrl and click on link it will run on your browser.