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.
Updated 22 April 2025
Complete the following tutorial before proceeding:
Here are the major steps to complete this tutorial.
- Creating Firebase Project—we recommend using the Firebase project from this previous tutorial.
- Installing Required Software
- Setting Up a Firebase Web App Project (VS Code)
- 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:
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).
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.
Select the following options and click Next.
Press the Install button.
Finally, click Finish to finish the installation.
Open VS Code, and you’ll be greeted by a Welcome tab with the released notes of the newest version.
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).
After downloading the Visual Studio Code application file, you’ll be prompted with the following message. Press the “Open” button.
Or open your Downloads folder and open Visual Studio Code.
After that, you’ll be greeted by a Welcome tab with the released notes of the newest version.
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).
Save the installation file:
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.debWhen the installation is finished, VS Code should be available in your applications menu.
Open VS Code, and you’ll be greeted by a Welcome tab with the released notes of the newest version.
That’s it. Visual Studio Code was successfully installed.
Installing Node.js
1) Go to nodejs.org and download the LTS version.
2) Run the executable file and follow the installation process.
3) Enable automatically install all the necessary tools.
4) When it’s done, click Finish.
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.
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@latest4) Run the following command to install firebase tools globally:
npm -g install firebase-tools
5) Firebase tools will be installed (you can ignore any warning about deprecated libraries).
6) Test if Firebase was successfully installed with the following command:
firebase --versionIt should return the Firebase version currently installed.
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:
- Creating a Project Folder
- Firebase Login
- Initializing Web App Firebase Project
- 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.
2) Firebase Login
4) On the previous Terminal window, type the following:
firebase login5) You’ll be asked to collect CLI usage and error reporting information. Enter “n” and press Enter to deny.
6) After this, it will pop up a new window on your browser to login into your firebase account.
7) Allow Firebase CLI to access your google account.
8) After this, Firebase CLI login should be successful. You can close the browser window.
3) Initializing Web App Firebase Project
9) After successfully logging in, run the following command to start a Firebase project directory in the current folder.
firebase init10) You’ll be asked if you want to initialize a Firebase project in the current directory. Enter Y and hit Enter.
11) Then, use they 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.
12) Select the option “Use an existing project”—it should be highlighted in blue—then, hit Enter.
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 ESP-Project. Then hit Enter.
14) 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
15) Press Enter on the following question to select the default database security rules file: “What file should be used for Realtime Database Security Rules?“
16) The Firebase project should now be initialized successfully. Notice that VS Code created some essential files under your project folder.
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
After deploying, you should get your Hosting URL. Go to that URL. You should get access to a similar web page.
This web page is built using the files placed in the public folder of your Firebase project.
You can access that web page from anywhere in the world. Now, the idea is to change the files in the public folder to show your own web page instead of that one.
4) Add Firebase To Your App
Leave VS Code open. 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 +Add app button and then, select the web app icon.
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.
20) Then, copy the firebaseConfig object because you’ll need it later.
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 (the same we got in the Terminal window after setting up the Firebase project):
https://esp-project-a9add.web.appThis is the URL that allows you to access your web app.
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 to display the readings saved on the Realtime Database created on this previous project.
<!-- Complete Project Details
ESP32: https://RandomNerdTutorials.com/esp32-firebase-web-app/
ESP8266: https://RandomNerdTutorials.com/esp8266-nodemcu-firebase-web-app/ -->
<!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>
<!-- Load your app.js script -->
<script src="app.js" type="module"></script>
</head>
<body>
<h1>ESP Firebase Web App Example</h1>
<p>Reading int: <span id="reading-int"></span></p>
<p>Reading float: <span id="reading-float"></span></p>
<p>Reading string: <span id="reading-string"></span></p>
</body>
</html>
Let’s take a quick look at the HTML file.
In the <head> of the HTML file, we must add all the required metadata.
<!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>
<!-- Load your app.js script (place at the bottom) -->
<script src="app.js" type="module"></script>
</head>The title of the web page is ESP Firebase App, but you can change it in the following line.
<title>ESP Firebase App</title>We’ll take care of interacting with the Realtime Database on a JavaScript file called app.js (that we’ll create later). That file will also contain the JavaScript functions to update the HTML page with the database values. We need to load it here before displaying the body of the HTML page.
<script src="app.js" type="module"></script>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 three paragraphs to display the int, float, and String values saved in 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>
<p>Reading string: <span id="reading-string"></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 interacting with the Realtime Database and updating the values on the web page whenever there’s a change in the database.
Copy the following to your app.js file and save it.
// Complete Project Details
// ESP32: https://RandomNerdTutorials.com/esp32-firebase-web-app/
// ESP8266: https://RandomNerdTutorials.com/esp8266-nodemcu-firebase-web-app/
import { initializeApp } from "https://www.gstatic.com/firebasejs/11.6.0/firebase-app.js";
import { getDatabase, ref, onValue } from "https://www.gstatic.com/firebasejs/11.6.0/firebase-database.js";
// Firebase configuration
const 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
const app = initializeApp(firebaseConfig);
// Get a reference to the database
const database = getDatabase(app);
// Database Paths
const dataFloatPath = 'test/float';
const dataIntPath = 'test/int';
const dataStringPath = 'test/string';
// Get database references
const databaseFloatRef = ref(database, dataFloatPath);
const databaseIntRef = ref(database, dataIntPath);
const databaseStringRef = ref(database, dataStringPath);
// Variables to save database current values
let floatReading;
let intReading;
let stringReading;
// Attach listeners
onValue(databaseFloatRef, (snapshot) => {
floatReading = snapshot.val();
console.log("Float reading: " + floatReading);
document.getElementById("reading-float").innerHTML = floatReading;
});
onValue(databaseIntRef, (snapshot) => {
intReading = snapshot.val();
console.log("Int reading: " + intReading);
document.getElementById("reading-int").innerHTML = intReading;
});
onValue(databaseStringRef, (snapshot) => {
stringReading = snapshot.val();
console.log("String reading: " + stringReading);
document.getElementById("reading-string").innerHTML = stringReading;
});
Let’s take a quick look to see how it works.
Importing Firebase Libraries
The following lines load the Firebase tools that will be required for this example to connect and read from the Realtime Database. We use the Firebase CDN URLs, so we don’t need to install Firebase locally.
import { initializeApp } from "https://www.gstatic.com/firebasejs/11.6.0/firebase-app.js";
import { getDatabase, ref, onValue } from "https://www.gstatic.com/firebasejs/11.6.0/firebase-database.js";Firebase Configuration
Add your firebaseConfig object below. This is required to authenticate and locate the RTDB of your project. You get these values from the Firebase Console when you create a project and add a web app (like we did in previous steps).
const 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
The following line initializes a Firebase app using the configuration object defined earlier. It returns an app object that you can use to interact with the application.
const app = initializeApp(firebaseConfig);Reference to the Database, Database Paths, and Other Variables
The following command creates a reference to the Database associated with the app we initialized.
const database = getDatabase(app);We define the database paths where the data we want to read is stored.
const dataFloatPath = 'test/float';
const dataIntPath = 'test/int';
const dataStringPath = 'test/string';Then, we create references to specific locations on the database using those paths.
const databaseFloatRef = ref(database, dataFloatPath);
const databaseIntRef = ref(database, dataIntPath);
const databaseStringRef = ref(database, dataStringPath);We create variables to store the current values read from the database.
let floatReading;
let intReading;
let stringReading;Get Values from the Database (Listeners)
Finally, to get values from the database, we can attach listeners to each of those database references. Then, anytime there’s a change in the database, we’ll update the HTML page with the corresponding values.
Let’s see how to do that. For example, we can use the onValue() function that accepts as arguments a reference to the database, and a callback function:
onValue(databaseFloatRef, (snapshot) => {
floatReading = snapshot.val();
console.log("Float reading: " + floatReading);
document.getElementById("reading-float").innerHTML = floatReading;
});In this case, the onValue() function attaches a listener to the databaseFloatRef (/test/float). Whenever the value at that path changes in the database, the callback function runs. In this case, we’re defining the callback function inside the onValue(). It is defined as an arrow function.
The (snapshot) is the parameter of the callback function. When Firebase calls the callback, it passes a snapshot object containing the current data at test/float. Then, the => arrow syntax indicates this is an arrow function, a concise way to define functions in JavaScript. The function body is defined between { }.
Let’s go back to the callback function: snapshot.val() gets the current value at the path. The value is stored in the floatReading variable.
floatReading = snapshot.val();It’s logged to the console for debugging purposes.
console.log("Float reading: " + floatReading);The webpage element with id=”reading-float” (defined in the index.html file) is updated to display the value.
document.getElementById("reading-float").innerHTML = floatReading;We proceed in a similar way for the other database paths.
onValue(databaseIntRef, (snapshot) => {
intReading = snapshot.val();
console.log("Int reading: " + intReading);
document.getElementById("reading-int").innerHTML = intReading;
});
onValue(databaseStringRef, (snapshot) => {
stringReading = snapshot.val();
console.log("String reading: " + stringReading);
document.getElementById("reading-string").innerHTML = stringReading;
});Deploy your App
After saving the HTML and JavaScript files, deploy your app on VS Code by running the following command in VS Code Terminal window.
firebase deployESP32 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 10 seconds.
Don’t forget to insert your network credentials, database URL, and Firebase Project API Key, and Firebase user email and password.
/*********
Rui Santos & Sara Santos - Random Nerd Tutorials
Complete instructions at https://RandomNerdTutorials.com/esp32-firebase-realtime-database/
*********/
#include <Arduino.h>
#include <WiFi.h>
#include <WiFiClientSecure.h>
#include <FirebaseClient.h>
// Network and Firebase credentials
#define WIFI_SSID "REPLACE_WITH_YOUR_SSID"
#define WIFI_PASSWORD "REPLACE_WITH_YOUR_PASSWORD"
#define Web_API_KEY "REPLACE_WITH_YOUR_FIREBASE_PROJECT_API_KEY"
#define DATABASE_URL "REPLACE_WITH_YOUR_FIREBASE_DATABASE_URL"
#define USER_EMAIL "REPLACE_WITH_FIREBASE_PROJECT_EMAIL_USER"
#define USER_PASS "REPLACE_WITH_FIREBASE_PROJECT_USER_PASS"
// User function
void processData(AsyncResult &aResult);
// Authentication
UserAuth user_auth(Web_API_KEY, USER_EMAIL, USER_PASS);
// Firebase components
FirebaseApp app;
WiFiClientSecure ssl_client;
using AsyncClient = AsyncClientClass;
AsyncClient aClient(ssl_client);
RealtimeDatabase Database;
// Timer variables for sending data every 10 seconds
unsigned long lastSendTime = 0;
const unsigned long sendInterval = 10000; // 10 seconds in milliseconds
// Variables to send to the database
int intValue = 0;
float floatValue = 0.01;
String stringValue = "";
void setup(){
Serial.begin(115200);
// Connect to Wi-Fi
WiFi.begin(WIFI_SSID, WIFI_PASSWORD);
Serial.print("Connecting to Wi-Fi");
while (WiFi.status() != WL_CONNECTED) {
Serial.print(".");
delay(300);
}
Serial.println();
// Configure SSL client
ssl_client.setInsecure();
ssl_client.setConnectionTimeout(1000);
ssl_client.setHandshakeTimeout(5);
// Initialize Firebase
initializeApp(aClient, app, getAuth(user_auth), processData, "🔐 authTask");
app.getApp<RealtimeDatabase>(Database);
Database.url(DATABASE_URL);
}
void loop(){
// Maintain authentication and async tasks
app.loop();
// Check if authentication is ready
if (app.ready()){
// Periodic data sending every 10 seconds
unsigned long currentTime = millis();
if (currentTime - lastSendTime >= sendInterval){
// Update the last send time
lastSendTime = currentTime;
// send a string
stringValue = "value_" + String(currentTime);
Database.set<String>(aClient, "/test/string", stringValue, processData, "RTDB_Send_String");
// send an int
Database.set<int>(aClient, "/test/int", intValue, processData, "RTDB_Send_Int");
intValue++; //increment intValue in every loop
// send a string
floatValue = 0.01 + random (0,100);
Database.set<float>(aClient, "/test/float", floatValue, processData, "RTDB_Send_Float");
}
}
}
void processData(AsyncResult &aResult) {
if (!aResult.isResult())
return;
if (aResult.isEvent())
Firebase.printf("Event task: %s, msg: %s, code: %d\n", aResult.uid().c_str(), aResult.eventLog().message().c_str(), aResult.eventLog().code());
if (aResult.isDebug())
Firebase.printf("Debug task: %s, msg: %s\n", aResult.uid().c_str(), aResult.debug().c_str());
if (aResult.isError())
Firebase.printf("Error task: %s, msg: %s, code: %d\n", aResult.uid().c_str(), aResult.error().message().c_str(), aResult.error().code());
if (aResult.available())
Firebase.printf("task: %s, payload: %s\n", aResult.uid().c_str(), aResult.c_str());
}
Demonstration
The ESP32 should be sending new readings every 10 seconds to the database.
Go to your App URL. New readings will show up on the web page every 10 seconds. The App updates the web page whenever the ESP32 writes a new value to the database.
If you don’t see this web page, you may need to hard refresh your web browser (CTRL+F5 or Cmd+R).
In your Firebase Console, you can go to your project page and check that new values are being written into the database every 10 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.
This example demonstrates the potential of Firebase Web Apps for the ESP32, despite some limitations. Currently, the database is in test mode without rules, allowing anyone to read and write data, and lacks authentication. Nonetheless, we hope you find this tutorial helpful. To learn more, you can also check the Firebase documentation.
If you want to learn more about Firebase with the ESP32 and ESP8266 boards, check out our eBook:
Learn more with the ESP32 with our resources:
- Learn ESP32 with Arduino IDE (eBook)
- Build Web Servers with ESP32 and ESP8266 eBook (3rd Edition)
- More ESP32 Projects and Tutorials …
Thanks for reading.
Great job!
Thank you!
WOW !! you have to install and configure even the holly bible just to send data from your phone to your esp32 !!!!!!!!
Could it be a more difficult way ?????
?
Too bad you feel that way. Fortunately my experience with it is quite pisitive. Fairly easy and flexible. It handles all my homevautomation
Muchas gracias por sus tutoriales siempre me ayudan
Hey friends,
Thank you so much for all knowledge, in the future do you plan to write about esp32 version 2?
Hi.
Thanks.
Are you talking about ESP32 S2?
Yes, we’ll probably write about that.
Regards,
Sara
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.
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
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
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?
Hi.
I’m not sure what might be wrong.
Did you follow all the exact instructions?
Can you send an email to our support? https://randomnerdtutorials.com/support/
Rui will forward your email to me and it will be easier to find out what is happening.
Just add [To Sara] in the email subject.
Regards,
Sara
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
Great tutorial. Very useful concepts. Thank you. I would love to see more, specifically around securing the application.
Thanks!
We’ll cover database rules and authentication in future tutorials.
Regards,
Sara
Great idea but I’m getting errors running the HTML
Uncaught ReferenceError: initializeApp is not defined
Uncaught TypeError: database is undefined
Hi Steve.
I noticed that there was a problem and the complete HTML file was missing.
Here’s the link for the complete HTML file: https://raw.githubusercontent.com/RuiSantosdotme/Firebase-ESP/main/ESP-Firebase-App-Readings/index.html
Let me know if it works.
Regards,
Sara
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.
Thank you for perfect tutorial!
Note: Please correct your typo error in the middle of this tutorial:
error-hyperlink:
https://github.com/RuiSantosdotme/Firebase-ESP/raw/main/ESP-Firebase-App-Readings/index.html<br%20/>
correct hyperlink without <br%20/>%0A:
https://github.com/RuiSantosdotme/Firebase-ESP/raw/main/ESP-Firebase-App-Readings/index.html
Awaiting new great tutorials from you!
Thanks for noticing.
It is fixed now.
Regards,
Sara
I enjoy this project and looking forward for some more Firebase topics. Great Job.
Thanks 🙂
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.
Hi.
Thanks for the suggestion.
You can subscribe to our newsletter to receive weekly updates on new projects.
Regards,
Sara
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
Hi.
I’m not sure how to solve that issue.
In my case, I solved it by deleting the firebase.ps1 file.
But there are other suggestions: https://github.com/firebase/firebase-tools/issues/1627
Regards,
Sara
Brilliant stuff 🙂
High quality tutorialt like this is the reason I signed up for RNTLab.
I would love to have more Firebase tutorials.
Thanks !
Hi.
That’s great! Thank you.
We have some ideas lined up already 😀
Regards,
Sara
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
Hi.
That’s great!
I’m so glad to hear that.
Regards,
Sara
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.
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
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
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
Looking forward to it 🙂
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.
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
Hi i’m very interested to learn more about the firebase features i Will wait for you guys i’m very exited.
Thanks
Regards
That’s great!
We’re working on it!
Regards,
Sara
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á.
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
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
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
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
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
Hi Sara,
I found the missing library on github: https://github.com/mobizt/Firebase-ESP-Client
Now it works!
Thomas
Hi.
Yes. You need to install the library to make it work.
Regards,
Sara
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.
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
Hi.
Thanks. That’s great!
You can check all our firebase tutorials here: https://randomnerdtutorials.com/?s=firebase
Regards,
Sara
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!
Hi.
Make sure you follow the step 1)
1) Creating a Project Folder
Regards,
Sara
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?
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
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
Hi.
What project are you following?
Regards,
Sara
Can esp32-cam video be used in Firebase?
Hi.
I think it should be possible, but at the moment, I don’t know how to implement it.
Regards,
Sara
Great Tutorial!
Thanks so much for all the hard work you guys do to help make our learning more directed!
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
Taking into account the error message, there seems to be something wrong with the email you’re using…
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
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
Hi.
When you say it has no data, what do you mean exactly?
Did you follow this tutorial first? https://randomnerdtutorials.com/esp32-firebase-web-app/#:~:text=Getting%20Started%20with%20ESP32%20with%20Firebase%20(Realtime%20Database)
Regards,
Sara
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?
found it already. just issue “firebase init hosting”
Hi, I really like this site and your work, are you planning the esp32 & PWA tutorial as a modern interface?
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!
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.
Hello, thanks for the tutorial. You guys are doing a lot of nice work,
Please I’d like to show your the error message that is displaying on my serial monitor. I tried so much to debug the error but still doesn’t work.
Here’s the error message:
Token info: type = id token (GITKit token), status = on request
Token info: type = id token (GITKit token), status = error
Token error: code: -4, message: connection lost
Hi.
You’re probably wrong credentials or wrong database URL.
Regards,
Sara
Hi and thanks for the great tutorial on Firebase. I am trying to adapt your instructions to use on my own project but I’m not seeing any data/records being displayed on the web page. Can you recommend a way to troubleshoot this? It’s probably a path issue but I’ve tried several changes and deployed them but still nothing and I’m not sure how to debug this.
My path looks similar to ///. The path, as defined in app.js is //
Can you recommend some troubleshooting tips as to how to debug this?
Thanks.
Looks like the path info was filtered out. It should be Userid/deviceID/date/data. The dataStringPath would be similar: const dataStringPath = ‘Userid/deviceID/date’;
Hi.
I’m sorry, but I didn’t understand your question.
Are you having issues with our tutorial, or is it with your modified version only?
Regards,
Sara