How to Deploy a React Application With Firebase Hosting

Deployment is now easy because of Firebase Hosting.

In this blog, I am going to discuss how we can deploy react applications within a few minutes by using some simple steps. So for that, we need two technologies: first is React to create one sample app and second is Firebase technology for the deployment purpose.

Before starting the deployment process first let’s talk about Firebase Hosting in short.

What is Firebase Hosting?

Production-grade web content hosting for developers is provided by Firebase Hosting. Firebase Hosting is a fast, secure, and reliable way to host your apps. By using one command, you can quickly deploy web apps and serve both static and dynamic content to a global CDN (content delivery network).

In this article we're going to cover the following points:

• Create a simple React application with create-react-app
• Log into the Firebase Console and create a new project
• Deploy React app by using Firebase Hosting

1. Create a simple React Application:

For this blog, we are creating a basic react application by using the create-react-app command. create-react-app is a tool that provides you a boilerplate for react applications so we can easily headstart the react apps. It saves you from time-consuming setup and configuration.

To use this command first you need to install it by using the following command:

npm install -g create-react-app

The -g flag in the command above installs the NPM package globally on the machine. Once this installation is done then we can create a basic react application. Just enter the following command

create-react-app mydemo

So once you run the above command it will create the mydemo directory in your local machine. If you check inside the mydemo directory, you can see all the files that you required for your project (i.e. boilerplate). Now just enter the following command and on localhost:3000 you will get your simple react application.

cd mydemo
npm start

I hope that it was easy and fast to create a react application. Now we will move to the next step that is Firebase setup.

2. Log in to the Firebase Console and create a new project:

Now we are going to set up the Firebase. First, login into the Firebase Console by using this link https://firebase.google.com/.You can log in by using your Google account and click on create a new project button mentioned in the name of your project and follow some steps and your project is ready.

In the Firebase console I have created Reactdemo project

Once the project is created, you have the ability to add Firebase to any Android or iOS mobile app and even a web app.

3. Deploy React app by using Firebase Hosting:

Step1: Install Firebase tools:

• First, we need to install the Firebase tools that will allow you to deploy your app. You can install the tools by running the following:

  
  

npm install -g firebase-tools

Step 2: Login to Firebase in your terminal

• The second step is we will now need to login to Firebase in your terminal. You will be prompted to enter your login details (email and password) if you're not already logged in. Also, please make sure that you are inside of the React application that we have created before.

• For eg your terminal will look like ~/mydemo.

• Run the following command

  
  

  firebase login
  

• when you enter yes it will redirect you to the Google sign-in page. There select the account that you have used to create the project on a Firebase in the second part.

• Before initializing the Firebase first create the build for your react application. So in React by using the following command you can easily generate the build for your app.

  npm run build
  

Step 3: Initialize Firebase in Your React App

• In the third step we are initializing the Firebase account with our react app by using the following command:

  firebase init
  

• When you run this command you need to answer some of the questions that I have shown you in the below image

• For the first question select option Hosting: Configure and deploy Firebase Hosting sites.

• In the second question that is Project setup, Select Use an existing project, and in that select Firebase project name that you have created in part 2, my project name is ReactDemo so I have select that.

• And the last part is the Hosting setup part here you will need to specify the folder where Firebase will look for assets to deploy. By default, the build folder will contain the production assets. So Enter build as an answer to this option.

• For Configure as a single-page app question enter y for this option.

• The last question is whether or not to overwrite your existing build/index.htmlfile. So You'll want to enter N (No) for this option because we want actual index.html file that Reacts is generated while creating the build.

• Once the initialization part is done you can check the directory, you should see two new files .firebaserc, firebase.json. These files are automatically generated.

  
  

Step 4: Deploy React app

• The fourth step is to deploy your app.

• Now that everything is set up, you can go ahead and deploy your app! The only thing you need to do is run the following command:

  firebase deploy 
  

Once you run this command, Firebase will then give you a unique hosting URL where your deployed app is located. For example https://reactdemo-f8d87.web.app

You can also see the list of deployment records inside the Hosting tab in the Firebase project on the Firebase console.

Yeah, 🎉We have successfully deployed our React application with the help of Firebase Hosting.  Enjoy Coding 😊