paint-brush
How to Deploy React JS Applications for Free on Firebaseby@suhail
794 reads
794 reads

How to Deploy React JS Applications for Free on Firebase

by Suhail KakarDecember 7th, 2020
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

In this article , I’ll take you through all the steps involved in deploying a your React app on firebase.

Company Mentioned

Mention Thumbnail
featured image - How to Deploy React JS Applications for Free on Firebase
Suhail Kakar HackerNoon profile picture

In this article , I’ll take you through all the steps involved in deploying a your React app on firebase.

Getting Started

Before deploying your app on firebase, you need to have Firebase project and a React project (create-react-app)

Build Your App for Production

Open your project folder 

cd your-project
 and build your app for production 
npm run build / yarn build
. The JavaScript and CSS files will be inside the 
build/static
 directory.

Install Firebase Tools

Once you built your app then you can install firebase tools that will allow you to deploy your React app. You can install the tools by running

npm install firebase-tools -g or yarn global add firebase-tools

Login to Firebase

Make sure you’re in the root directory of your React app and run the following command to login to firebase in your terminal

firebase login

*If you’re not logged in, you’ll be asked to enter the credentials for your google account.

Initialize Firebase

Now that you’re logged in, you will need to initialize Firebase in your React app. You can do it by running the following command

firebase init

You will then be prompted with a series of questions and configuration options.

Choose Hosting: Configure and deploy Firebase Hosting sites
Choose Use an existing project
Select the firebase project that you created
What do you want to use as your public directory? (public) build
Configure as a single-page app (rewrite all urls to /index.html)? No
File build/index.html already exists. Overwrite? No

Now it is time to deploy our app

Deploy to Firebase

Run the following command to deploy your app:

firebase deploy

*Firebase will then give you a unique URL where your deployed app is located (e.g. react-app.web.app).

That’s all there is to it!