Creating a simple React project with Create React App and Firebase Javascript SDK

This tutorial is a part of the series Realtime Progress for Background Process with React & Firebase at https://medium.com/@aduyng/realtime-progress-for-background-process-with-react-firebase-260afb6b6737

In this section, we are going to create a React project and integrate it with Firebase.

Create a React Project with Create React App (CRA)

Learn more about Create React App here: https://github.com/facebook/create-react-app

Open a new terminal and type the following commands to create a new project, then start it

> mkdir rps
> cd rps
rps> npm create-react-app ui
rps> cd ui
rps/ui> npm start

Now, let’s open your favorite IDE (mine is Webstorm) and update src/App.js with the following content

You should have the following result after the app reloads. By the end of this tutorial, we will show the progress of the background function at 0% span, and the user can click on the link Trigger Background Functionto trigger our backend function via HTTP.

Integrate with Firebase Realtime Database

Let’s install the required dependencies

npm install firebase -S

Update src/App.js with the following code.

Basically, we are adding the firebase real-time database to our project. Then listen to the changes on theprogress node on the database, and update the percentage accordingly.

Now, let’s get back to our Firebase Realtime Database console and update the value to 15. You should see it reflects instantly in your app.

Implement the Trigger Background Function link

Update src/App.js with the following code to make an HTTP call to our trigger function (which will be implemented in the next section)

Deploy the UI app to Firebase

Use the following command to set up firebase hosting on local. Make sure you set the public directory to ui/build which is where our UI production code is.

rps/ui> npm run build
rps/ui> cd ..
rps> firebase init hosting

Before proceed to deploy our UI app to firebase, let’s make one more update to tell Firebase to expose the /trigger endpoint. In the rewrite section of firebase.json add one more item as follows:

Now, we are ready to deploy our UI app to firebase

rps> firebase deploy --only hosting

Once the command above is complete, you should have the URL to the hosted application on Firebase Hosting. Mine is at https://realtime-progress-sample.web.app/

Let’s move on to creating our backend functions.