DEV Community

Cover image for How to deploy React application to Firebase
collegewap
collegewap

Posted on • Originally published at codingdeft.com

How to deploy React application to Firebase

In this article, we will see how to create a firebase account and deploy a react application into firebase.

Project setup

Create a react application using the following command:

npx create-react-app react-firebase-deploy
Enter fullscreen mode Exit fullscreen mode

Creating a firebase account

Navigate to https://console.firebase.google.com/ and click on Create a project.

firebase create account 1

Now you can choose either an existing project or create a new one and click Next:

firebase create account 2

Enable Google analytics if required and click on Create.

After a few minutes, firebase will be set up and you will be redirected to the dashboard page. Expand the Build tab on the left and click on Hosting.

set up hosting 1

Click on Get Started

set up hosting 2

Press Next in the following 2 steps and click on Continue to console in the last step.

set up hosting 3

set up hosting 4

set up hosting 5

Installing firebase tools

Now on your machine, run the following command to install firebase tools globally:

npm install -g firebase-tools
Enter fullscreen mode Exit fullscreen mode

Now login to your Google account by running:

firebase login
Enter fullscreen mode Exit fullscreen mode

This command will open a page in the browser where you can authorize log in.

Initializing firebase

Now inside your project, initialize firebase by running the following command:

firebase init
Enter fullscreen mode Exit fullscreen mode

firebase init

Now choose the hosting option given above.

Now select Use an existing project.

firebase init 2

From the listed project, select the one to which you need to deploy:

firebase init 3

In the hosting step,

  • Type build as the public directory.
  • Yes, for single we app.
  • No, for GitHub deploys.

firebase init 4

Deploying to firebase

Now run the command firebase deploy inside your project.

deploy to firebase

Once the deployment is complete, it will print the URL of the deployed page.

Visit the page to validate the deployment.

deployed site

Top comments (0)