Create and deploy a new React app using Firebase

8 min readNov 16, 2020

Start from the ground. Finish in the cloud.

No BS: in few minutes you will have a React app running online.

No coding knowledge required, except knowing what “terminal” means.

We will build, from scratch, an app that send a temperature to a Cloud Function and receive a response message, displayed to the user ONLINE.

Very basic things. I believe starting with simple case is the best way to really understand concepts before going further.

Video

I recorded the full process here.

Summary

Very very fast version : Command lines only
Very fast version : Step by step with screenshots

2.1 Requirements
2.2 React app
2.3 Firebase
2.4 Cloud functions
2.5 Call from React
2.6 Liftoff!

1. Very very fast version : Command lines only

If you have prior knowledge on the subject, all you need is this :

1. Create your app
> npx create-react-app mon-app2. Go here : https://console.firebase.google.com/ and follow the instructions3. Run the following commands : 
> npm install -g firebase-tools
> firebase login
> firebase init
> npm run build
> firebase deploy

If it’s not clear enough, skip this part and go for the next version.

2. Very fast version : Step by step with screenshots

2.1 Requirements

To start from zero, you first need to install a code editor.

I really recommend Visual Studio Code, install it from there.

Then create an empty folder :

Open Visual Studio Code, click File > Open and select the empty folder you just created (folder /medium in my case).

You should have an empty project like this.

Now click Terminal > New Terminal, a terminal will open at the bottom.

In the terminal type :

npm -vnode -v

If versions are displayed like v13.8.0(or any other version), you’re all set. Go to the next section.

If not, you need to download npm and node, follow this instructions.

2.2 React app

Here we go!

In the terminal, type :

> npm install -g create-react-app
> npx create-react-app medium_demo_app

Of course, you can change medium_demo_app with another name.

Let magic operate! (magic can take 5 minutes)

Meanwhile, you can pray for Facebook developers who coded React.

Or you can keep reading.

2.3 Firebase

First, click on this link.

You will access the wonderful world of Firebase. You can sign up with your Google Account and feel the fairy tale coming into your life.

Simply click “Add a project”, give your project a name, DESACTIVATE Google Analytics for this project (we don’t need it) and click on “Create a project”.

Once you are on your dashboard, you can see on the left-side menu in the “Develop” tab:

Authentication : Everything related to users. Signup with Google, Signup with Facebook, Signup with email… Everything is there, easy to set up.

Cloud Firestore & Realtime Database & Storage : Those services will allow you to store data, images, videos, messages and sync multiple devices.

Hosting : Host a static website, SSL certified, using a single line of code. We will use this service.

Functions : To use the previously mentioned services, you will need to deploy a backend receiving data, checking them, storing them… Using Functions, there is no need to setup a backend, code a js function, Firebase manage the rest. We will use this service.

Yeah… that’s a lot.

Let’s add an app!

Click on the Web logo in the middle of the page (looking like this: </> ).

Choose an app nickname, select “Also set up Firebase hosting” and validate.

Then you arrive on the “Add Firebase SDK” tab.

Simply copy the given piece of code and paste it in the /public/index.html file of your app, as shown here (between <div id='root'></div>and </body>) :

Next, run this command in the terminal of Visual Studio Code :

> cd medium_demo_app
> npm install -g firebase-tools

It will allow you to use Firebase’s tools using command line.

Use the installation time (30s) to pray for Firebase developers.

Then run :

firebase login

And follow the instructions to log in. Then run :

firebase init

Using Space, select “Functions” and “Hosting”, press Enter to confirm.

Select “Use an existing project”, then select your project, press Enter.

Then follow these steps :

(you can find the required dependencies in the package.json file).

For the last three questions, follow this :

You are all set for the Firebase side!!

2.4 Cloud Functions

Now that we have initialised Firebase, we can write Cloud Functions.

If you are not familiar to this concept, let me explain how a Cloud Function works.

A Cloud Function is like a personal mailbox : It has an address and can receive messages.

The address of a Cloud Function is an URL, it looks like any URL you know : https://my-app/myFunction.

The data sent to the function are called parameters. Parameters can be directly contained in the URL, or in a separate object.

Contrary to personal mailbox, a Cloud Function is processing data and return a response.

To activate a Google Cloud Function, an event is required. An event can be : -creation of a new user, -a new image uploaded, -a simple http call…

For our app, we will create the Function checkTemperature().

The Function takes one parameter : temperature. The processing will only be a basic if/else. Our Cloud Function will receive a temperature and say if the user is sick or not.

To write the Function, go back to Visual Studio Code, open the file /functions/index.js and replace the existing code by this code :

checkTemperature() receive the parameter temperature and return a message depending this parameter.

You talked about an address? Where is it?

In a following section, we will deploy our function. The deployment process will assign an address (like “https://…”) to the Function.

But for now, we want to test our code to be sure it’s working before having it online. This can be done with this (run in the terminal) :

firebase serve

Once running, your Visual Studio Code should look like that :

See this http://localhost:5001… at the bottom? It is our local address. It allows us to test checkTemperature().

We can now test the function using any browser and copy /paste the address:

If you made it until here. You are one line away from deployment and having an online Cloud Function!

Hit ctrl+c in the terminal to stop the previous process and run :

firebase deploy --only functions

You might have a 400 error if your billing account is not set. To fix it you have two solutions :

Enable billing OR
Go to /functions/package.json and change the engines.node value from 12 to 8 (you should enable billing before 03/2021)

If you face this error : Error: HTTP Error: 403, Unknown Error, run firebase init a second time (and follow the same step as before (Section 2.3), say “N” to every questions about overwriting).

By running the firebase deploy --only functions, you will see our function assigned to an online URL (find “Function URL” in the terminal) :

My URL is : https://us-central1-medium-76adb.cloudfunctions.net /checkTemperature. Yours is different but follows the same pattern.

Keep this URL somewhere, we will need it in 2 minutes.

Congratulation! Your Google Cloud Function is online!

2.5 Call from React

Now that our Cloud Function is accessible online, we will call it from a React app.

To call the Cloud Function and read the result, we need the package axios. To install axios, run this line in the terminal of Visual Studio Code.

cd .. (if you are still in /functions)
npm install axios

Go to the file src/App.jsand replace the existing code by this one :

In this code, we simply display an input and a button. When modifying the input, handleChange() is called. When clicking the button, getDiagnosis() is called. In getDiagnosis(), we send an event to our Cloud Function checkTemperature() and handle the result.

Of course, don’t forget to change the const URL = 'YOUR URL'(line 8) by the URL of the previous section.

To see the result and test your code before deploying it, you can run :

npm start

Your Visual Studio Code window should look like this :

You can now go to http://localhost:3000 and test your code.

(( yeah… design is not the focus of today))

You are ready for the best part…

2.6 LIFTOOOFFFFFF!!

Go back to the Visual Studio Code terminal, if React is still running, hit ctrl + C to stop the process. Then run :

npm run build

This command creates a build directory with a production build of your app. This folder, containing static files, will be deployed online using this command :