How to Deploy React project on Firebase?

Last Updated : 06 Jan, 2021

When developing any project we must host it somewhere so that the whole world can see our hard-work. Hosting websites can be hectic sometimes, but you don’t need to worry as we can now host our React project on Firebase within a minute or two with a very simple setup.

Steps to Deploy React project on Firebase:

Follow the below steps or specially needed to Setup a Firebase for your React Project.

Step 1: First we shall set up our Firebase project, go to its official website, and create a project as shown below.
Step 2: Then we will enable Firebase Hosting by going into the hosting section under Build dropdown.
Step 3: Then we will go through the hosting setup as described below.

Creating React Application:

Step 1: Create a React application using the following command:
```
npx create-react-app react_hosting
```
Step 2: Install Firebase Tools:
```
npm install -g firebase-tools
```
Project Structure:

Project Structure

Hosting Website:

Step 1: First, we will initialize a firebase project in our React app by running the following command in the console in our root directory.
```
firebase init
```
Now type y as we are ready to proceed.
Step 2: Select Hosting from the options provided.
Step 3: Select the Use an existing project option.
Step 4: As the build folder of react apps is generated in the build folder by default, we will use the same as our public directory.
Step 5: Type y as we want to configure our app as a single-page app.

The initialization is complete, now we just need to run a few commands and our application will be ready to go.
Step 6: Now we will run the following command to build our react app.
```
npm run build
```
Step 7: Now we just need to run the last command and our application will be deployed.
```
firebase deploy
```
This will deploy our project and also provide us the hosting link which we can visit.