Hosting React app on Firebase

The first thing that you have to do is :
install firebase tool in your device globally using npm and also you need node version more than 10.2.0

Install node / npm in Linux

If you have already installed node / npm in your device then move to the next step otherwise first install node /npm with the given command:

$ sudo apt-get install curl
$ curl -sL https://deb.nodesource.com/setup_13.x | sudo -E bash -
$ sudo apt-get install nodejs

you can also set up with any version by changing the version.

Initializing build folder in the project

Please ensure that you will have the build folder in your project directory.
if it is already present and updated then move to the next step otherwise run the below command to create new build folder / update your build folder

$ npm run build

Install firebase tools

You need to install firebase tools globally using npm
for installing anything globally you need root permission so you are suggested to use sudo and go with the below command

$ sudo npm install firebase-tools -g

Login to firebase

After installing the firebase tools the next step is to log in to firebase on cli.
you have to login in cli only once for the first time.

$ firebase login

This will open a login page of the firebase on your browser.
you have to log in there ( you can use google login or you can signup)

Create a firebase project

Go to the firebase.com and click on Get started . Firebase project console page will open where you have to create a new project for your app.
you can simply click on add project and a new page will open.

Here you have to write the name of your project as I wrote in it myFirstReactApp and press continue.

In this step, click continue and go for the next step.

Here you have to select an account for firebase.
Click on the selection arrow and select the Default Account For Firebase

And after selecting Default Account For Firebase press Create Project

A new project will be created with your project name
now go back to the console again.

Initialize Firebase in console

First, go to your project directory in a console and run the firebase init command to initialize firebase in your console

$ firebase init

After running this command you need to set up for the project in the console
for this follow the following steps:

Step 1.

Here you have to select the Hosting: Configure and deploy Firebase Hosting sites
for selecting any option use space bar and press Enter after selecting the Hosting one

Step 2.

Here you have to select Use an existing project as we have created a new project manually from the firebase.com, or you can also choose Create a new project if you don’t have an existing project and can create a new project form console.

Step 3.

Here in this step, you have to select your project for the application.
for example, you can choose the project that you had created in firebase.com and press Enter

Step 4.

here in this step, it is asking about using your public directory where you have to use your public directory which is build directory
so you have to write build here and press Enter

Step 5.

In this step, you have to select y because we can use react as in the development of a single-page.

Step 6.

Here we already have a build file / index.html. so you have to select N means No. otherwise, it will rewrite the default firebase application over yours
and if you have already this problem then please post in the comment so that I can solve your problem.
After this step, it will finish the initialization part, so go for the next step.

Deploy your application on firebase:

Now, after finishing the initialization part, you have to deploy in on firebase using the console with the given command.

$ firebase deploy

After running firebase deploy it will deploy your app on firebase and will provide you two links Project console and Hosting URL

Here is your Project Console URL and Hosting URL
your application will run on Hosting URL
to open the hosting URL click Ctrl+ Enter on the url or copy the url and paste in any browser.

Now your application has hosted. Enjoy!
if you have any problem, then let me know in the comment section.