How to Create a Firebase Project and deploy a React.js App on Firebase.
By: Muhammad Zain Tariq
Tags: React App Hosting, Web Hosting, Firebase, Firebasehosting

After that you have to select the platform for which you are creating the project I will select web because we are hosting a react.js app as shown in figure below.

select web base option

Now write a nickname for your project I write the same name as I write for my project name previously and click Register button after that click continue as shown in figure below.

Congratulate! you have successfully created a Firebase hosting Project. Now moving toward hosting the project phase.

How to Host a React App on Firebase

First of All we have to unsure we have created a React App so if you have already created a React App that fine so make sure to be in root directory of React app from Command prompt but I will be starting from scratch by creating my React App with name of firebase_hosting and host it with following steps.

Create React App(no need if already have a project)

First of All I created a React App by writing the following code:

create-react-app firebase_hosting

Install Firebase Tools

After creating a React App we will move towards apps root directory in cmd in my case root directory was D:\React\firebase_hosting now we will install Firebase Tools which allow you to deploy your app on Firebase

npm install firebase-tools -g

Login to Firebase

Now after installing firebase tools you need to login to your Firebase by your Command prompt. You have to enter your email and password if you’re not already logged in. Run the following code to login:

firebase login

Initializing Firebase

Now you have to intialize firebase in your react app by writing following command in your terminal

firebase init

after which you will be asked do you want to proceed you have to write Y and press enter as shown in figure 3.

figure 3.

After pressing enter you will given multiple option by firebase but have to select Hosting: Configure and deploy Firebase Hosting sites as shown in figure 4.

figure 4.

After selecting press enter and enter option list appear and their we have to select use an existing project and press enter because we are hosting current project after that we have to select our firebase project in my case project is fir-hosting-9c4d3(firebase-hosting) and press enter as shown in figure 5.

figure 5.

After that you have to answer some question. First you will asked What do you want to use as your public directory? By default, Create React App will generate a build folder that will contain the production assets. Unless you changed the default configuration, you’ll want to enter build for this option.

Second You will be asked that Configure as a single-page app (rewrite all urls to /index.html)? You’ll want to enter y for this option.

The last question is Configure as a single-page app (rewrite all urls to /index.html)?. If you haven’t created a build for your app yet, then you won’t see this option. You’ll want to enter N for this option as shown in figure 6.

figure 6.

You have successfully initialized the firebase now just one step away from deploying your project.

Deploy on Firebase

Now for final step deploy on firebase just writing following code

firebase deploy

after that you get a hosting url just copy it and open it on your browser as shown in figure 7.

figure 7.

Congratulation! You have successfully deployed you React.js Project.

Conclusion

We learned how to Create a project in firebase hosting and how to host a react.js project in firebase.

If you liked my Blog you can Connect me at Linkedin and Follow me on medium for further blogs.