How to deploy a React application using Firebase hosting 🤔

Firebase is a Backend as a service (BaaS) platform developed and maintained by Google to helps developers build applications faster. One of its services is Firebase hosting which helps the developers to deploy production-grade web applications to the web. In this article, I will show the process of deploying a React application using Firebase hosting.

TL;DR

Are you in a hurry ⏳? No problem, here is a snippet for you.

First Create a Firebase project using Firebase console, then do as follows:

// Install Firebase CLI
npm install -g firebase-tools

// Login through the CLI
firebase login
/* It will open a browser tab, complete the login process there */

// Initiate Firebase hosting
firebase init hosting
/* select appropriate build directory */

// After building, deploy the app
firebase deploy --only hosting
/* your app will be live at `your-project-name`.web.app */

Why Firebase hosting?

Firebase Hosting provides fast and secure hosting for your web app, static and dynamic content, and microservices. Few benefits of using Firebase hosting cited below:

• Generous free tier (10 GB storage and 360 MB/day bandwidth) which is sufficient for any entry-level application.
• Zero-configuration SSL.
• Static contents are cached automatically and served through a CDN.
• Easy to integrate with other Firebase or GCP services.
• Can add custom domain.

Let's start by creating a new React project

If you already have a project, you can skip this part.

You should have Node.js and npm installed in your system.

We will be using create-react-app to create our React application.

npx create-react-app devopsify-firebase  /* replace `devopsify-firebase` with your project name */
/* This will create a react project in `devopsify-firebase` directory */

For the sake of this demo, we will not change anything in the app. To run the application use:

npm start
// This will start the application at localhost:3000

Create a Firebase Project

First, go to Firebase console and click on the Create a project button.

Type in your project name and click Continue. Then follow the process and at last hit Create project.

Setup Firebase CLI

We will be using Firebase command-line tool (CLI) to deploy our project to Firebase hosting.

Install the Firebase CLI

npm install -g firebase-tools

Login to Firebase using CLI

firebase login 
/* It will open a browser tab, complete the login process there */

Initiate Firebase hosting

We will only need Firebase hosting for this demo. Run firebase init hosting and follow the options as per the below snippet.

Deploy to Firebase Hosting

Deploying the React App to Firebase Hosting using the Firebase CLI from the local environment is very straightforward.

Test the App -> Build the App -> Deploy

Test

By default npm test runs the watcher with interactive CLI. However, you can force it to run tests once and finish the process by setting an environment variable called CI. Read more

CI=true npm test /* CI=true for simulating ci environment */

// Output
// PASS src/App.test.js (22.188 s)
//   ✓ renders learn react link (83 ms)

// Test Suites: 1 passed, 1 total
// Tests:       1 passed, 1 total
// Snapshots:   0 total
// Time:        31.501 s
// Ran all test suites.

Build

npm run build

// Output
// Creating an optimized production build...
// Compiled successfully.

// File sizes after gzip:

//   41.21 KB  build/static/js/2.d9d4df6e.chunk.js
//   1.4 KB    build/static/js/3.e0287546.chunk.js
//   1.18 KB   build/static/js/runtime-main.0ec91478.js
//   601 B     build/static/js/main.f229b676.chunk.js
//   546 B     build/static/css/main.ab7136cd.chunk.css

Deploy

firebase deploy --only hosting

Congratulations 🎊, your app is now live at your-project-name.web.app

Wrap up

So your application is deployed, now you can experiment with the cache settings, maybe add a custom domain or use other Firebase services in your app.

Hope this article was helpful 😊. If so, then hit the like and share it with others.

What to add something? write it in the comments 👇