Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

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.

Output:We can verify that our website was successfully deployed by visiting the hosting link provided by firebase in the console as shown below:

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!