ESP32 with Firebase – Creating a Web App

This guide will teach you how to create a simple Firebase Web App to control and monitor your ESP32 board. The Web App you’ll create can be accessed worldwide to control and monitor your ESP32 from anywhere in the world. This Web App makes the bridge between the Firebase Realtime Database and the ESP32.

ESP32 with Firebase Realtime Database Creating a Web App

Complete the following tutorial before proceeding:

Here are the major steps to complete this tutorial.

  1. Creating Firebase Project—we recommend using the Firebase project from this previous tutorial.
  2. Installing Required Software
  3. Setting Up a Firebase Web App Project (VS Code)
  4. Creating Firebase Web App

We have a similar tutorial for the ESP8266 board: ESP8266 NodeMCU with Firebase – Creating a Web App

Installing Required Software

To follow this project, you need to install the following software:

  1. Visual Studio Code
  2. Node.JS LTS version
  3. Install Firebase Tools

Installing VS Code

Follow the next instructions to install VS Code on your Operating System:

A) Installing VS Code on Windows (Visual Studio Code)

Go to https://code.visualstudio.com/ and download the stable build for your operating system (Windows).

Microsoft Visual Studio Code VS Code Download Page for Windows PC

Click on the installation wizard to start the installation and follow all the steps to complete the installation. Accept the agreement and press the Next button.

Microsoft Visual Studio Code VS Code Installation wizard

Select the following options and click Next.

Microsoft Visual Studio Code VS Code Installation wizard step 2

Press the Install button.

Microsoft Visual Studio Code VS Code Installation wizard step 3

Finally, click Finish to finish the installation.

Microsoft Visual Studio Code VS Code Installation wizard final step

Open VS Code, and you’ll be greeted by a Welcome tab with the released notes of the newest version.

VS Code Welcome Screen

That’s it. Visual Studio Code was successfully installed.

B) Installing VS Code on Mac OS X (Visual Studio Code)

Go to https://code.visualstudio.com/ and download the stable build for your operating system (Mac OS X).

Microsoft Visual Studio Code VS Code Download Page for Mac OS X

After downloading the Visual Studio Code application file, you’ll be prompted with the following message. Press the “Open” button.

Microsoft Visual Studio Code VS Code Downloading application file for Mac OS X

Or open your Downloads folder and open Visual Studio Code.

Microsoft Visual Studio Code VS Code Downloading application file for Mac OS X

After that, you’ll be greeted by a Welcome tab with the released notes of the newest version.

Microsoft Visual Studio Code VS Code Installation wizard welcome screen on Max OS X

That’s it. Visual Studio Code was successfully installed.

C) Installing VS Code on Linux Ubuntu (Visual Studio Code)

Go to https://code.visualstudio.com/ and download the stable build for your operating system (Linux Ubuntu).

Microsoft Visual Studio Code VS Code Download Page for Linux Ubuntu

Save the installation file:

Microsoft Visual Studio Code VS Code Save installation file for Linux Ubuntu

To install it, open a Terminal window, navigate to your Downloads folder and run the following command to install VS Code.

$ cd Downloads
~/Downloads $ sudo apt install ./code_1.49.1-1600299189_amd64.deb

When the installation is finished, VS Code should be available in your applications menu.

Microsoft Visual Studio Code VS Code Open application Linux Ubuntu

Open VS Code, and you’ll be greeted by a Welcome tab with the released notes of the newest version.

Microsoft Visual Studio Code VS Code Installation wizard welcome screen on Linux Ubuntu

That’s it. Visual Studio Code was successfully installed.

Installing Node.js

1) Go to nodejs.org and download the LTS version.

Download Node.js LTS version

2) Run the executable file and follow the installation process.

3) Enable automatically install all the necessary tools.

Download and Install Node.js LTS version

4) When it’s done, click Finish.

Install NodeJS Finish Installation

5) A Terminal window will open to install the Additional Tools for Node.js. When it’s done, click any key to continue. When it’s finished, you can close the Terminal Window.

Install NodeJS Install Necessary Tools Terminal Window.

Installing Firebase Tools (VS Code)

1) Open VS Code. Close all opened projects, if any.

2) Open a new Terminal window. Go to Terminal > New Terminal.

3) Run the following command to change to the C:\ path (you can install it in any other path):

cd \

Before installing Firebase tools, run the following command to install the latest npm package:

npm install -g npm@latest

4) Run the following command to install firebase tools globally:

npm -g install firebase-tools
Install Firebase Tools Globally

5) Firebase tools will be installed, and you’ll get a similar message on the Terminal window (you can ignore any warning about deprecated libraries).

Install Firebase Tools 2

6) Test if Firebase was successfully installed with the following command:

firebase --version

In my case, I get the following error.

Install Firebase Tools 3 Version

As you can see in the error message, there’s an error message related to the firebase.ps1 file on the C: \Users\username\AppData\Roaming\npm path.

Go to that path and delete the firebase.ps1 file.

Delete Firebase Error File

Go back to VS Code, and rerun the following command.

firebase --version

This time, it should return the Firebase Tools version without any error.

Install Firebase Tools 4 Version

