How to deploy Firebase React App on Firebase Hosting?

Why should we use firebase hosting?

1. Integration with other Firebase services: As part of the Firebase platform, Firebase Hosting integrates seamlessly with other Firebase services such as Firebase Authentication, Cloud Firestore, Cloud Functions, and more.

2. Simple deployment: Firebase Hosting allows you to deploy your React application without setting up or configuring a web server. Your app files are hosted, scaled, and served globally by Firebase Hosting.

3. Fast and secure hosting: Firebase Hosting uses a content delivery network (CDN) to deliver your app files quickly and securely worldwide.

4. Custom domains and SSL: You can add custom domains to your app using Firebase Hosting, which also offers SSL certificates for HTTPS secure connections. This is crucial if you want to build a branded experience for your app and increase your users' safety and trust.

How to deploy the firebase react app?

Step 1:

Install Firebase Tools. Run the following command in your terminal to accomplish this:

npm install -g firebase-tools

Step 2:

Initiate Firebase in your React project after creating a Firebase project. Run the following command in your terminal to accomplish this:

firebase init

Step 3:

Use the arrow key to navigate between options and then use the space bar to select Hosting from the options provided.

Step 4:

Select the Use an existing project option.

Step 5:

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 6:

Type y as we want to configure our app as a single-page app.

Now initialization is complete. now we just need to run a few more commands and our application will be ready to go.

Step 7:

Now run the following command in your terminal to build our react app.

npm run build

Step 8:

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 with the hosting URL which we can visit.