Deploy React Apps to Firebase

Firebase is a great platform for deploying frontend codebase and make it publicly accessible. Its free and supports multiple sites in a single Firebase project.

Pre-requisites

• This guide assumes that you have your React App ready to deploy.
• npm package manager.

Steps

Setup Firebase project

Click on Go to console button in the top navigation bar. Firebase console will now ask you to give a name for your project. Give any name of your choice. In my case I've given the name my-apps. After agreeing with terms and conditions, click continue. In step 2 and 3, it asks you whether you want Google Analytics for your project. You can configure it if you want. The console will now take few minutes for creating the project and provisioning resources. After its done, your page should now look like this.

In the left side navigation bar, click on build to expand it and select hosting from it. On the hosting page, click on Get started button. Firebase will now ask you to install its CLI which is necessary to host your React App. Move on to the next step for installing the CLI.

Configuring Firebase

To host your site, you need Firebase CLI. Run the following npm command in your terminal to install the CLI globally.

npm install -g firebase-tools

Navigate to the root directory for your React app. Open a terminal and run the following command to login to your firebase account.

firebase login

You'll be asked to enter credentials for your firebase account (which is the same as your google account).

Initiate your project by running the following command in your app's root directory.

firebase init

You will now see firebase's shell in your terminal. It will ask you series of questions to setup your project's desirable configuration.

Select - Hosting: Configure and deploy Firebase Hosting sites.

Select - Use an existing project

In the next question select the firebase project that you have created. (in my case it was my-apps)

Enter build as your public directory and No for the next 2 questions. React saves the build files inside build folder in your root directory.

This is the end of the configuration process. To check if the process was success, see whether firebase has created these 2 files in your root directory - firebase.json and .firebaserc

Build your React App

Your React App needs to be bundled in order to be deployed. Run this command in your root directory.

npm run build

After the build is successful, a folder name build is created in the root directory. The bundled files required for deployment are found in here. This command should be executed whenever the application is ready to be deployed.

Deploy to a custom sub-domain

By default, firebase makes you deploy your application to a random website generated by the firebase which is fine if the application is meant for testing purpose only. In order for a custom sub-domain follow the steps below.

After you click on Get started button, jump to step 3 on the page. It should look like this.

If you want to use that random generated sub-domain, run the command firebase deploy in your terminal and you should see your application on that sub-domain in the browser. If you don't want to use that random generated sub-domain but instead create your own custom sub-domain, follow the next steps.

Click on Continue to console button in the step 3 of that page. Hosting dashboard should be displayed on the screen. Scroll down till you find Advanced settings where you will see a button which says Add another site. Click on it and the page should look something like this.

Enter the name you wish to have for your site and click on Add site button. After you have finished creating your own sub-domain, go back to your codebase and open the file firebase.json.

Add the line "site": "<your custom sub-domain>" inside hosting key. I gave my site name cra-demo so for me the final output of the file will look like this.

{
  "hosting": {
    "site": "cra-demo",
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

After saving the file, open the terminal again and execute the following command.

firebase deploy --only hosting:cra-demo

Replace cra-demo with your sub-domain.

And that's it! After the deployment is successful you should see your site publicly available.

Congratulations!

If you see the site as you wanted in your browser, you have successfully deployed your React App to Firebase hosting. You can deploy more sites to Firebase for free with the same steps as above.