Setting Up a Firebase Web App Project (VS Code)

Before creating the Firebase Web App, you need to set up a Firebase Project on VS Code. These are the steps:

  1. Creating a Project Folder
  2. Firebase Login
  3. Initializing Web App Firebase Project
  4. Adding Firebase to Your App

1) Creating a Project Folder

1) Create a folder on your computer where you want to save your Firebase project—for example, Firebase-Project.

2) Open VS Code. Go to File > Open Folder… and select the folder you’ve just created.

3) Go to Terminal > New Terminal. A new Terminal window should open on your project path.

Install Firebase Tools 2

2) Firebase Login

4) On the previous Terminal window, type the following:

firebase login

5) You’ll be asked to collect CLI usage and error reporting information. Enter “n” and press Enter to deny.

Login Firebase VS Code Terminal Window

6) After this, it will pop up a new window on your browser to login into your firebase account.

Login Firebase Account

7) Allow Firebase CLI to access your google account.

Login Firebase Account allow Firebase CLI

8) After this, Firebase CLI login should be successful. You can close the browser window.

Login Firebase Account allow Firebase CLI Login Successful

3) Initializing Web App Firebase Project

9) After successfully login in, run the following command to start a Firebase project directory in the current folder.

firebase init

10) You’ll be asked if you want to initialize a Firebase project in the current directory. Enter Y and hit Enter.

Login Firebase Account allow Firebase CLI firebase init

11) Then, use up and down arrows and the Space key to select the options. Select the following options:

  • RealTime Database: Configure security rules file for Realtime Database and (optionally) provision default instance.
  • Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys

The selected options will show up with a green asterisk. Then, hit Enter.

Login Firebase Account allow Firebase CLI configure directory

12) Select the option “Use an existing project”—it should be highlighted in blue—then, hit Enter.

Firebase Project Setup VS Code

13) After that, select the Firebase project for this directory—it should be the project created in this previous tutorial. In my case, it is called esp32-firebase-demo. Then hit Enter.

Add Firebase Project to Directory VS Code

14) Press Enter on the following question to select the default database security rules file: “What file should be used for Realtime Database Security Rules?

15) Then, select the hosting options as shown below:

  • What do you want to use as your public directory? Hit Enter to select public.
  • Configure as a single-page app (rewrite urls to /index.html)? No
  • Set up automatic builds and deploys with GitHub? No
Firebase initialization complete

16) The Firebase project should now be initialized successfully. Notice that VS code created some essential files under your project folder.

Firebase Project Files Created successfully

The index.html file contains some HTML text to build a web page. For now, leave the default HTML text. The idea is to replace that with your own HTML text to build a custom web page for your needs. We’ll do that later in this tutorial.

17) To check if everything went as expected, run the following command on the VS Code Terminal window.

firebase deploy
Firebase Project Files Deploy Completed

Now, you need to get your web app URL to access it.

4) Add Firebase To Your App

Leave VS Code opened. Meanwhile, you need to go to your Firebase account to add Firebase to your app.

18) Go to your Firebase console and select your project. Then, click on the web icon to add a web app to firebase (or the +Add app button).

ESP32 Firebase Demo Get Started

19) Give your app a name. I simply called it test. Then, check the box next to Also set up Firebase Hosting for this App. Click Register app.

Add Firebase Project to Your App

20) Then, copy the firebaseConfig object because you’ll need it later.

ESP32 Firebase Demo Get Started configuration

Click Next on the proceeding steps.

After this, you can also access the firebaseConfig object if you go to your Project settings in your Firebase console.

21) Copy the authDomain. In my case, it is:

esp32-firebase-demo.firebaseapp.com

This is the URL that allows you to access your web app.

Paste the domain into your browser. You should see the following web page. This web page is built with the files placed in the public folder of your firebase project.

You can access that web page from anywhere in the world.

Firebase Hosting complete

Congratulations, you’ve set up your Firebase App project correctly. Now, let’s change the files in the public folder to show your own web page instead of that one.


Creating Firebase Web App

Now that you’ve created a Firebase project app successfully on VS Code, follow the next steps to customize the app to display the values saved on the Realtime Database.

index.html

Copy the following to your index.html file. This HTML file creates a simple web page that displays the readings saved on the Realtime Database created on this previous project.

<!-- Complete Project Details at: https://RandomNerdTutorials.com/ -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ESP Firebase App</title>

    <!-- The core Firebase JS SDK is always required and must be listed first -->
    <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>

    <!-- TODO: Add SDKs for Firebase products that you want to use
        https://firebase.google.com/docs/web/setup#available-libraries -->
    <script src="https://www.gstatic.com/firebasejs/8.8.1/firebase-database.js"></script>

    <script>
    // REPLACE WITH YOUR web app's Firebase configuration
    var firebaseConfig = {
        apiKey: "REPLACE_WITH_YOUR_Firebase_CONFIGURATION",
        authDomain: "REPLACE_WITH_YOUR_Firebase_CONFIGURATION",
        databaseURL: "REPLACE_WITH_YOUR_Firebase_CONFIGURATION",
        projectId: "REPLACE_WITH_YOUR_Firebase_CONFIGURATION",
        storageBucket: "REPLACE_WITH_YOUR_Firebase_CONFIGURATION",
        messagingSenderId: "REPLACE_WITH_YOUR_Firebase_CONFIGURATION",
        appId: "REPLACE_WITH_YOUR_Firebase_CONFIGURATION"
    };
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    var database = firebase.database();
</script>
<script src="app.js" defer></script>

