Deploying React App to Firebase Hosting

One of the critical components of firebase is the static hosting that it provides for the developer to host their static apps (mainly the SPA, Single Page Applications) as part of their deployment. This comes handy if you’re building a complete client rendered application. Because you don’t have to go across the challenging role of setting up any servers and this can be done with just a CLI tool.

Setting up your React App

In this article, I’m going to create a new react app with the help of the create-react-app package.

1
npx create-razzle-app fb-hosting-demo

Executing this command will create a new react app inside the folder called fb-hosting-demo.

Let’s run the app and test it once.

1
cd fb-hosting-demo
2
npm run start

After starting the demo server, you can open http://localhost:3000 in your browser to see the app running.

Now, the app is running without any code-level errors, so we are good to proceed to the next step.

Setting up Firebase CLI

To use the firebase commands like “deploy” we need to install and set up the Firebase CLI tool. You can get it from the npm package.

1
npm -g install firebase-tools

Once installed, we need to authenticate the tool with our google account that owns the firebase project we’re going to deploy.

1
# If installing for the first time
2
firebase login
3

4
# If you're already logged in with another account
5
firebase login --reauth

After logging in, you’ll see the below message in the terminal.

1
✔  Success! Logged in as [email protected]

Configuring Firebase Project

Now, let’s set up a firebase to our React Project that we created. From the project folder run the following command

1
firebase init

And in the upcoming wizard, select Hosting feature by highlighting and pressing the spacebar.

Then select the firebase project where you want to deploy the React App to. When asked for the public directory type “build” and configure when asked for a single page app give “Yes”.

Now, the setup is ready. You can see a few new files inside your project repo related to firebase.

.firebaserc

1
{
2
  "projects": {
3
    "default": "YOUR_PROJECT_ID_GOES_HERE"
4
  }
5
}

firebase.json

1
{
2
  "hosting": {
3
    "public": "build",
4
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
5
    "rewrites": [
6
      {
7
        "source": "**",
8
        "destination": "/index.html"
9
      }
10
    ]
11
  }
12
}

Deploying and Testing

Finally, to deploy the application, we need to generate a production build of the application. We can do that with the following command.

1
npm run build

Once it’s complete, we can find the build folder inside our app’s root folder. This means the app is ready to be pushed to firebase hosting. Just run the following command in your terminal to deploy to firebase hosting.

1
firebase deploy --only hosting

Once deployed, you can access the live version in the firebase hosting’s URL. In our case it’s

https://fir-sample-b5510.web.app/