![\"Control](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2022\/07\/ESP-Control-GPIOs-from-Anywhere-web-app.jpg?resize=1200%2C675&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nUpdated 12 June 2025<\/em><\/p>\n\n\n\n This article is Part 2 of a previous tutorial. You need to complete one of the following tutorials before proceeding:<\/p>\n\n\n\n In this tutorial (Part 2), you’ll create a web app to control the ESP32 or ESP8266 GPIOs from anywhere. In a previous tutorial, you learned how to set the ESP32 or ESP8266 to listen to database changes and update its GPIOs accordingly. You changed the GPIO states manually on the Realtime Database using the Firebase console. Now, you’ll create your own web app, hosted on Firebase, to control your boards from anywhere.<\/p>\n\n\n\n The following diagram shows a high-level overview of the project we’ll build\u2014programming the ESP32\/ESP8266 and setting up the Firebase Project was done in Part 1:<\/p>\n\n\n\n The following screenshot shows what the web page looks like on a computer web browser.<\/p>\n\n\n Before start creating the Firebase Web App, you need to check the following prerequisites.<\/p>\n\n\n\n You should have followed the one the following tutorials first:<\/p>\n\n\n\n The ESP32\/ESP8266 must be running the code provided in that tutorial. The realtime database and authentication must be set up also as shown in the tutorial.<\/p>\n\n\n\n Before getting started you need to install the required software to create the Firebase Web App. Here’s a list of the software you need to install (click on the links for instructions):<\/p>\n\n\n\n 1)<\/strong> Go to your Firebase project Console and add an app to your project by clicking on the +Add app <\/strong>button.<\/p>\n\n\n 2)<\/strong> Select the web app icon.<\/p>\n\n\n\n 3)<\/strong> Give your app a name. Then, check the box next to \u221a Also set up Firebase Hosting for this App<\/strong>. Click Register app<\/strong>.<\/p>\n\n\n 4)<\/strong> Then, copy the firebaseConfig<\/span> object and save it because you’ll need it later.<\/p>\n\n\n After this, you can also access the firebaseConfig<\/span> object if you go to your Project settings in your Firebase console.<\/p>\n\n\n\n 5)<\/strong> Click Next<\/strong> on the proceeding steps, and finally on Continue to console<\/strong>.<\/p>\n\n\n\n Follow the next steps to create a Firebase Web App Project using VS Code.<\/p>\n\n\n\n 1)<\/strong> Create a folder on your computer where you want to save your Firebase project\u2014for example, Firebase-Project<\/em><\/span> on the Desktop.<\/p>\n\n\n\n 2)<\/strong> Open VS Code. Go to File<\/strong> > Open Folder…<\/strong> and select the folder you’ve just created.<\/p>\n\n\n\n 3)<\/strong> Go to Terminal <\/strong>> New Terminal<\/strong>. A new Terminal window should open on your project path.<\/p>\n\n\n 4)<\/strong> On the previous Terminal window, type the following:<\/p>\n\n\n\n 5)<\/strong> You’ll be asked to collect CLI usage and error reporting information. Enter “n<\/strong>” and press Enter<\/strong> to deny.<\/p>\n\n\n Note:<\/strong> If you are already logged in, it will show a message saying: “Already logged in as user@gmail.com”.<\/p>\n\n\n\n 6)<\/strong> After this, it will pop up a new window on your browser to login into your firebase account.<\/p>\n\n\n 7)<\/strong> Allow Firebase CLI to access your google account.<\/p>\n\n\n 8)<\/strong> After this, Firebase CLI login should be successful. You can close the browser window.<\/p>\n\n\n 9)<\/strong> After successfully login in, run the following command to start a Firebase project directory in the current folder.<\/p>\n\n\n\n 10)<\/strong> You’ll be asked if you want to initialize a Firebase project in the current directory. Enter Y<\/strong> and hit Enter<\/strong>.<\/p>\n\n\n 11)<\/strong> Then, use up and down arrows and the Space key to select the options. Select the following options:<\/p>\n\n\n\n The selected options will show up with a green asterisk. Then, hit Enter<\/strong>. <\/p>\n\n\n 12)<\/strong> Select the option “Use an existing project”\u2014it should be highlighted in blue\u2014then, hit Enter.<\/p>\n\n\n 13)<\/strong> After that, select the Firebase project for this directory\u2014it should be the project created in Part 1<\/a><\/strong>. Then hit Enter<\/strong>.<\/p>\n\n\n 14)<\/strong> Then, select the hosting options as shown below:<\/p>\n\n\n\n 15)<\/strong> Press Enter <\/strong>on the following question to select the default database security rules file: “What file should be used for Realtime Database Security Rules?<\/strong>“<\/p>\n\n\n\n 16)<\/strong> The Firebase project should now be initialized successfully. Notice that VS Code created some essential files under your project folder.<\/p>\n\n\n The index.html<\/span> 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.<\/p>\n\n\n\n 17)<\/strong> To check if everything went as expected, run the following command on the VS Code Terminal window.<\/p>\n\n\n\n You should get a Deploy complete!<\/strong> message and a URL to the Project Console and the Hosting URL.<\/p>\n\n\n\n 18)<\/strong> Copy the hosting URL and paste it into a web browser window. You should see the following web page. You can access that web page from anywhere in the world.<\/p>\n\n\n The web page you’ve seen previously is built with the HTML file placed in the public<\/span> folder of your Firebase project. By changing the content of that file, you can create your own web app. That’s what we’re going to do in the next section.<\/p>\n\n\n\n Now that you’ve created a Firebase project app successfully on VS Code, follow the next steps to customize the app to display the sensor readings on a login-protected web page.<\/p>\n\n\n\n Copy the following to your index.html<\/span> file. This HTML file creates a simple web page with ON and OFF buttons to control GPIOs 12, 13, and 14.<\/p>\n\n\n\n If you aren’t authenticated, it shows a login form. When you authenticate with an authorized user email and corresponding password, it shows the user interface with the buttons.<\/p>\n\n\n View raw code<\/a><\/p>\n\n\n\n Let’s take a quick look at the HTML file, or skip to the next section.<\/p>\n\n\n\n In the <head><\/span><\/span> of the HTML file, we must add all the required metadata.<\/p>\n\n\n\n The title of the web page is ESP Firebase App<\/strong>, but you can change it in the following line.<\/p>\n\n\n\n The following line allows us to use fontawesome icons<\/a>:<\/p>\n\n\n\n\n
Project Overview<\/h2>\n\n\n\n
\n
![\"Firebase](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2022\/07\/Firebase-Control-Outputs-from-anywhere-web-app-project-overview-f.jpg?resize=750%2C1052&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n\n
![\"Control](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2022\/04\/Control-from-Anywhere-Firebase-App-small.png?resize=687%2C473&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nPrerequisites<\/h2>\n\n\n\n
Creating a Firebase Project<\/h3>\n\n\n\n
\n
Install Required Software<\/h3>\n\n\n\n
\n
\n\n\n\n1) Add an App to Your Firebase Project<\/h2>\n\n\n\n
![\"Add](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/12\/Add-App-to-Firebase-Project.png?resize=740%2C198&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Firebase](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/10\/add-firebase-to-web-app-example.png?resize=552%2C601&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"firebaseConfig\u00a0object](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/10\/app-firebase-config-object.png?resize=666%2C210&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n
\n\n\n\n2) Setting Up a Firebase Web App Project (VS Code)<\/h2>\n\n\n\n
1) Creating a Project Folder<\/h3>\n\n\n\n
![\"Install](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/08\/Terminal-Window-Firebase-Folder-Project.png?resize=746%2C163&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n2) Firebase Login<\/h3>\n\n\n\n
firebase <\/strong>login<\/code><\/pre>\n\n\n\n![\"Login](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/08\/Terminal-Window-Login-Firebase-VS-Code.png?resize=750%2C397&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Login](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/08\/Login-Firebase-Account.png?resize=750%2C648&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Login](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/08\/Login-Firebase-Account-2.png?resize=750%2C875&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Login](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/08\/Firebase-CLI-Login-Successful.png?resize=689%2C454&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n3) Initializing Web App Firebase Project<\/h3>\n\n\n\n
firebase <\/strong>init<\/code><\/pre>\n\n\n\n![\"Login](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/08\/Firebase-Start-Project-VS-Code.png?resize=684%2C187&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n\n
![\"Login](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/08\/realtime-database-hosting-options.png?resize=750%2C186&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Firebase](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/08\/Firebase-Project-Setup-VS-Code.png?resize=658%2C228&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Select](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2025\/04\/select-firebase-project-VS-Code.png?resize=662%2C174&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n\n
![\"Firebase](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/08\/firebase-hosting-setup-all-options.png?resize=657%2C277&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Firebase](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/08\/firebase-project-app-created-successfully.png?resize=750%2C382&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nfirebase <\/strong>deploy<\/code><\/pre>\n\n\n![\"Firebase](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2022\/02\/deploy-firebase-project.png?resize=713%2C384&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Firebase](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2022\/02\/Firebase-Hosting-Setup-Complete.png?resize=740%2C534&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n
\n\n\n\n3) Creating the Firebase Web App<\/h2>\n\n\n\n
index.html<\/h3>\n\n\n\n
<!DOCTYPE html>\n<!-- Complete Project Details at: https:\/\/RandomNerdTutorials.com\/ -->\n<html>\n <head>\n <meta charset="utf-8">\n <meta name="viewport" content="width=device-width, initial-scale=1">\n <title>ESP IoT Firebase App<\/title>\n <link rel="stylesheet" href="https:\/\/use.fontawesome.com\/releases\/v5.7.2\/css\/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">\n <link rel="icon" type="image\/png" href="favicon.png">\n <link rel="stylesheet" type="text\/css" href="style.css">\n <\/head>\n <body>\n <div class="topnav">\n <h1>ESP GPIO Control <i class="fas fa-lightbulb"><\/i><\/h1>\n <\/div>\n <div id="authentication-bar" style="display: none;">\n <p><span id="authentication-status">User logged in<\/span>\n <span id="user-details">USEREMAIL<\/span>\n <a href="\/" id="logout-link">(logout)<\/a>\n <\/p>\n <\/div>\n <form id="login-form" style="display: none;">\n <div class="form-elements-container">\n <label for="input-email"><b>Email<\/b><\/label>\n <input type="text" placeholder="Enter Username" id="input-email" required>\n <label for="input-password"><b>Password<\/b><\/label>\n <input type="password" placeholder="Enter Password" id="input-password" required>\n <button type="submit" id="login-button">Login<\/button>\n <p id="error-message" style="color:red;"><\/p>\n <\/div>\n <\/form>\n <div class="content-sign-in" id="content-sign-in" style="display: none;">\n <div class="card-grid">\n <div class="card">\n <p class="card-title"><i class="fas fa-lightbulb"><\/i> GPIO 12<\/p>\n <p>\n <button class="button-on" id="btn1On">ON<\/button>\n <button class="button-off" id="btn1Off">OFF<\/button>\n <\/p>\n <p class="state">State:<span id="state1"><\/span><\/p>\n <\/div>\n <div class="card">\n <p class="card-title"><i class="fas fa-lightbulb"><\/i> GPIO 13<\/p>\n <p>\n <button class="button-on" id="btn2On">ON<\/button>\n <button class="button-off" id="btn2Off">OFF<\/button>\n <\/p>\n <p class="state">State:<span id="state2"><\/span><\/p>\n <\/div>\n <div class="card">\n <p class="card-title"><i class="fas fa-lightbulb"><\/i> GPIO 14<\/p>\n <p>\n <button class="button-on" id="btn3On">ON<\/button>\n <button class="button-off" id="btn3Off">OFF<\/button>\n <\/p>\n <p class="state">State:<span id="state3"><\/span><\/p>\n <\/div>\n <\/div>\n <\/div>\n <script type="module" src="scripts\/index.js"><\/script>\n <script type="module" src="scripts\/auth.js"><\/script>\n <\/body>\n<\/html>\n<\/code><\/pre>\n\tHow it Works<\/h4>\n\n\n\n
<title>ESP Firebase App<\/title><\/code><\/pre>\n\n\n\n<link rel=\"stylesheet\" href=\"https:\/\/use.fontawesome.com\/releases\/v5.7.2\/css\/all.css\" integrity=\"sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr\" crossorigin=\"anonymous\"><\/code><\/pre>\n\n\n\n
![\"Create](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/10\/Firebase-Project-VS-Code-CSS-File.png?resize=578%2C277&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n