</head>
<body>
    <h1>ESP32 Firebase Web App Example</h1>
    <p>Reading int: <span id="reading-int"></span></p>
    <p>Reading float: <span id="reading-float"></span></p>
</body>
</html>

View raw code

You need to modify the code with your own firebaseConfig object (from step 20).

Let’s take a quick look at the HTML file.

In the <head> of the HTML file, we must add all the required metadata.

The title of the web page is ESP Firebase App, but you can change it in the following line.

<title>ESP Firebase App</title>

You must add the following line to be able to use Firebase with your app.

<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>

You must also add any Firebase products you want to use. In this example, we’re using the Realtime Database.

<script src="https://www.gstatic.com/firebasejs/8.8.1/firebase-database.js"></script>

Then, replace the firebaseConfig object with the one you’ve gotten from step 20.

var firebaseConfig = {
    apiKey: "AIzaSyBPIfTiBcoWhVQ3ozmHH3JzgjQZAsCGuyk",
    authDomain: "esp32-firebase-demo.firebaseapp.com",
    databaseURL: "https://esp32-firebase-demo-default-rtdb.europe-west1.firebasedatabase.app",
    projectId: "esp32-firebase-demo",
    storageBucket: "esp32-firebase-demo.appspot.com",
    messagingSenderId: "112982951680",
    appId: "1:112982951680:web:f55c1f591739c33b8a15e5"
};

Finally, Firebase is initialized and we create a global variable called database that refers to our Firebase Realtime Database.

firebase.initializeApp(firebaseConfig);
var database = firebase.database();

We also reference the app.js file that we’ll create next to include JavaScript functions that will allow us to update the HTML page with the database values.

<script src="app.js" defer></script>

We’re done with the metadata. Now, let’s go to the HTML parts that are visible to the user—go between the <body> and </body> tags.

We create a heading with the following text: ESP32 Firebase Web App Example, but you can change it to whatever you want.

<h1>ESP32 Firebase Web App Example</h1>

Then, we add two paragraphs to display the float and int values saved on the database. We create <span> tags with specific ids, so that we can refer to those HTML elements using JavaScript and insert the database values.

<p>Reading int: <span id="reading-int"></span></p>
<p>Reading float: <span id="reading-float"></span></p>

After making the necessary changes, you can save the HTML file.

app.js

Inside the public folder, create a file called app.js. You can do this on VS Code by selecting the public folder and then, clicking on the +file icon. This JavaScript file is responsible for updating the values on the web page any time there’s a change on the database.

Copy the following to your app.js file.

// Complete Project Details at: https://RandomNerdTutorials.com/

// Database Paths
var dataFloatPath = 'test/float';
var dataIntPath = 'test/int';

// Get a database reference 
const databaseFloat = database.ref(dataFloatPath);
const databaseInt = database.ref(dataIntPath);

// Variables to save database current values
var floatReading;
var intReading;

// Attach an asynchronous callback to read the data
databaseFloat.on('value', (snapshot) => {
  floatReading = snapshot.val();
  console.log(floatReading);
  document.getElementById("reading-float").innerHTML = floatReading;
}, (errorObject) => {
  console.log('The read failed: ' + errorObject.name);
});

databaseInt.on('value', (snapshot) => {
  intReading = snapshot.val();
  console.log(intReading);
  document.getElementById("reading-int").innerHTML = intReading;
}, (errorObject) => {
  console.log('The read failed: ' + errorObject.name);
});

View raw code

The following snippet is responsible for listening to changes on the test/float database path.

databaseFloat.on('value', (snapshot) => {
  floatReading = snapshot.val();
  console.log(floatReading);
  document.getElementById("reading-float").innerHTML = floatReading;
}, (errorObject) => {
  console.log('The read failed: ' + errorObject.name);
});

Whenever you insert a new value on that database path, we update the value on the HTML element with the reading-float id.

document.getElementById("reading-float").innerHTML = floatReading;

We follow a similar procedure to update the readings on the test/int database path.

databaseInt.on('value', (snapshot) => {
  intReading = snapshot.val();
  console.log(intReading);
  document.getElementById("reading-int").innerHTML = intReading;
}, (errorObject) => {
  console.log('The read failed: ' + errorObject.name);
});

Save the JavaScript file.

Deploy your App

After saving the HTML and JavaScript files, deploy your app on VS Code by running the following command.

firebase deploy

ESP32 Arduino Sketch

Upload the following code to your ESP32. This is the same code used in this previous project to write to the database. This code simply writes to the database every 15 seconds.

Don’t forget to insert your network credentials, database URL, and Firebase Project API Key.

