Deploying ReactJS App to Firebase

Step 1: Install Firebase CLI globally

npm install -g firebase-tools

We can check the version by using the following command

firebase --version

Step 2: Login to the firebase account by using firebase CLI

firebase login

If it is first time then we can navigate to login screen. If already logged in then it will show as “Already logged in “. If you want to login to other account or authenticate again we can use the following command.

firebase login --reauth

Step 3: Initialize firebase in your project’s root directory

firebase init

Then CLI will prompt the following questions.

 Are you ready to proceed? Yes

After proceeding, it will show set of instructions. Navigate through them using Up/Down Arrow keys. Select Hosting by using spacebar.

>(*) Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys

Now select the project which you want to use. then it shows as “using project your_project_name”. After that you will see the following questions.

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

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

Set up automatic builds and deploys with GitHub? No

 File build/index.html already exists. Overwrite? Yes

firebase.json code should be similar to the following. once check it in your project. if it is missing, rewrites key add it.

{
  "hosting": {
    "public": "build",
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

Step 4: Build your App using the following command

npm run build

Step 5: Finally delpoy the App to firebase

firebase deploy