How to deploy a React App using Firebase Hosting

Get started with Firebase Hosting

Firebase Hosting gives you a fast, secure, and reliable way to host your app's static assets (HTML, CSS, JavaScript, media files, etc.) as well as to serve dynamic content and host microservices.

Our production-grade hosting is backed by a global content delivery network (CDN). Hosting serves your content over SSL, by default, and can be used with your own custom domain or on your project's subdomains at no cost on web.app and firebaseapp.com.

Before you begin

Before you can set up Firebase Hosting, you need to create a Firebase project. To deploy the project to the firebase servers, please follow the steps below.

Step 1: Install the Firebase CLI

Visit the Firebase CLI documentation to learn how to install the Firebase CLI Tools or update to its latest version.

Update to the latest CLI version

Generally, you want to use the most up-to-date Firebase CLI version. How you update the CLI version depends on your operating system and how you installed the CLI.

In many cases, new features and bug fixes are available only with the latest version of the Firebase CLI. It's a good practice to frequently update the CLI to its latest version.

First, install the Firebase CLI Tools package in the current project using NPM. You can find alternative ways of installing or updating this in the Firebase Docs.

$ npm install -g firebase-tools

Once you have successfully installed this tool, login to the Firebase platform:

$ firebase login

Once you enter the command, a wording similar to the below console result will be displayed in the terminal. you will be prompted to login to Firebase and allow this app to run from the terminal. If everything goes well, a successfull authentication message will be displayed on the console.

i  Firebase optionally collects CLI and Emulator Suite usage and error reporting information to help improve our products. Data is collected in accordance with Google's privacy policy (https://policies.google.com/privacy) and is not used to identify you.

? Allow Firebase to collect CLI and Emulator Suite usage and error reporting information? Yes
i  To change your data collection preference at any time, run `firebase logout` and log in again.
Visit this URL on this device to log in:
https://accounts.google.com/o/oauth2/auth?client_id=000000-feejsdfjdfjdfjdsfjdfoef342265225622626.apps.googleusercontent.com&scope=email%20openid%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fcloudplatformprojects.readonly%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Ffirebase%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fcloud-platform&response_type=code&state=182344245&redirect_uri=http%3A%2F%2Flocalhost%3A9005

Waiting for authentication...

✔  Success! Logged in as johndoe@gyourmailprovider.com

Visit the URL provided, then log in using a Google account. After you have successfully logged in to the Firebase platform, review the current list of projects linked to this account. For that, you need to type in the following command:

$ firebase projects:list

Upon accessing your account, a comprehensive enumeration of projects associated with it will be presented, including pertinent details that resemble the following information:

$  ✔ Preparing the list of your Firebase projects...

$  1 project(s) total.

Step 2: Initialize your project

To connect your local project files to your Firebase project, run the following command from the root of your local project directory:

$ firebase init hosting

The console will display something similar to the below code:

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  /Users/ComputerUserName/Documents/FolderName/local_project_name

Before we get started, keep in mind:

  * You are initializing within an existing Firebase project directory


=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.

i  Using project firebase-project-name (firebase-project-name)

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? public
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? Set up automatic builds and deploys with GitHub? No
✔  Wrote n/index.html

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

✔  Firebase initialization complete!

During project initialization, from the Firebase CLI prompts:

1. Select a Firebase project to connect to your local project directory.

The selected Firebase project is your "default" Firebase project for your local project directory. To connect additional Firebase projects to your local project directory, set up project aliases.

1. Specify a directory to use as your public root directory.

This directory contains all your publicly served static files, including your index.html file and any other assets that you want to deploy to Firebase Hosting.

• The default for the public root directory is called public.

  • You can specify your public root directory now or you can specify it later in your firebase.json configuration file.
  • If you select the default and don't already have a directory called public, Firebase creates it for you.

• If you don't already have a valid index.html file or 404.html file in your public root directory, Firebase creates them for you.

1. Choose a configuration for your site.

If you select to make a one-page app, then Firebase automatically adds rewrite configurations for you.

At the end of initialization, Firebase automatically creates and adds two files to the root of your local app directory:

• A firebase.json configuration file that lists your project configuration. Learn more about this file on the configure hosting behavior page.

• A .firebaserc file that stores your project aliases.

Switching from the current project to another using CLI

When utilizing the Firebase Command-Line Interface (CLI), it may become necessary to deploy your project to a distinct project or hosted website.

To achieve this, DevOps personnel or deployers can execute the Firebase "use" command to switch between projects. This command permits the designation of a particular Firebase project to deploy to, thus facilitating seamless project deployment to the desired environment.

$ firebase use [project id]

As stated previously, in order to retrieve the identification numbers of your Firebase projects, it is necessary to execute the following command:

$ firebase projects:list
$ ✔ Preparing the list of your Firebase projects...

Getting the config file ready for deploy

The firebase.json file

The firebase init command creates a firebase.json configuration file in the root of your project directory. The firebase.json file is required to deploy assets with the Firebase CLI because it specifies which files and settings from your project directory are deployed to your Firebase project.

With the generated firebase.json file in our local project, a new property named "public" has to be added or updated with the value of the name of your build folder. This might vary depending on the name you specify in your build configuration.

NOTE:

To achieve deployment across multiple sites within the project, it is necessary to create aliases for each site in Firebase. This can be accomplished by utilizing the appropriate command(reflected below), which facilitates the establishment of an alias for each individual site.

$ firebase target:apply hosting target-site-alias target-site-id

Subsequently, we execute the deployment command to effectuate the necessary updates on the website. Please find below an illustrative instance of the aforementioned configuration file and its corresponding default parameters.

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

Step 3: Deploy to your site

To deploy to your site, run the following command from the root of your local project directory:

$  firebase deploy --only hosting

Note: By running this command with the --only hosting flag, you're only deploying your Hosting content and config. If you also want to deploy other project resources or configurations (like functions or database rules), run this command with a comma-separated list in the flag (for example, --only hosting,functions).

This command deploys your Hosting content and config to the following Firebase-provisioned subdomains:

• PROJECT_ID.web.app
• PROJECT_ID.firebaseapp.com

Assuming the execution of the command proceeds without any errors or issues, the terminal is expected to exhibit a result on the console resembling the output illustrated below.

=== Deploying to 'firebase-project-name'...

i  deploying hosting
i  hosting[firebase-project-name]: beginning deploy...
i  hosting[firebase-project-name]: found 16 files in /build
✔  hosting[firebase-project-name]: file upload complete
i  hosting[firebase-project-name]: finalizing version...
✔  hosting[firebase-project-name]: version finalized
i  hosting[firebase-project-name]: releasing new version...
✔  hosting[firebase-project-name]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/firebase-project-name/overview
Hosting URL: https://firebase-project-name.web.app

Now your site is ready to share with the world! If you would like to learn more about the next steps on this matter, please take a look at the full documentation for the Firebase CLI.

Happy Deploying, folks!

Thanks for reading this article, I hope you enjoyed it as much as I did writing it. Until next time, dear readers!

❤️ Your enjoyment of this article encourages me to write further.
💬 Kindly share your valuable opinion by leaving a comment.
🔖 Bookmark this article for future reference.
🔗 If this article has truly helped you, please share it.