/*
  Rui Santos
  Complete project details at our blog.
    - ESP32: https://RandomNerdTutorials.com/esp32-firebase-realtime-database/
    - ESP8266: https://RandomNerdTutorials.com/esp8266-nodemcu-firebase-realtime-database/
  Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files.
  The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
  Based in the RTDB Basic Example by Firebase-ESP-Client library by mobizt
  https://github.com/mobizt/Firebase-ESP-Client/blob/main/examples/RTDB/Basic/Basic.ino
*/

#include <Arduino.h>
#if defined(ESP32)
  #include <WiFi.h>
#elif defined(ESP8266)
  #include <ESP8266WiFi.h>
#endif
#include <Firebase_ESP_Client.h>

//Provide the token generation process info.
#include "addons/TokenHelper.h"
//Provide the RTDB payload printing info and other helper functions.
#include "addons/RTDBHelper.h"

// Insert your network credentials
#define WIFI_SSID "REPLACE_WITH_YOUR_SSID"
#define WIFI_PASSWORD "REPLACE_WITH_YOUR_PASSWORD"

// Insert Firebase project API Key
#define API_KEY "REPLACE_WITH_YOUR_FIREBASE_PROJECT_API_KEY"

// Insert RTDB URLefine the RTDB URL */
#define DATABASE_URL "REPLACE_WITH_YOUR_FIREBASE_DATABASE_URL" 

//Define Firebase Data object
FirebaseData fbdo;

FirebaseAuth auth;
FirebaseConfig config;

unsigned long sendDataPrevMillis = 0;
int count = 0;
bool signupOK = false;

void setup(){
  Serial.begin(115200);
  WiFi.begin(WIFI_SSID, WIFI_PASSWORD);
  Serial.print("Connecting to Wi-Fi");
  while (WiFi.status() != WL_CONNECTED){
    Serial.print(".");
    delay(300);
  }
  Serial.println();
  Serial.print("Connected with IP: ");
  Serial.println(WiFi.localIP());
  Serial.println();

  /* Assign the api key (required) */
  config.api_key = API_KEY;

  /* Assign the RTDB URL (required) */
  config.database_url = DATABASE_URL;

  /* Sign up */
  if (Firebase.signUp(&config, &auth, "", "")){
    Serial.println("ok");
    signupOK = true;
  }
  else{
    Serial.printf("%s\n", config.signer.signupError.message.c_str());
  }

  /* Assign the callback function for the long running token generation task */
  config.token_status_callback = tokenStatusCallback; //see addons/TokenHelper.h
  
  Firebase.begin(&config, &auth);
  Firebase.reconnectWiFi(true);
}

void loop(){
  if (Firebase.ready() && signupOK && (millis() - sendDataPrevMillis > 15000 || sendDataPrevMillis == 0)){
    sendDataPrevMillis = millis();
    // Write an Int number on the database path test/int
    if (Firebase.RTDB.setInt(&fbdo, "test/int", count)){
      Serial.println("PASSED");
      Serial.println("PATH: " + fbdo.dataPath());
      Serial.println("TYPE: " + fbdo.dataType());
    }
    else {
      Serial.println("FAILED");
      Serial.println("REASON: " + fbdo.errorReason());
    }
    count++;
    
    // Write an Float number on the database path test/float
    if (Firebase.RTDB.setFloat(&fbdo, "test/float", 0.01 + random(0,100))){
      Serial.println("PASSED");
      Serial.println("PATH: " + fbdo.dataPath());
      Serial.println("TYPE: " + fbdo.dataType());
    }
    else {
      Serial.println("FAILED");
      Serial.println("REASON: " + fbdo.errorReason());
    }
  }
}

View raw code

Demonstration

The ESP32 should be sending new readings every 15 seconds to the database.

ESP32 ESP8266 Store value firebase database Serial Monitor Success

Go to your App URL. You’ll see the readings being updated every 15 seconds. The App updates the web page any time the ESP32 writes a new value.

Firebase Project Basic Web App ESP32

In your Firebase Console, you can go to your project page, and check that new values are being written into the database every 15 seconds.

Congratulations! You’ve created a Firebase Web App to interface with the ESP32.

Wrapping Up

In this tutorial, you learned how to create a Firebase Web App to interface with the ESP32. You’ve learned how to use Firebase Hosting services and the Realtime Database.

We’ve built a simple example to get you started with Firebase. It simply displays some random numbers on a web page. The idea is to replace those numbers with sensor readings or GPIO states. Additionally, you may also add buttons, or sliders to the web page to control the ESP32 GPIOs. The possibilities are endless.

The example has some limitations but allows you to understand Firebase Web Apps potential for the ESP32. For example, at this point, anyone can write and read data from your database because we haven’t set any database rules (it is in test mode). Additionally, we didn’t protect it with any kind of authentication. Nonetheless, we hope you find this tutorial useful. And if you want to learn more you can also check the Firebase documentation.

If there is enough interest in this subject, we may create more Firebase tutorials with the ESP32. Let us know in the comments below if this is a subject that you are interested in.

We hope you find this tutorial useful.

We hope you find this tutorial useful. If you want to learn more about Firebase with the ESP32 and ESP8266 boards, check out our new eBook:

