host react website in firebase fast cdn hosting

Firebase is a full packages for web/apps development, its by Google And the basic plan is totally free*. that plan is enough to run starting phrase of web or mobile application. hosting a static web page is very easy and simple. they have all good documentation for web hosting. but i also share how i did host my react app on Firebase.  With its ease of use and robust ecosystem, it's no wonder that developers are choosing ReactJS to build their web applications. One of the go-to platforms for hosting these applications is Google's Firebase. Firebase provides a plethora of features such as real-time databases, authentication, cloud storage, and hosting.

In this blog post, I will guide you through the process of hosting your ReactJS app on Firebase, with detailed steps and console commands to ensure a seamless deployment experience.


1. A ReactJS app that you want to host.
2. Node.js and npm installed on your computer.
3. A Firebase account.

first test and confirm your web site is working locally,

if its working first make backup for your public/index.html page(if firebase replace it we can recover)

 Install Firebase CLI
The first step is to install the Firebase command-line interface (CLI) on your computer. The CLI allows you to interact with Firebase services directly from your terminal. To install the Firebase CLI, run the following command in your terminal

install firebase cli
npm install -g firebase-tools

 Log in to Firebase
After installing the Firebase CLI, you will need to log in to your Firebase account. Run the following command:

firebase login

then go to your react project root and perform npm run build. it will create build folder inside of your project root, now open cmd/console in your project root and perform

firebase init

use arrow keys and select "hosting:configure and deploy firebase hosting sites"

press space bar to select
sign in will ask if you not signed with firebase cli
you can create new project or select exsisting project,

Now it will ask "What do you want to use as your public directory?" it have default "public". clear it and type "build"(because we gonna host build verison of react project).

now it will ask:

"Configure as a single-page app (rewrite all urls to /index.html)? Select Yes (else sub folder paths like will not work correctly)

example output:

i Writing configuration info to firebase.json.
i Writing project information to .firebaserc..
i Writing gitignore file to .gitignore...

now run: npm run build

after finish build process , open your firebase.json(located in project folder) and review it

here is example :
  "hosting": {
    "public": "build",
    "ignore": [

     "rewrites": [
        "source": "**/!(robots.txt|sitemap.xml)",
        "destination": "/index.html"
    "headers": [
      {"source": "/service-worker.js", "headers": [{"key": "Cache-Control", "value": "no-cache"}]}

if you want stop rewriting url like robots.txt and sitemap.xml you can use this:
"source": "**/!(robots.txt|sitemap.xml)",
        "destination": "/index.html"

if its done we can go for next step..

type and run

 firebase deploy

now it should upload your data to firebase hosting, check it by visiting your firebase console. or typing frebase hosting url

is there any mistakes please comments ,  thank you ❤️️😄


Popular posts from this blog

Handling undefined variables in laravel

How to use Spatie packages to enhance your Laravel development experience

Some Briefs of Data Mining