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.
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@latest
4) Run the following command to install firebase tools globally:
npm -g install firebase-tools
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).
6) Test if Firebase was successfully installed with the following command:
firebase --versionIn my case, I get the following error.
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.
Go back to VS Code, and rerun the following command.
firebase --versionThis time, it should return the Firebase Tools version without any error.
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 login 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 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 esp32-firebase-demo. Then hit Enter.
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
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
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).
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:
esp32-firebase-demo.firebaseapp.comThis 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.
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>
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);
});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 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 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());
}
}
}
Demonstration
The ESP32 should be sending new readings every 15 seconds to the database.
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.
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:
- Learn ESP32 with Arduino IDE (eBook + video course)
- Build Web Servers with ESP32 and ESP8266 eBook (2nd 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 ?????
?
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