Deploy your React App with Firebase Hosting

Host a React based website free of cost with Firebase Hosting :

Yes you read it right “Free of Cost” , now you can host your website using Firebase Hosting service without paying anything, as long as your usage does not exceed those Free Hosting Parameters. And believe me for a beginner this is more than enough. When your website become popular and you need more resources, you can just simply switch to any paid plan. As mentioned in Firebase official site “ Start for free, then pay as you go”.

In this article we are going to demo it step by step by creating a basic react application. You can use any framework or basic HTML, JavaScript to develop you website. Lets Start …

In this article we are going to demo it step by step by creating a basic react application. You can use any framework or basic HTML, JavaScript to develop you website. Lets Start …

Step 1: Create a new project in Firebase Console

Login into Firebase Console with your gmail id, and click on Add Project to create a new project.

Our Firebase project is ready now, Lets create a basic React app.

Step 2: Create a new React App

From command prompt use below command to create a new react app —

npx create-react-app <your_app_name>

Step 5: Install firebase-tools npm package

Use below command to install firebase-tools package from command prompt

npm install -g firebase-tools

Step 6: Log into Firebase from command prompt

Once firebase-tools is installed, use below command to log into Firebase —

firebase login

Step 7: Initialize Firebase Project

Now we need to initiate Firebase project inside our project folder. From command prompt navigate inside your React application project folder and run below command —

firebase init

Once you run that command it will go through few project setup steps and questions —

? Are you ready to proceed? Yes

? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confirm your choices.

Navigate by up and down arrow key and select “Hosting: Configure and deploy Firebase Hosting sites” option by pressing space bar.

In next step it will ask you to select a Firebase project. If you don’t see your Firebase project ( the one your created at step 1) listed there, just select “don’t setup a default project” option. Later you can use “firebase use — add” command to link your react project with Firebase project.

Hosting Setup

Your public directory is the folder (relative to your project directory) that

will contain Hosting assets to be uploaded with firebase deploy. If you

have a build process for your assets, use your build’s output directory.

? What do you want to use as your public directory? build

? Configure as a single-page app (rewrite all urls to /index.html)? Yes

? Set up automatic builds and deploys with GitHub? No

+ Wrote build/index.html

tep 8: Build your application

Run below command to build your application

npm build

It will create a build folder inside our project folder with all static files of our application.

Step 9: Deploy your application

Now our firebase project is ready to deploy in Firebase Hosting. Just use below command to deploy it —

firebase deploy

If you got a screenshot like below with message “Deploy complete!”, that’s it you have successfully deployed your first web application in Firebase Hosting … awesome.

Now open that Hosting URL link in any browser and hurrah… you will able to see your hosted web application.

Follow me for new tidbits on the domain of tech.

Have a look at my Portfolio : https://nihalparmarportfolio.web.app/