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.
Updated May 9, 2026
Complete the following tutorial before proceeding:
Getting Started with ESP32 with Firebase (Realtime Database)
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:
Visual Studio Code
Node. JS LTS version
Install Firebase Tools
Installing VS Code
Follow the next instructions to install VS Code on your Operating System:
A)
Windows
B)
MacOS X
C)
Linux
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.deb
When 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 (you can ignore any warning about deprecated libraries).
6)
Test if Firebase was successfully installed with the following command:
firebase
--version
It 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
5)
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
init
10)
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-a9