Jiga

In this blog, we are going to discuss how to deploy react js applications for free in a few minutes in firebase. before that let’s discuss what is firebase.

What is Firebase ?

Firebase is a backend as a service(Baas) built on Google’s infrastructure.it is categorized as a NoSQL database that stores data in JSON-like format. It has many tools and services which help developers to develop their apps easily. It has many key features one of them is hosting.

Let’s see how firebase helps in hosting.

What is firebase hosting

Firebase Hosting is production-grade web content hosting for developers with a single command we can quickly deploy static and dynamic content to a global CDN(content delivery network). let’s see how to deploy a react app using firebase.

Getting started

To deploy we need a react app .so, let’s create a simple react app using the following command

npx create-react-app demoApp

Build your app for production 

After the app is created let’s make the app ready for production. Open your project folder and type cd your project name and build the app for production using the following command

npm run build

//or

yarn build

Install firebase tools

Once you have built your app for production, install the firebase tools that will allow you to deploy your react app. You can install the tool by running

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

Login to firebase

To login into firebase make sure you are in the root directory of the react app and run the following command to log in to firebase in your terminal

firebase login

Initialize firebase

Now, you are logged in you will need to initialize firebase in your react app. You can do it by running the following command

firebase init

After this command, you will prompt with a series of questions and configuration options.

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

In the second question, select  use an existing project  and select the Firebase project created earlier

And in the hosting setup specify  the path where the firebase will look for assets to deploy

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.html file. So You’ll want to enter N (No)

Deploying reactjs app on firebase

Run the following command to deploy our app

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

Thanks, Happy Coding 🙂