How to Deploy a React JS application to Firebase from Scratch

Jagadeesh Panuganti
khushiteluguapp
Published in
3 min readJul 18, 2020

Once you completed your application, the last step is to introduce it to the world online. There are many deployment services, one of the famous and easy deployment services for React JS application is Firebase. In this tutorial, we are going to deploy our React JS project to Google Firebase.

Step 1: Create a Firebase Project

Go to the https://console.firebase.google.com/. Login with your Gmail. Click on Add Project, enter your desired project name. A simple hack here to create a project is, if the ID is not available, firebase is going to assign some id after your project name as you see in the picture. That ID is going to be a part of your website’s URL.

Try for available project names like this. The ID is going to be pretty important for the website’s URL

Click Continue, Enable Google Analytics to monitor your Website. Learn more about analytics here. Click Create Project to create your project. That’s it, your project is created.

Step 2: Create a build folder

Open the terminal/command prompt in your existing react application directory and run the below command

  • npm run build

The command will merge all content from the public folder and src folder and turns it into a single-page application in the index.html file in it. We are going to use this in the next steps.

Step 3: Install the Firebase CLI

Now, we are going to install firebase CLI through node packages globally. Remember to update using firebase CLI using this command as well.

  • npm install -g firebase-tools

Link your Firebase account to firebase CLI using this command. It navigates to your default browser for Google authentication. Give the necessary permissions.

  • firebase login

Step 4: Initialise Firebase

This can be done using the following command

  • firebase init

Click Y to proceed

You will be displayed like below. Go to the Hosting part and click Space to select and press Enter.

Click Use an existing project

Navigate to the created project in the Firebase and click Enter

For directory selection, type build. For single-page app type Yes. For overwriting type N and click Enter.

Step 5: Deploy React JS application

After initialization completes, the last step is to deploy your React JS project into Firebase. This can be done by typing a simple command

  • firebase deploy

Note: If you want to make changes and re-deploy your application, follow step 2 and step 5. Your website will be updated on the respective URL.

After successful deployment, you will be displayed these links, copy the Hosting URL part and paste it in the browser

Hurray…!!!

Your React JS application is live now. Share the URL with your friends, family to show your achievement.

Thanks for reading the article. Keep Rocking…

--

--