Hosting React app on Firebase

Firebase provides options for hosting static, dynamic web apps very easily. In the free tier, you will get the option to add one domain also. When it comes to React applications, Firebase makes it very easy to deploy the app.

What we are going to do?

Create a project on Firebase
Setting up Firebase hosting
Creating a basic project in react using CRA
Deploy the app to Firebase
Updating app

Create a project on Firebase

Visit Firebase to create a project. You can log in to the Firebase console using your Google account. Create a new project.

Click on add project

Enter a new project name

You can skip analytics if you want, click on continue.

This may take some time. After it will redirect to your dashboard.

Installing Firebase CLI

You can install Firebase CLI using npm. In terminal:

npm install -g firebase-tools

firebase login

This will automatically open up the default browser, if not copy the URL shown in the terminal. After login, it will show a success message.

To test whether it is working or not, type in terminal:

firebase projects:list

This will list all the projects.

Creating a basic project in react using CRA

To create a react application, in terminal:

npx create-react-app react-example

We are not doing anything extra work on this, we are going to just deploy it. Now let’s build this app.

- Build project

npm run build

This will create a production-ready app stored under folder build.

- Initializing Firebase in the project

Now we have built our app, it’s time to deploy it. In terminal:

init firebase

This will prompt some questions.

Select hosting

Select use an existing project

Type build since our app is in that folder.

Since this is a SPA all the URLs need to be redirected to index.html

Firebase will try to create a index.html which is not required since we have already index.html file. Type N

The above steps will initialize Firebase in our project directory. You can see a new file created inside the project named firebase.json

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