Learn more with the ESP32 with our resources:

Thanks for reading.



Learn how to build a home automation system and we’ll cover the following main subjects: Node-RED, Node-RED Dashboard, Raspberry Pi, ESP32, ESP8266, MQTT, and InfluxDB database DOWNLOAD »
Learn how to build a home automation system and we’ll cover the following main subjects: Node-RED, Node-RED Dashboard, Raspberry Pi, ESP32, ESP8266, MQTT, and InfluxDB database DOWNLOAD »

Enjoyed this project? Stay updated by subscribing our newsletter!

69 thoughts on “ESP32 with Firebase – Creating a Web App”

  1. Very interesting. I hope there are more tutorials on Firebase.

    I am very interested in push notifications both generated for an ESP32 or ESP8266 or within a web application like the one described in this tutorial.
    For example, if there is a certain condition in the data read in the database in real time
    already described, a notification is generated to some recipient (phone or other PC that subscribes to the application.

    It would also be interesting to advance on the issue of
    device registration to add security.

    I hope they are topics of interest also to your followers.
    Thank you and remain faithful to each tutorial that you provide us.

    Reply
    • Hi Alejandro.
      Thank you for your comment.
      We’ll address database rules, registration, and security in future tutorials.
      As for the notifications, that’s a great idea. I’ll research that.
      Regards,
      Sara

      Reply
      • Hi, Sara,
        I am looking forward to see this tutorial on how to set rules and security up. After one month using the open access in the rules, Firebase requests the use of the security option. I tried to set up a lot of times but it did not work.
        Thanks a lot, Luiz

        Reply
    • Thank you very much Sara for the answer and your interest in my ideas on topics of interest.

      I have followed the tutorial up to this point:

      13) After that, select the Firebase project for this directory — it should be the project created in this previous tutorial. In my case, it is called esp32-firebase-demo. Then hit Enter.

      And I always get the same response that does not allow me to move forward:

      [debug] [2021-09-24T13: 55: 51.408Z] ———————————– ———————————–
      [debug] [2021-09-24T13: 55: 51.415Z] Command: C: \ Program Files \ nodejs \ node.exe C: \ Users \ softm \ AppData \ Roaming \ npm \ node_modules \ firebase-tools \ lib \ bin \ firebase.js init
      [debug] [2021-09-24T13: 55: 51.416Z] CLI Version: 9.18.0
      [debug] [2021-09-24T13: 55: 51.416Z] Platform: win32
      [debug] [2021-09-24T13: 55: 51.417Z] Node Version: v14.17.6
      [debug] [2021-09-24T13: 55: 51.420Z] Time: Fri Sep 24 2021 10:55:51 GMT-0300 (Argentina Standard Time)
      [debug] [2021-09-24T13: 55: 51.420Z] ———————————– ———————————–
      [debug]
      [debug] [2021-09-24T13: 55: 51.441Z]> command requires scopes: [“email”, “openid”, “https://www.googleapis.com/auth/cloudplatformprojects.readonly”, “https: //www.googleapis.com/auth/firebase”,”https://www.googleapis.com/auth/cloud-platform “]
      [debug] [2021-09-24T13: 55: 51.442Z]> authorizing via signed-in user ([email protected])
      [info]
      ######## ######## ## ##
      You’re about to initialize a Firebase project in this directory:

      C: \ Firebase-Project

      Before we get started, keep in mind:

      You are currently outside your home directory

      [info]
      === Project Setup
      [info]
      [info] First, let’s associate this project directory with a Firebase project.
      [info] You can create multiple project aliases by running firebase use –add,
      [info] but for now we’ll just set up a default project.
      [info]
      [debug] [2021-09-24T13: 57: 26.924Z]> refreshing access token with scopes: []
      [debug] [2021-09-24T13: 57: 26.926Z] >>> HTTP REQUEST POST https://www.googleapis.com/oauth2/v3/token

      [debug] [2021-09-24T13: 57: 27.341Z] <<< HTTP RESPONSE 400 {“cache-control”: “no-cache, no-store, max-age = 0, must-revalidate”, “expires “:” Mon, 01 Jan 1990 00:00:00 GMT “,” date “:” Fri, 24 Sep 2021 13:57:27 GMT “,” pragma “:” no-cache “,” content-type “: “application / json; charset = utf-8”, “vary”: “X-Origin, Referer, Origin, Accept-Encoding”, “server”: “scaffolding on HTTPServer2”, “x-xss-protection”: “0 “,” x-frame-options “:” SAMEORIGIN “,” x-content-type-options “:” nosniff “,” alt-svc “:” h3 = \ “: 443 \”; ma = 2592000, h3- 29 = \ “: 443 \”; ma = 2592000, h3-T051 = \ “: 443 \”; ma = 2592000, h3-Q050 = \ “: 443 \”; ma = 2592000, h3-Q046 = \ “: 443 \ “; ma = 2592000, h3-Q043 = \”: 443 \ “; ma = 2592000, quic = \”: 443 \ “; ma = 2592000; v = \” 46.43 \ “”, “accept- ranges “:” none “,” transfer-encoding “:” chunked “}
      [debug] [2021-09-24T13: 57: 27.381Z] >>> [apiv2] [query] GET https://firebase.googleapis.com/v1beta1/projects pageSize = 100
      [debug] [2021-09-24T13: 57: 28.802Z] <<< [apiv2] [status] GET https://firebase.googleapis.com/v1beta1/projects 401
      [debug] [2021-09-24T13: 57: 28.802Z] <<< [apiv2] [body] GET https://firebase.googleapis.com/v1beta1/projects [omitted]
      debug] [2021-09-24T13: 57: 28.803Z] HTTP Error: 401, Request had invalid authentication credentials. Expected OAuth 2 access token, login cookie or other valid authentication credential. See https://developers.google.com/identity/sign-in/web/devconsole-project.
      [debug] [2021-09-24T13: 57: 29.153Z] FirebaseError: HTTP Error: 401, Request had invalid authentication credentials. Expected OAuth 2 access token, login cookie or other valid authentication credential. See https://developers.google.com/identity/sign-in/web/devconsole-project.
      at module.exports (C: \ Users \ softm \ AppData \ Roaming \ npm \ node_modules \ firebase-tools \ lib \ responseToError.js: 38:12)
      at Client.doRequest (C: \ Users \ softm \ AppData \ Roaming \ npm \ node_modules \ firebase-tools \ lib \ apiv2.js: 238: 23)
      at processTicksAndRejections (internal / process / task_queues.js: 95: 5)
      at async Client.request (C: \ Users \ softm \ AppData \ Roaming \ npm \ node_modules \ firebase-tools \ lib \ apiv2.js: 96: 20)
      at async getProjectPage (C: \ Users \ softm \ AppData \ Roaming \ npm \ node_modules \ firebase-tools \ lib \ management \ projects.js: 233: 17)
      at async getFirebaseProjectPage (C: \ Users \ softm \ AppData \ Roaming \ npm \ node_modules \ firebase-tools \ lib \ management \ projects.js: 250: 23)
      at async selectProjectInteractively (C: \ Users \ softm \ AppData \ Roaming \ npm \ node_modules \ firebase-tools \ lib \ management \ projects.js: 95: 41)
      at async Object.doSetup [as project] (C: \ Users \ softm \ AppData \ Roaming \ npm \ node_modules \ firebase-tools \ lib \ init \ features \ project.js: 87: 27)
      at async init (C: \ Users \ softm \ AppData \ Roaming \ npm \ node_modules \ firebase-tools \ lib \ init \ index.js: 19: 9)
      [error]
      [error] Error: Failed to list Firebase projects. See firebase-debug.log for more info.

      Any idea what is happening?
      Has it happened to any other forum member?

      Reply
      • I got something like this as I created a directory as c:\firebase

        It also warned me “You are currently outside your home directory”

        Try recreating under c:\users\username\desktop\firebase-project

        Should all be good then.

        Adam

        Reply
      • Thanks Sara,

        I picked up a few of the differences between your git code (broken link there too) and the blog snippets. After fixing those I had another long day of head scratching, googling and debugging.

        Turns out my real problem was that my database has no primary node with children as all the samples and problems on the web have.

        My database has 4 primary nodes, which means you reference each node directly. Once I did that all is working as expected.

        Thanks for the continuous handy blogs and tips – I really enjoy reading your blog and trying out many of your ideas.

        Reply
  2. Very nice tutorial. Not sure why my Google News feed only show your write up once a year. It’s almost a year since i last read one of your tutorials, Sara
    I would also love to see some applications on ESP that can send some Push Notification to my phone.

    Reply
  3. Good evening Sara, good evening everyone.
    I am stuck in step 14 of the tutorial.
    The terminal’s response is:
    What file should be used for Realtime Database Security Rules? database.rules.json
    Error: An unexpected error has occurred.

    However, I was able to complete the tutorial so far without the possible error reported when requesting “firebase – version”.
    I still deleted the “firebase.ps1” file, but it has no effect.
    Does somebody have an idea ?
    Claude

    Reply
  4. Brilliant stuff 🙂
    High quality tutorialt like this is the reason I signed up for RNTLab.
    I would love to have more Firebase tutorials.
    Thanks !

    Reply
  5. hello Sara,
    congratulations for the very clear instructions to get the project working with firebase!
    I succeeded to get it done! (I am 80 years old and I am happy to get every project you publish working…
    Greetings Renaat

    Reply
  6. Hi Sara & Rue
    Your tutorials are always easy to follow and I have been following your website and getting your tutorials to work for me about 1 year now. I have learned a lot from RNT! Many thanks.

    I managed to get this Firebase web app tutorial to work, then changed it so that it shows 2 off temperatures from BME280 boards. I have noticed that all browsers (edge, chrome, Firefox, and Samsung internet on my phone) do not seem to make changes I make to the HTML, Java files inside Visual Studio after deploy command.

    If for example I change a colour or a paragraph text in the HTML, then all browsers do this straight away, however if I change a temperature variable (say by adding +1.2, or making it a new variable inside the Java file) then the it does not seem to work.
    e.g. this code line – document.getElementById(“reading-float1”).innerHTML = floatReading1 + 1.20;
    It’s very strange for me? Did you see anything like this? I am beginning to doubt it something I am doing, but my knowledge of HTML and Java is only just started. I am thinking to buy your eBook about learn HTML, CSS & Java. If I did, do I also have to sign up (pay for) a webservice like Bluehost? This has always put me off a bit, as I do not want to spend money only to find out I am too stupid to make it work. This firebase example has allowed me to try out for free to see if I am really stupid or not. The jury is still to decide on that.

    I add +1.2 (or any other float number), the browsers to not seem to catch this offset and the value on the web app stays at whatever it was before.
    If I leave it alone for a time (about 1-2 hours) then the browsers then change eventually to be correct, and furthermore, they all seem to correct themselves at different times. The same browser on my desktop and laptop do not necessarily change at the same time either, for example on the desktop, chrome changes to be correct, but on the laptop chrome stays incorrect.
    The firebase console screen for the Realtime database is always correct and up to date (every 15 seconds).

    I would really love to see more examples with firebase, for example how to set an ESP32 output using a button on the web app, and float input value for setting a temperature for example to set a setpoint inside the ESP32 for controlling a heating system for example.

    Again, many thanks for your work. Very very helpfull.
    Allan.

    Reply
    • Hi.

      Thanks for following our work.

      For the JavaScript changes to take effect instantly, you need to hard refresh the web page. The issue is the cache.
      To do that, hold down CTRL and press F5 on a PC or Cmd+Shift+R on a Mac.

      The Build Web Servers eBook doesn’t include instructions for Bluehost.

      We’ll create more tutorials about Firebase that include those subjects you mentioned. We’re creating an eBook about creating a firebase web app from scratch that includes those features and much more. We’ll also publish more free tutorials soon.

      I hope this helps.

      Regards,
      Sara

      Reply
  7. Hi Sara,
    Great tutorial, thanks.
    I’ve played with Firebase and creating a web app before, but using the different command line tools separately was difficult and confusing. Bringing it all together in VS Code is brilliant!
    Please, please pursue this topic with more tutorials. I’d like to see:
    Authentication (seems to be popular in the thread)
    Graphical / time-based output on the web page, to track a sensor output over time.
    Now I’m going to add a sensor to the ESP32, to get some real data to replace the random number
    Thanks again, great stuff!
    Philip

    Reply
    • Hi Philip.
      Thanks for the suggestion.
      I’m preparing a premium firebase project (with step-by-step instructions in eBook format) that includes login/logout, authentication, database rules, and much more.
      Regards,
      Sara

      Reply
  8. Hi Sara,

    First of all I thank you very much for this guide.
    I’m stuck in section 21, I’m very grateful if you can help me.

    I get the following message,

    Site Not Found

    There are a few potential reasons:

    You haven’t deployed an app yet.
    You may have deployed an empty directory.

    This is a custom domain, but we haven’t finished setting it up yet.

    And do not get the picture you attached in the guide.
    Thanks in advance if you can help.

    Reply
    • Hi.
      Did you complete the steps to add Firebase to your app? I mean, if you go to your project overview in your Firebase Console, does it have an app?
      Did you deploy your project successfully? See step 17.
      Still on step 17, are you running the command on the project path?

      Do you have a Firebase project with a index.html file? See step 16.
      Are you inserting the right authDomain? It is different than mine.

      Regards,
      Sara

      Reply
  9. Olá Sara,

    Obrigado pelo muito bem detalhado tutorial.

    Eu tenho uma dúvida no tópico 21 na parte que diz “Copy the following to your index.html file”.

    Você poderia me ajudar com isso? Não entendi como acessar o meu index.html.
    Agradeço desde já.

    Reply
    • Hi.
      See step number 16).
      You should have a file called index.html.
      Copy the HTML provided in the tutorial to that file.
      Let me know if this helps.
      Regards,
      Sara

      Reply
  10. Dear RNT team,
    Thank you for the tutorial on the firebase web app. I learned a lot as new user. However, after some trial and error I managed to get the interface working in the PC browser but it doesn’t show on my Android phone. So localhost:5000 is not functional. I can however fiddle with the database in firebase. Any idea?
    Thx. Jeroen

    Reply
    • Ji.
      Don’t worry.
      You’ll be able to access the Firebase app from your smartphone once you deploy it later in the tutorial.
      Continue following the instructions.
      Regards,
      Sara

      Reply
  11. Hi Sara,

    Great job. Every thing is working from first try. I created my first web app with your help.
    But i have an issue. Im monitoring water temperature with 6 sensors. Some times my ESP looses wifi or device goes offline. The data in Firebase stays at the last value and display it on the WEB app. How can I check if the ESP32 is online and display it on WEB app?

    Best regards

    Reply
  12. Hi Sara,
    thank you for this very interesting project. On the last step I get an error message downloading the sketch to the Esp32:
    ESP-Firebase:8:33: fatal error: Firebase_ESP_Client.h: No such file oder directory. Compilation terminated.
    What did I wrong and what to do to clear the error?
    Thanks and merry christmas!
    Thomas

    Reply
  13. Hi Sara, I am facing a problem when downloading Node.js LTS, because the application is only supported on Windows 8.1. I have unfortunately Windows 7. Any idea to solve it ?
    Thanks.

    Reply
  14. Many thanks Sara. I haven’t used firebase or VS platformIO before. I found your tutorial very easy to follow and had minimal problems getting it. I will have a play with the html to get a better looking user interface. Looking forward to further articles as you have mentioned.
    Thanks
    Bruce

    Reply
  15. Hello Sarah. I am a student and what to learn more about web applications and esp32. Your tutorials have been exellent, but I am getting a problem. In step 14, it gives me a an error message that makes my terminal look like this:

    ? What file should be used for Realtime Database Security Rules? database.rules.json

    Error: HTTP Error: 401, Permission denied

    Please help!

    Reply
  16. Hello, Thank you for this nice tutorial!
    I went through the steps and managed almost everything, with one exception: on the ____.firebaseapp.com webpage it don’t apear the int and float number (only the text is visible).
    On the Firebase website / Realtime databse I see also the updated numbers (so the communication between the ESP32 and Firebase work).
    Where do I look for the bug?

    Reply
    • Hi.
      When you go to your firebase webpage, open the Javascript console on your browser and check if there are any errors.
      From there, it will be easier to troubleshoot.
      Regards,
      Sara

      Reply
  17. hello . i have problem when i deploy i have problem
    “Uncaught (in promise) ReferenceError: setupUI is not defined
    at auth.js:12:7
    at auth.js:1612:9”
    how can i fix it

    Reply
  18. Hi Sara and Rui,

    I have tried and tried again to figure out what is going on and I have repeated the instructions multiple times and I still keep getting this readout from Arduino serial monitor:
    CONFIGURATION_NOT_FOUND
    Token info: type = id token, status = on request
    Token info: type = id token, status = error
    Token error: code: 400, message: INVALID_EMAIL
    Token info: type = id token, status = error
    Token error: code: 400, message: bad request
    Token info: type = id token, status = on request
    Token info: type = id token, status = error
    Token error: code: 400, message: INVALID_EMAIL

    I’m really unsure what I did wrong. Everything on the firebase side shows as good, and everything deployed on Visual Studio perfectly fine.
    Any Ideas

    Reply
  19. Hi there
    Great tutorials on Firebase. I’ve really enjoyed following them.
    I’m new to Visual Studio and I’m at a loss to why I’ve got the following issue.
    The app through the browser shows up but displays no data at all. I’ve checked and the code does not have any issues or so I can see. Firebase and Visual Studio must be seeing each other, as once deployed it all changes. Through my project on Firebase, the hyper links jump to the app in the Web browser.
    Any suggestions?
    Thanks

    Reply
  20. Hi there
    Thank you for the great tutorials regarding Firebase. It has made it easy to setup and follow, although I have an issue.
    Everything seems to have been setup but the app is not showing any data. I can see everything in Firebase, no errors in Visual Studio but no data in the app.
    When I setup a file directory using ‘c \’ afterwards it comes up with two directories. At some point I must have have downloaded VS and now there are two directories when I open a new terminal.
    Can’t think of anything else to cause the class.
    Thanks
    Chris

    Reply
  21. Thanks for the great description. Sadly I experienced a problem after step14. It came back with ‘Firebase initialization complete’ and never went to step 15. Any suggestions how to solve that?

    Reply
  22. Hello!
    I was using this guide for my project in November 2022, and my hosted page works and my project too.
    But now i need to use this project again and when i try to use it , it doesn’t work.
    The console log of my firebase web app says:
    /__/firebase/9.9.1/firebase-performance-compat.js net::ERR_BLOCKED_BY_CLIENT

    app.js:137 The read failed: Error
    util.ts:491 Uncaught (in promise) Error: permission_denied at /owners: Client doesn’t have permission to access the desired data.
    at onComplete (util.ts:491:17)
    at Object.onComplete (Repo.ts:314:24)
    at PersistentConnection.ts:333:22
    at tn.onDataMessage_ (PersistentConnection.ts:673:9)
    at wt.onDataMessage_ (Connection.ts:321:10)
    at wt.onPrimaryMessageReceived_ (Connection.ts:313:12)
    at yt.onMessage (Connection.ts:210:16)
    at yt.appendFrame_ (WebSocketConnection.ts:302:12)
    at yt.handleIncomingFrame (WebSocketConnection.ts:354:14)
    at mySock.onmessage (WebSocketConnection.ts:224:12)

    Don’t change anything and it should work like it did in October. Maybe it’s something because I’m using old versions of firebase?
    (I already changed the database rules to have access)
    Thanks!

    Reply
  23. Very good tutorial, I was new and could succeed in first step, very detailed tutorial, just follow steps and you are done.
    Tons of love for Santos family for their contribution for society.

    Reply

Leave a Comment

Download Our Free eBooks and Resources

Get instant access to our FREE eBooks, Resources, and Exclusive Electronics Projects by entering your email address below.