Realtime Progress for Background Process with React & Firebase

There are many scenarios while implementing a web application, we want to execute a time-consuming or computational-intensive process in the background. Some of the examples of those scenarios include: processing large files with a lot of records, sending out email messages to many people at once.

In this tutorial, I want to walk you through the steps to implementing those scenarios with React, Firebase SDK for Javascript, Firebase Functions, Google Cloud Pub/Sub, and Firebase Realtime Database. As a bonus, the entire project will be built and deploy to the Firebase platform so that you can test our live traffic.

All the code in this repo is available here: https://github.com/aduyng/realtime-progress-sample for reference

Table of Content

1. Setup
2. Creating a simple React project with Create React App and Firebase Javascript SDK
3. Create Firebase Functions with Google Cloud Pub/Sub trigger

Set up

Create a new project in Firebase

Go to https://console.firebase.google.com/ and create a new project

Create a new project step (1/2)

Create a new Firebase project (2/2)

Create a Realtime Database

Once the project is created, go to “Realtime Database” to create a database

We start in “test mode” to the brevity

After the database is created, let’s add a key named progressand set the value to 10 so that we can use it to test our UI integration with Firebase.

Create a Web Integration in Firebase

We need to create an app in Firebase to get the required configuration for the integration. To do so, go to Project settings and click on the</> icon under Your apps

We are going to deploy this project to Firebase hosting, so remember to check Also setup Firebase Hosting for this app.

Upgrade your app to Blaze — Pay as you go plan

Since we are going to use Firebase Functions, we need to upgrade our app to Blaze — Pay as you go plan. The free plan doesn’t include this feature.

(*) Once you complete this tutorial, please don’t forget to delete it to avoid accidental charges

Click on the Upgradebutton at the bottom of the page and click on Select plan on the popup

Select your billing account and click Continue

Click on Purchase button to complete

Now, let’s move on to implementing our UI module in React.