Skip to content
react

How to deploy React application to Firebase

Jan 26, 2023Abhishek EH2 Min Read
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:

1npx create-react-app react-firebase-deploy

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:

1npm install -g firebase-tools

Now login to your Google account by running:

1firebase login

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:

1firebase init
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

Do follow me on twitter where I post developer insights more often!

Leave a Comment

© 2024 CodingDeft.Com