{"id":106878,"date":"2025-04-22T08:48:00","date_gmt":"2025-04-22T08:48:00","guid":{"rendered":"https:\/\/randomnerdtutorials.com\/?p=106878"},"modified":"2025-04-22T16:14:22","modified_gmt":"2025-04-22T16:14:22","slug":"esp8266-nodemcu-firebase-web-app","status":"publish","type":"post","link":"https:\/\/randomnerdtutorials.com\/esp8266-nodemcu-firebase-web-app\/","title":{"rendered":"ESP8266 NodeMCU with Firebase &#8211; Creating a Web App"},"content":{"rendered":"\n<p>This guide will teach you how to create a simple Firebase Web App to control and monitor your ESP8266 NodeMCU board. The Web App you&#8217;ll create can be accessed worldwide to control and monitor your ESP8266 from anywhere in the world. This Web App makes the bridge between the Firebase Realtime Database and the ESP8266.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" fetchpriority=\"high\" decoding=\"async\" width=\"1200\" height=\"675\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/09\/ESP8266-Firebase-Web-App.jpg?resize=1200%2C675&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP8266 NodeMCU with Firebase Creating a Web App Arduino IDE\" class=\"wp-image-169277\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/09\/ESP8266-Firebase-Web-App.jpg?w=1920&amp;quality=100&amp;strip=all&amp;ssl=1 1920w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/09\/ESP8266-Firebase-Web-App.jpg?resize=300%2C169&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/09\/ESP8266-Firebase-Web-App.jpg?resize=1024%2C576&amp;quality=100&amp;strip=all&amp;ssl=1 1024w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/09\/ESP8266-Firebase-Web-App.jpg?resize=768%2C432&amp;quality=100&amp;strip=all&amp;ssl=1 768w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/09\/ESP8266-Firebase-Web-App.jpg?resize=1536%2C864&amp;quality=100&amp;strip=all&amp;ssl=1 1536w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/figure><\/div>\n\n\n<p class=\"rntbox rntclgray\"><em>Updated 22 April 2025<\/em><\/p>\n\n\n\n<p>Complete the following tutorial before proceeding:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/randomnerdtutorials.com\/esp8266-nodemcu-firebase-realtime-database\/\">ESP8266 NodeMCU: Getting Started with Firebase (Realtime Database)<\/a><\/li>\n<\/ul>\n\n\n\n<p>Here are the major steps to complete this tutorial.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><a href=\"https:\/\/randomnerdtutorials.com\/esp8266-nodemcu-firebase-realtime-database\/\">Creating Firebase Project<\/a>\u2014we recommend using the <a href=\"https:\/\/randomnerdtutorials.com\/esp8266-nodemcu-firebase-realtime-database\/\">Firebase project from this previous tutorial<\/a>.<\/li>\n\n\n\n<li><a href=\"#install-software\">Installing Required Software<\/a><\/li>\n\n\n\n<li><a href=\"#set-up-firebase-app-project\">Setting Up a Firebase Web App Project (VS Code)<\/a><\/li>\n\n\n\n<li><a href=\"#create-firebase-app\">Creating Firebase Web App<\/a><\/li>\n<\/ol>\n\n\n\n<p>We have a similar tutorial for the ESP32 board: <a href=\"https:\/\/randomnerdtutorials.com\/esp32-firebase-web-app\/\">ESP32 with Firebase &#8211; Creating a Web App<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"install-software\">Installing Required Software<\/h2>\n\n\n\n<p>To follow this project, you need to install the following software:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><a href=\"#install-vs-code\">Visual Studio Code<\/a><\/li>\n\n\n\n<li><a href=\"#install-nodejs\">Node.JS LTS version<\/a><\/li>\n\n\n\n<li><a href=\"#install-firebase-tools\">Install Firebase Tools<\/a><\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"install-vs-code\">Installing VS Code<\/h3>\n\n\n\n<p>Follow the next instructions to install VS Code on your Operating System:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A) <a href=\"#vs-code-windows\">Windows<\/a><\/li>\n\n\n\n<li>B) <a href=\"#vs-code-macosx\">MacOS X<\/a><\/li>\n\n\n\n<li>C) <a href=\"#vs-code-linux\">Linux<\/a><\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"vs-code-windows\">A) Installing VS Code on Windows (Visual Studio Code)<\/h4>\n\n\n\n<p>Go to <a href=\"https:\/\/code.visualstudio.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/code.visualstudio.com\/<\/a> and download the stable build for your operating system (Windows).<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"750\" height=\"569\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/09\/Download-VS-Code.jpg?resize=750%2C569&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Download VS Code for Windows\" class=\"wp-image-169218\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/09\/Download-VS-Code.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/09\/Download-VS-Code.jpg?resize=300%2C228&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure><\/div>\n\n\n<p>Click on the installation wizard to start the installation and follow all the steps to complete the installation. Accept the agreement and press the <strong>Next <\/strong>button.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"598\" height=\"464\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/09\/2-Install-VS-Code.png?resize=598%2C464&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Microsoft Visual Studio Code VS Code Installation wizard\" class=\"wp-image-99206\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/09\/2-Install-VS-Code.png?w=598&amp;quality=100&amp;strip=all&amp;ssl=1 598w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/09\/2-Install-VS-Code.png?resize=300%2C233&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 598px) 100vw, 598px\" \/><\/figure><\/div>\n\n\n<p>Select the following options and click <strong>Next<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"598\" height=\"464\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/09\/3-Install-VS-Code.png?resize=598%2C464&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Microsoft Visual Studio Code VS Code Installation wizard step 2\" class=\"wp-image-99207\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/09\/3-Install-VS-Code.png?w=598&amp;quality=100&amp;strip=all&amp;ssl=1 598w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/09\/3-Install-VS-Code.png?resize=300%2C233&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 598px) 100vw, 598px\" \/><\/figure><\/div>\n\n\n<p>Press the <strong>Install <\/strong>button.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"598\" height=\"464\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/09\/4-Install-VS-Code.png?resize=598%2C464&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Microsoft Visual Studio Code VS Code Installation wizard step 3\" class=\"wp-image-99208\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/09\/4-Install-VS-Code.png?w=598&amp;quality=100&amp;strip=all&amp;ssl=1 598w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/09\/4-Install-VS-Code.png?resize=300%2C233&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 598px) 100vw, 598px\" \/><\/figure><\/div>\n\n\n<p>Finally, click <strong>Finish <\/strong>to finish the installation.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"598\" height=\"464\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/09\/5-Install-VS-Code.png?resize=598%2C464&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Microsoft Visual Studio Code VS Code Installation wizard final step\" class=\"wp-image-99204\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/09\/5-Install-VS-Code.png?w=598&amp;quality=100&amp;strip=all&amp;ssl=1 598w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/09\/5-Install-VS-Code.png?resize=300%2C233&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 598px) 100vw, 598px\" \/><\/figure><\/div>\n\n\n<p>Open VS Code, and you\u2019ll be greeted by a Welcome tab with the released notes of the newest version.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"562\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2023\/06\/VS-Code-Welcome.png?resize=750%2C562&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"VS Code Welcome Screen\" class=\"wp-image-132276\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2023\/06\/VS-Code-Welcome.png?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2023\/06\/VS-Code-Welcome.png?resize=300%2C225&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure><\/div>\n\n\n<p>That\u2019s it. Visual Studio Code was successfully installed.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"vs-code-macosx\">B) Installing VS Code on Mac OS X (Visual Studio Code)<\/h4>\n\n\n\n<p>Go to <a href=\"https:\/\/code.visualstudio.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/code.visualstudio.com\/<\/a> and download the stable build for your operating system (Mac OS X).<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1167\" height=\"592\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/09\/3-Getting-Started-VS-Code-PlatformIO-IDE-ESP32-ESP8266-download-Mac-OS-X.png?resize=1167%2C592&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Microsoft Visual Studio Code VS Code Download Page for Mac OS X\" class=\"wp-image-99336\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/09\/3-Getting-Started-VS-Code-PlatformIO-IDE-ESP32-ESP8266-download-Mac-OS-X.png?w=1167&amp;quality=100&amp;strip=all&amp;ssl=1 1167w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/09\/3-Getting-Started-VS-Code-PlatformIO-IDE-ESP32-ESP8266-download-Mac-OS-X.png?resize=300%2C152&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/09\/3-Getting-Started-VS-Code-PlatformIO-IDE-ESP32-ESP8266-download-Mac-OS-X.png?resize=1024%2C519&amp;quality=100&amp;strip=all&amp;ssl=1 1024w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/09\/3-Getting-Started-VS-Code-PlatformIO-IDE-ESP32-ESP8266-download-Mac-OS-X.png?resize=768%2C390&amp;quality=100&amp;strip=all&amp;ssl=1 768w\" sizes=\"(max-width: 1167px) 100vw, 1167px\" \/><\/figure><\/div>\n\n\n<p>After downloading the Visual Studio Code application file, you&#8217;ll be prompted with the following message. Press the &#8220;<strong>Open<\/strong>&#8221; button.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"487\" height=\"158\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/09\/5-Getting-Started-VS-Code-PlatformIO-IDE-ESP32-ESP8266-save-file.png?resize=487%2C158&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Microsoft Visual Studio Code VS Code Downloading application file for Mac OS X\" class=\"wp-image-99338\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/09\/5-Getting-Started-VS-Code-PlatformIO-IDE-ESP32-ESP8266-save-file.png?w=487&amp;quality=100&amp;strip=all&amp;ssl=1 487w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/09\/5-Getting-Started-VS-Code-PlatformIO-IDE-ESP32-ESP8266-save-file.png?resize=300%2C97&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 487px) 100vw, 487px\" \/><\/figure><\/div>\n\n\n<p>Or open your Downloads folder and open Visual Studio Code.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"214\" height=\"140\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/09\/4-Getting-Started-VS-Code-PlatformIO-IDE-ESP32-ESP8266-file-downloaded-Mac-OS-X.png?resize=214%2C140&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Microsoft Visual Studio Code VS Code Downloading application file for Mac OS X\" class=\"wp-image-99337\"\/><\/figure><\/div>\n\n\n<p>After that, you\u2019ll be greeted by a Welcome tab with the released notes of the newest version.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"767\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/09\/6-Getting-Started-VS-Code-PlatformIO-IDE-ESP32-ESP8266-installed.png?resize=1024%2C767&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Microsoft Visual Studio Code VS Code Installation wizard welcome screen on Max OS X\" class=\"wp-image-99339\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/09\/6-Getting-Started-VS-Code-PlatformIO-IDE-ESP32-ESP8266-installed.png?w=1024&amp;quality=100&amp;strip=all&amp;ssl=1 1024w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/09\/6-Getting-Started-VS-Code-PlatformIO-IDE-ESP32-ESP8266-installed.png?resize=300%2C225&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/09\/6-Getting-Started-VS-Code-PlatformIO-IDE-ESP32-ESP8266-installed.png?resize=768%2C575&amp;quality=100&amp;strip=all&amp;ssl=1 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n<p>That\u2019s it. Visual Studio Code was successfully installed.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"vs-code-linux\">C) Installing VS Code on Linux Ubuntu (Visual Studio Code)<\/h4>\n\n\n\n<p>Go to <a href=\"https:\/\/code.visualstudio.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/code.visualstudio.com\/<\/a> and download the stable build for your operating system (Linux Ubuntu).<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"961\" height=\"438\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/09\/3-Getting-Started-VS-Code-PlatformIO-IDE-ESP32-ESP8266-downloading-VS-Code-Linux-Ubuntu.png?resize=961%2C438&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Microsoft Visual Studio Code VS Code Download Page for Linux Ubuntu\" class=\"wp-image-99324\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/09\/3-Getting-Started-VS-Code-PlatformIO-IDE-ESP32-ESP8266-downloading-VS-Code-Linux-Ubuntu.png?w=961&amp;quality=100&amp;strip=all&amp;ssl=1 961w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/09\/3-Getting-Started-VS-Code-PlatformIO-IDE-ESP32-ESP8266-downloading-VS-Code-Linux-Ubuntu.png?resize=300%2C137&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/09\/3-Getting-Started-VS-Code-PlatformIO-IDE-ESP32-ESP8266-downloading-VS-Code-Linux-Ubuntu.png?resize=768%2C350&amp;quality=100&amp;strip=all&amp;ssl=1 768w\" sizes=\"(max-width: 961px) 100vw, 961px\" \/><\/figure><\/div>\n\n\n<p>Save the installation file:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"495\" height=\"350\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/09\/4-Getting-Started-VS-Code-PlatformIO-IDE-ESP32-ESP8266-downloading-VS-Code-Linux-Ubuntu.png?resize=495%2C350&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Microsoft Visual Studio Code VS Code Save installation file for Linux Ubuntu\" class=\"wp-image-99325\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/09\/4-Getting-Started-VS-Code-PlatformIO-IDE-ESP32-ESP8266-downloading-VS-Code-Linux-Ubuntu.png?w=495&amp;quality=100&amp;strip=all&amp;ssl=1 495w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/09\/4-Getting-Started-VS-Code-PlatformIO-IDE-ESP32-ESP8266-downloading-VS-Code-Linux-Ubuntu.png?resize=300%2C212&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 495px) 100vw, 495px\" \/><\/figure><\/div>\n\n\n<p>To install it, open a Terminal window, navigate to your Downloads folder and run the following command to install VS Code.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$ cd Downloads\n~\/Downloads $ sudo apt install .\/code_1.49.1-1600299189_amd64.deb<\/code><\/pre>\n\n\n\n<p>When the installation is finished, VS Code should be available in your applications menu.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"516\" height=\"326\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/09\/5-Getting-Started-VS-Code-PlatformIO-IDE-ESP32-ESP8266-run-VS-Code-Linux-Ubuntu.png?resize=516%2C326&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Microsoft Visual Studio Code VS Code Open application Linux Ubuntu\" class=\"wp-image-99326\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/09\/5-Getting-Started-VS-Code-PlatformIO-IDE-ESP32-ESP8266-run-VS-Code-Linux-Ubuntu.png?w=516&amp;quality=100&amp;strip=all&amp;ssl=1 516w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/09\/5-Getting-Started-VS-Code-PlatformIO-IDE-ESP32-ESP8266-run-VS-Code-Linux-Ubuntu.png?resize=300%2C190&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 516px) 100vw, 516px\" \/><\/figure><\/div>\n\n\n<p>Open VS Code, and you\u2019ll be greeted by a Welcome tab with the released notes of the newest version.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"632\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/09\/6-Getting-Started-VS-Code-PlatformIO-IDE-ESP32-ESP8266-downloading-VS-Code-Linux-Ubuntu-Testing.png?resize=1024%2C632&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Microsoft Visual Studio Code VS Code Installation wizard welcome screen on Linux Ubuntu\" class=\"wp-image-99327\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/09\/6-Getting-Started-VS-Code-PlatformIO-IDE-ESP32-ESP8266-downloading-VS-Code-Linux-Ubuntu-Testing.png?w=1024&amp;quality=100&amp;strip=all&amp;ssl=1 1024w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/09\/6-Getting-Started-VS-Code-PlatformIO-IDE-ESP32-ESP8266-downloading-VS-Code-Linux-Ubuntu-Testing.png?resize=300%2C185&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/09\/6-Getting-Started-VS-Code-PlatformIO-IDE-ESP32-ESP8266-downloading-VS-Code-Linux-Ubuntu-Testing.png?resize=768%2C474&amp;quality=100&amp;strip=all&amp;ssl=1 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n<p>That\u2019s it. Visual Studio Code was successfully installed.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"install-nodejs\">Installing Node.js<\/h2>\n\n\n\n<p><strong>1)<\/strong> Go to <a href=\"https:\/\/nodejs.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">nodejs.org<\/a> and download the LTS version.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"487\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/09\/download-nodejs.jpg?resize=750%2C487&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Download Node.js LTS version\" class=\"wp-image-169221\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/09\/download-nodejs.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/09\/download-nodejs.jpg?resize=300%2C195&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure><\/div>\n\n\n<p><strong>2)<\/strong> Run the executable file and follow the installation process.<\/p>\n\n\n\n<p><strong>3)<\/strong> Enable automatically installing all the necessary tools.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"495\" height=\"387\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/08\/5-Install-NodeJS-Install-Necessary-Tools.png?resize=495%2C387&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Download and Install Node.js LTS version\" class=\"wp-image-106175\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/08\/5-Install-NodeJS-Install-Necessary-Tools.png?w=495&amp;quality=100&amp;strip=all&amp;ssl=1 495w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/08\/5-Install-NodeJS-Install-Necessary-Tools.png?resize=300%2C235&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 495px) 100vw, 495px\" \/><\/figure><\/div>\n\n\n<p><strong>4)<\/strong> When it&#8217;s done, click <strong>Finish<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"495\" height=\"387\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/08\/7-Install-NodeJS-Finish-Installation.png?resize=495%2C387&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Install NodeJS Finish Installation\" class=\"wp-image-106177\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/08\/7-Install-NodeJS-Finish-Installation.png?w=495&amp;quality=100&amp;strip=all&amp;ssl=1 495w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/08\/7-Install-NodeJS-Finish-Installation.png?resize=300%2C235&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 495px) 100vw, 495px\" \/><\/figure><\/div>\n\n\n<p><strong>5)<\/strong> A Terminal window will open to install the Additional Tools for Node.js. When it&#8217;s done, click any key to continue. When it&#8217;s finished, you can close the Terminal Window.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"456\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/09\/node-js-install-additional-tools.jpg?resize=750%2C456&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Install NodeJS Install Necessary Tools Terminal Window.\" class=\"wp-image-169222\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/09\/node-js-install-additional-tools.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/09\/node-js-install-additional-tools.jpg?resize=300%2C182&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"install-firebase-tools\">Installing Firebase Tools (VS Code)<\/h2>\n\n\n\n<p><strong>1)<\/strong> Open VS Code. Close all opened projects, if any.<\/p>\n\n\n\n<p><strong>2)<\/strong> Open a new Terminal window. Go to <strong>Terminal <\/strong>&gt; <strong>New Terminal<\/strong>.<\/p>\n\n\n\n<p><strong>3)<\/strong> Run the following command to change to the <strong>C:\\<\/strong> path (you can install it in any other path):<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>cd \\<\/code><\/pre>\n\n\n\n<p>Before installing Firebase tools, run the following command to install the latest npm package:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install -g npm@latest<\/code><\/pre>\n\n\n\n<p><strong>4)<\/strong> Run the following command to install firebase tools globally:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><strong>npm <\/strong>-g install firebase-tools<\/code><\/pre>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"657\" height=\"110\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/08\/Installl-firebase-tools-1.png?resize=657%2C110&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Install Firebase Tools Globally\" class=\"wp-image-106186\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/08\/Installl-firebase-tools-1.png?w=657&amp;quality=100&amp;strip=all&amp;ssl=1 657w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/08\/Installl-firebase-tools-1.png?resize=300%2C50&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 657px) 100vw, 657px\" \/><\/figure><\/div>\n\n\n<p><strong>5)<\/strong> Firebase tools will be installed (you can ignore any warning about deprecated libraries).<\/p>\n\n\n\n<p><strong>6)<\/strong> Test if Firebase was successfully installed with the following command:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><strong>firebase <\/strong>--version<\/code><\/pre>\n\n\n\n<p>It should return the Firebase version currently installed.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"699\" height=\"204\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/09\/get-firebase-version-vs-code.jpg?resize=699%2C204&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Get Firebase Version VS Code\" class=\"wp-image-169223\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/09\/get-firebase-version-vs-code.jpg?w=699&amp;quality=100&amp;strip=all&amp;ssl=1 699w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/09\/get-firebase-version-vs-code.jpg?resize=300%2C88&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 699px) 100vw, 699px\" \/><\/figure><\/div>\n\n\n<hr class=\"wp-block-separator has-css-opacity is-style-wide\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"set-up-firebase-app-project\">Setting Up a Firebase Web App Project (VS Code)<\/h2>\n\n\n\n<p>Before creating the Firebase Web App, you need to set up a Firebase Project on VS Code. These are the steps:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><a href=\"#create-project-folder\">Creating a Project Folder<\/a><\/li>\n\n\n\n<li><a href=\"#firebase-login\">Firebase Login<\/a><\/li>\n\n\n\n<li><a href=\"#init-project\">Initializing Web App Firebase Project<\/a><\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"create-project-folder\">1) Creating a Project Folder<\/h3>\n\n\n\n<p id=\"create-project-folder\"><strong>1)<\/strong> Create a folder on your computer where you want to save your Firebase project\u2014for example, <span class=\"rnthl rntliteral\"><em>Firebase-Project<\/em><\/span>.<\/p>\n\n\n\n<p><strong>2)<\/strong> Open VS Code. Go to <strong>File<\/strong> &gt; <strong>Open Folder&#8230;<\/strong> and select the folder you&#8217;ve just created.<\/p>\n\n\n\n<p><strong>3)<\/strong> Go to <strong>Terminal <\/strong>&gt; <strong>New Terminal<\/strong>. A new Terminal window should open on your project path.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"746\" height=\"163\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/08\/Terminal-Window-Firebase-Folder-Project.png?resize=746%2C163&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Install Firebase Tools 2\" class=\"wp-image-106193\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/08\/Terminal-Window-Firebase-Folder-Project.png?w=746&amp;quality=100&amp;strip=all&amp;ssl=1 746w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/08\/Terminal-Window-Firebase-Folder-Project.png?resize=300%2C66&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 746px) 100vw, 746px\" \/><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"firebase-login\">2) Firebase Login<\/h3>\n\n\n\n<p><strong>4)<\/strong> On the previous Terminal window, type the following:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><strong>firebase <\/strong>login<\/code><\/pre>\n\n\n\n<p><strong>5)<\/strong> You&#8217;ll be asked to collect CLI usage and error reporting information. Enter &#8220;<strong>n<\/strong>&#8221; and press <strong>Enter<\/strong> to deny.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"397\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/08\/Terminal-Window-Login-Firebase-VS-Code.png?resize=750%2C397&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Login Firebase VS Code Terminal Window\" class=\"wp-image-106194\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/08\/Terminal-Window-Login-Firebase-VS-Code.png?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/08\/Terminal-Window-Login-Firebase-VS-Code.png?resize=300%2C159&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure><\/div>\n\n\n<p><strong>6)<\/strong> After this, it will pop up a new window on your browser to login into your firebase account.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"648\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/08\/Login-Firebase-Account.png?resize=750%2C648&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Login Firebase Account\" class=\"wp-image-106195\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/08\/Login-Firebase-Account.png?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/08\/Login-Firebase-Account.png?resize=300%2C259&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure><\/div>\n\n\n<p><strong>7)<\/strong> Allow Firebase CLI to access your Google account.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"875\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/08\/Login-Firebase-Account-2.png?resize=750%2C875&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Login Firebase Account allow Firebase CLI\" class=\"wp-image-106196\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/08\/Login-Firebase-Account-2.png?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/08\/Login-Firebase-Account-2.png?resize=257%2C300&amp;quality=100&amp;strip=all&amp;ssl=1 257w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure><\/div>\n\n\n<p><strong>8)<\/strong> After this, Firebase CLI login should be successful. You can close the browser window.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"689\" height=\"454\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/08\/Firebase-CLI-Login-Successful.png?resize=689%2C454&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Login Firebase Account allow Firebase CLI Login Successful\" class=\"wp-image-106197\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/08\/Firebase-CLI-Login-Successful.png?w=689&amp;quality=100&amp;strip=all&amp;ssl=1 689w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/08\/Firebase-CLI-Login-Successful.png?resize=300%2C198&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 689px) 100vw, 689px\" \/><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"init-project\">3) Initializing Web App Firebase Project<\/h3>\n\n\n\n<p><strong>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<pre class=\"wp-block-code\"><code><strong>firebase <\/strong>init<\/code><\/pre>\n\n\n\n<p><strong>10)<\/strong> You&#8217;ll be asked if you want to initialize a Firebase project in the current directory. Enter <strong>Y<\/strong> and hit <strong>Enter<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"684\" height=\"187\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/08\/Firebase-Start-Project-VS-Code.png?resize=684%2C187&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Login Firebase Account allow Firebase CLI firebase init\" class=\"wp-image-106199\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/08\/Firebase-Start-Project-VS-Code.png?w=684&amp;quality=100&amp;strip=all&amp;ssl=1 684w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/08\/Firebase-Start-Project-VS-Code.png?resize=300%2C82&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 684px) 100vw, 684px\" \/><\/figure><\/div>\n\n\n<p><strong>1)<\/strong> Then, use they up and down arrows and the Space key to select the options. Select the following options:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>RealTime Database: Configure security rules file for Realtime Database and (optionally) provision default instance.  <\/li>\n\n\n\n<li>Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys<\/li>\n<\/ul>\n\n\n\n<p>The selected options will show up with a green asterisk. Then, hit <strong>Enter<\/strong>. <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"186\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/08\/realtime-database-hosting-options.png?resize=750%2C186&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Login Firebase Account allow Firebase CLI configure directory\" class=\"wp-image-106239\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/08\/realtime-database-hosting-options.png?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/08\/realtime-database-hosting-options.png?resize=300%2C74&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure><\/div>\n\n\n<p><strong>12)<\/strong> Select the option &#8220;Use an existing project&#8221;\u2014it should be highlighted in blue\u2014then, hit Enter.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"658\" height=\"228\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/08\/Firebase-Project-Setup-VS-Code.png?resize=658%2C228&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Firebase Project Setup VS Code\" class=\"wp-image-106201\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/08\/Firebase-Project-Setup-VS-Code.png?w=658&amp;quality=100&amp;strip=all&amp;ssl=1 658w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/08\/Firebase-Project-Setup-VS-Code.png?resize=300%2C104&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 658px) 100vw, 658px\" \/><\/figure><\/div>\n\n\n<p><strong>13)<\/strong> After that, select the Firebase project for this directory\u2014it should be the <a href=\"https:\/\/randomnerdtutorials.com\/esp32-firebase-realtime-database\/\">project created in this previous tutorial<\/a>. In my case, it is called <span class=\"rnthl rntliteral\">ESP-Project<\/span>. Then hit Enter.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"303\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/09\/select-firebase-project-cli-vs-code.jpg?resize=750%2C303&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Add Firebase Project to Directory VS Code\" class=\"wp-image-169225\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/09\/select-firebase-project-cli-vs-code.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/09\/select-firebase-project-cli-vs-code.jpg?resize=300%2C121&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure><\/div>\n\n\n<p><strong>14)<\/strong> Then, select the hosting options as shown below:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>What do you want to use as your public directory? Hit <strong>Enter <\/strong>to select <strong>public<\/strong>.<\/li>\n\n\n\n<li>Configure as a single-page app (rewrite urls to \/index.html)? <strong>No<\/strong><\/li>\n\n\n\n<li>Set up automatic builds and deploys with GitHub? <strong>No<\/strong><\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"657\" height=\"277\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/08\/firebase-hosting-setup-all-options.png?resize=657%2C277&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Firebase initialization complete\" class=\"wp-image-106240\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/08\/firebase-hosting-setup-all-options.png?w=657&amp;quality=100&amp;strip=all&amp;ssl=1 657w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/08\/firebase-hosting-setup-all-options.png?resize=300%2C126&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 657px) 100vw, 657px\" \/><\/figure><\/div>\n\n\n<p><strong>15)<\/strong> Press <strong>Enter <\/strong>on the following question to select the default database security rules file: &#8220;<strong>What file should be used for Realtime Database Security Rules?<\/strong>&#8220;<\/p>\n\n\n\n<p><strong>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<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"337\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/09\/firebase-project-initialized-in-VS-Code.png?resize=750%2C337&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Firebase Project Files Created successfully\" class=\"wp-image-169226\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/09\/firebase-project-initialized-in-VS-Code.png?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/09\/firebase-project-initialized-in-VS-Code.png?resize=300%2C135&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure><\/div>\n\n\n<p>The <span class=\"rnthl rntliteral\">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&#8217;ll do that later in this tutorial.<\/p>\n\n\n\n<p><strong>17)<\/strong> To check if everything went as expected, run the following command on the VS Code Terminal window.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><strong>firebase <\/strong>deploy<\/code><\/pre>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"658\" height=\"310\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/09\/Firebase-deploy-hosting-URL.jpg?resize=658%2C310&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Firebase Project Files Deploy Completed\" class=\"wp-image-169253\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/09\/Firebase-deploy-hosting-URL.jpg?w=658&amp;quality=100&amp;strip=all&amp;ssl=1 658w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/09\/Firebase-deploy-hosting-URL.jpg?resize=300%2C141&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 658px) 100vw, 658px\" \/><\/figure><\/div>\n\n\n<p>After deploying, you should get your Hosting URL. Go to that URL. You should get access to a similar web page.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"507\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/09\/Firebase-Hosting-Setup-Complete.jpg?resize=750%2C507&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Firebase Hosting Setup Complete\" class=\"wp-image-169254\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/09\/Firebase-Hosting-Setup-Complete.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/09\/Firebase-Hosting-Setup-Complete.jpg?resize=300%2C203&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure><\/div>\n\n\n<p>This web page is built using the files placed in the <span class=\"rnthl rntliteral\">public<\/span> folder of your Firebase project.<\/p>\n\n\n\n<p>You can access that web page from anywhere in the world. Now, the idea is to change the files in the <span class=\"rnthl rntliteral\">public<\/span> folder to show your own web page instead of that one.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"create-firebase-app\">4) Add Firebase To Your App<\/h3>\n\n\n\n<p>Leave VS Code open. Meanwhile, you need to go to your Firebase account to add Firebase to your app.<\/p>\n\n\n\n<p><strong>18)<\/strong> Go to your Firebase console and select your project. Then, click on the <strong>+Add app<\/strong> button and then, select the web app icon.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"734\" height=\"134\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/09\/add-web-app-firebase.jpg?resize=734%2C134&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Add App to Firebase Project\" class=\"wp-image-169251\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/09\/add-web-app-firebase.jpg?w=734&amp;quality=100&amp;strip=all&amp;ssl=1 734w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/09\/add-web-app-firebase.jpg?resize=300%2C55&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 734px) 100vw, 734px\" \/><\/figure><\/div>\n\n\n<p><strong>19)<\/strong> Give your app a name. I simply called it <span class=\"rnthl rntliteral\"><em>test<\/em><\/span>. Then, check the box next to <strong>Also set up Firebase Hosting for this App<\/strong>. Click Register app.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"567\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/08\/add-firebase-to-your-app.png?resize=750%2C567&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Add Firebase Project to Your App\" class=\"wp-image-106298\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/08\/add-firebase-to-your-app.png?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/08\/add-firebase-to-your-app.png?resize=300%2C227&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure><\/div>\n\n\n<p><strong>20)<\/strong> Then, copy the <span class=\"rnthl rntliteral\">firebaseConfig<\/span> object because you&#8217;ll need it later.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"747\" height=\"686\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/09\/Firebase-Set-Up-App-Config-Object.jpg?resize=747%2C686&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Set Up Firebase Web App Configuration Object\" class=\"wp-image-169256\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/09\/Firebase-Set-Up-App-Config-Object.jpg?w=747&amp;quality=100&amp;strip=all&amp;ssl=1 747w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/09\/Firebase-Set-Up-App-Config-Object.jpg?resize=300%2C276&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 747px) 100vw, 747px\" \/><\/figure><\/div>\n\n\n<p>Click <strong>Next <\/strong>on the proceeding steps.<\/p>\n\n\n\n<p>After this, you can also access the <span class=\"rnthl rntliteral\">firebaseConfig<\/span> object if you go to your Project settings in your Firebase console.<\/p>\n\n\n\n<p><strong>21)<\/strong> Copy the authDomain. In my case, it is (the same we got in the Terminal window after setting up the Firebase project):<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>https:&#47;&#47;esp-project-a9add.web.app<\/code><\/pre>\n\n\n\n<p>This is the URL that allows you to access your web app.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity is-style-wide\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Creating Firebase Web App<\/h2>\n\n\n\n<p>Now that you&#8217;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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">index.html<\/h3>\n\n\n\n<p>Copy the following to your <span class=\"rnthl rntliteral\">index.html<\/span> file. This HTML file creates a simple web page that displays the readings saved on the <a href=\"https:\/\/randomnerdtutorials.com\/esp8266-nodemcu-firebase-realtime-database\/\">Realtime Database created in this previous project<\/a>.<\/p>\n\n\n<pre style=\"max-height: 40em; margin-bottom: 20px;\"><code class=\"language-html\">&lt;!-- Complete Project Details\n     ESP32: https:\/\/RandomNerdTutorials.com\/esp32-firebase-web-app\/\n     ESP8266: https:\/\/RandomNerdTutorials.com\/esp8266-nodemcu-firebase-web-app\/   --&gt;\n\n&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;en&quot;&gt;\n&lt;head&gt;\n    &lt;meta charset=&quot;UTF-8&quot;&gt;\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;\n    &lt;title&gt;ESP Firebase App&lt;\/title&gt;\n    &lt;!-- Load your app.js script --&gt;\n    &lt;script src=&quot;app.js&quot; type=&quot;module&quot;&gt;&lt;\/script&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;h1&gt;ESP Firebase Web App Example&lt;\/h1&gt;\n    &lt;p&gt;Reading int: &lt;span id=&quot;reading-int&quot;&gt;&lt;\/span&gt;&lt;\/p&gt;\n    &lt;p&gt;Reading float: &lt;span id=&quot;reading-float&quot;&gt;&lt;\/span&gt;&lt;\/p&gt;\n    &lt;p&gt;Reading string: &lt;span id=&quot;reading-string&quot;&gt;&lt;\/span&gt;&lt;\/p&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\t<p style=\"text-align:center\"><a class=\"rntwhite\" href=\"https:\/\/github.com\/RuiSantosdotme\/Firebase-ESP\/raw\/main\/ESP-Firebase-App-Readings\/index.html\" target=\"_blank\">View raw code<\/a><\/p>\n\n\n\n<p>Let&#8217;s take a quick look at the HTML file.<\/p>\n\n\n\n<p>In the <span class=\"rnthl rntliteral\"><span style=\"color: #333399;\">&lt;head&gt;<\/span><\/span> of the HTML file, we must add all the required metadata.<\/p>\n\n\n\n<pre class=\"wp-block-code language-html\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n    &lt;meta charset=\"UTF-8\"&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n    &lt;title&gt;ESP Firebase App&lt;\/title&gt;\n\n    &lt;!-- Load your app.js script (place at the bottom) --&gt;\n    &lt;script src=\"app.js\" type=\"module\"&gt;&lt;\/script&gt;\n&lt;\/head&gt;<\/code><\/pre>\n\n\n\n<p>The title of the web page is <strong>ESP Firebase App<\/strong>, but you can change it in the following line.<\/p>\n\n\n\n<pre class=\"wp-block-code language-html\"><code>&lt;title&gt;ESP Firebase App&lt;\/title&gt;<\/code><\/pre>\n\n\n\n<p>We&#8217;ll take care of interacting with the Realtime Database on a JavaScript file called <span class=\"rnthl rntliteral\">app.js<\/span> (that we&#8217;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.<\/p>\n\n\n\n<pre class=\"wp-block-code language-html\"><code>&lt;script src=\"app.js\" type=\"module\"&gt;&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>Now, let&#8217;s go to the HTML parts that are visible to the user\u2014go between the <span class=\"rnthl rntliteral\"><span style=\"color: #333399;\">&lt;body&gt;<\/span><\/span> and <span class=\"rnthl rntliteral\"><span style=\"color: #333399;\">&lt;\/body&gt;<\/span><\/span> tags.<\/p>\n\n\n\n<p>We create a heading with the following text: <span class=\"rnthl rntliteral\">ESP Firebase Web App Example<\/span>, but you can change it to whatever you want.<\/p>\n\n\n\n<pre class=\"wp-block-code language-html\"><code>&lt;h1>ESP Firebase Web App Example&lt;\/h1><\/code><\/pre>\n\n\n\n<p>Then, we add three paragraphs to display the int, float, and String values saved in the database. We create <span class=\"rnthl rntliteral\"><span style=\"color: #333399;\">&lt;span&gt;<\/span><\/span> tags with specific ids, so that we can refer to those HTML elements using JavaScript and insert the database values.<\/p>\n\n\n\n<pre class=\"wp-block-code language-html\"><code>&lt;p&gt;Reading int: &lt;span id=\"reading-int\"&gt;&lt;\/span&gt;&lt;\/p&gt;\n&lt;p&gt;Reading float: &lt;span id=\"reading-float\"&gt;&lt;\/span&gt;&lt;\/p&gt;\n&lt;p&gt;Reading string: &lt;span id=\"reading-string\"&gt;&lt;\/span&gt;&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<p>After making the necessary changes, you can save the HTML file.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">app.js<\/h3>\n\n\n\n<p>Inside the <span class=\"rnthl rntliteral\">public<\/span> folder, create a file called <span class=\"rnthl rntliteral\">app.js<\/span>. You can do this on VS Code by selecting the <span class=\"rnthl rntliteral\">public<\/span> folder and then clicking on the <strong>+file<\/strong> icon. This JavaScript file is responsible for interacting with the Realtime Database and updating the values on the web page whenever there&#8217;s a change in the database.<\/p>\n\n\n\n<p>Copy the following to your <span class=\"rnthl rntliteral\">app.js<\/span> file and save it.<\/p>\n\n\n<pre style=\"max-height: 40em; margin-bottom: 20px;\"><code class=\"language-javascript\">\/\/ Complete Project Details\r\n\/\/ ESP32: https:\/\/RandomNerdTutorials.com\/esp32-firebase-web-app\/\r\n\/\/ ESP8266: https:\/\/RandomNerdTutorials.com\/esp8266-nodemcu-firebase-web-app\/\r\n\r\nimport { initializeApp } from &quot;https:\/\/www.gstatic.com\/firebasejs\/11.6.0\/firebase-app.js&quot;;\r\nimport { getDatabase, ref, onValue } from &quot;https:\/\/www.gstatic.com\/firebasejs\/11.6.0\/firebase-database.js&quot;;\r\n\r\n\/\/ Firebase configuration\r\nconst firebaseConfig = {\r\n    apiKey: &quot;REPLACE_WITH_YOUR_Firebase_CONFIGURATION&quot;,\r\n    authDomain: &quot;REPLACE_WITH_YOUR_Firebase_CONFIGURATION&quot;,\r\n    databaseURL: &quot;REPLACE_WITH_YOUR_Firebase_CONFIGURATION&quot;,\r\n    projectId: &quot;REPLACE_WITH_YOUR_Firebase_CONFIGURATION&quot;,\r\n    storageBucket: &quot;REPLACE_WITH_YOUR_Firebase_CONFIGURATION&quot;,\r\n    messagingSenderId: &quot;REPLACE_WITH_YOUR_Firebase_CONFIGURATION&quot;,\r\n    appId: &quot;REPLACE_WITH_YOUR_Firebase_CONFIGURATION&quot;\r\n};\r\n\r\n\/\/ Initialize Firebase\r\nconst app = initializeApp(firebaseConfig);\r\n\r\n\/\/ Get a reference to the database\r\nconst database = getDatabase(app);\r\n\r\n\/\/ Database Paths\r\nconst dataFloatPath = 'test\/float';\r\nconst dataIntPath = 'test\/int';\r\nconst dataStringPath = 'test\/string';\r\n\r\n\/\/ Get database references\r\nconst databaseFloatRef = ref(database, dataFloatPath);\r\nconst databaseIntRef = ref(database, dataIntPath);\r\nconst databaseStringRef = ref(database, dataStringPath);\r\n\r\n\/\/ Variables to save database current values\r\nlet floatReading;\r\nlet intReading;\r\nlet stringReading;\r\n\r\n\/\/ Attach listeners\r\nonValue(databaseFloatRef, (snapshot) =&gt; {\r\n    floatReading = snapshot.val();\r\n    console.log(&quot;Float reading: &quot; + floatReading);\r\n    document.getElementById(&quot;reading-float&quot;).innerHTML = floatReading;\r\n});\r\n\r\nonValue(databaseIntRef, (snapshot) =&gt; {\r\n    intReading = snapshot.val();\r\n    console.log(&quot;Int reading: &quot; + intReading);\r\n    document.getElementById(&quot;reading-int&quot;).innerHTML = intReading;\r\n});\r\n\r\nonValue(databaseStringRef, (snapshot) =&gt; {\r\n    stringReading = snapshot.val();\r\n    console.log(&quot;String reading: &quot; + stringReading);\r\n    document.getElementById(&quot;reading-string&quot;).innerHTML = stringReading;\r\n});\r\n<\/code><\/pre>\n\t<p style=\"text-align:center\"><a class=\"rntwhite\" href=\"https:\/\/github.com\/RuiSantosdotme\/Firebase-ESP\/raw\/main\/ESP-Firebase-App-Readings\/app.js\" target=\"_blank\">View raw code<\/a><\/p>\n\n\n\n<p>Let&#8217;s take a quick look to see how it works.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Importing Firebase Libraries<\/h4>\n\n\n\n<p>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&#8217;t need to install Firebase locally.<\/p>\n\n\n\n<pre class=\"wp-block-code language-javascript\"><code>import { initializeApp } from \"https:\/\/www.gstatic.com\/firebasejs\/11.6.0\/firebase-app.js\";\nimport { getDatabase, ref, onValue } from \"https:\/\/www.gstatic.com\/firebasejs\/11.6.0\/firebase-database.js\";<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Firebase Configuration<\/h4>\n\n\n\n<p>Add your <span class=\"rnthl rntliteral\">firebaseConfig<\/span> 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).<\/p>\n\n\n\n<pre class=\"wp-block-code language-javascript\"><code>const firebaseConfig = {\n    apiKey: \"REPLACE_WITH_YOUR_Firebase_CONFIGURATION\",\n    authDomain: \"REPLACE_WITH_YOUR_Firebase_CONFIGURATION\",\n    databaseURL: \"REPLACE_WITH_YOUR_Firebase_CONFIGURATION\",\n    projectId: \"REPLACE_WITH_YOUR_Firebase_CONFIGURATION\",\n    storageBucket: \"REPLACE_WITH_YOUR_Firebase_CONFIGURATION\",\n    messagingSenderId: \"REPLACE_WITH_YOUR_Firebase_CONFIGURATION\",\n    appId: \"REPLACE_WITH_YOUR_Firebase_CONFIGURATION\"\n};<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Initialize Firebase<\/h4>\n\n\n\n<p>The following line initializes a Firebase app using the configuration object defined earlier. It returns an <span class=\"rnthl rntliteral\">app<\/span> object that you can use to interact with the application.<\/p>\n\n\n\n<pre class=\"wp-block-code language-javascript\"><code>const app = initializeApp(firebaseConfig);<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Reference to the Database, Database Paths, and Other Variables<\/h4>\n\n\n\n<p>The following command creates a reference to the Database associated with the <span class=\"rnthl rntliteral\">app<\/span> we initialized.<\/p>\n\n\n\n<pre class=\"wp-block-code language-javascript\"><code>const database = getDatabase(app);<\/code><\/pre>\n\n\n\n<p>We define the database paths where the data we want to read is stored.<\/p>\n\n\n\n<pre class=\"wp-block-code language-javascript\"><code>const dataFloatPath = 'test\/float';\nconst dataIntPath = 'test\/int';\nconst dataStringPath = 'test\/string';<\/code><\/pre>\n\n\n\n<p>Then, we create references to specific locations on the database using those paths.<\/p>\n\n\n\n<pre class=\"wp-block-code language-javascript\"><code>const databaseFloatRef = ref(database, dataFloatPath);\nconst databaseIntRef = ref(database, dataIntPath);\nconst databaseStringRef = ref(database, dataStringPath);<\/code><\/pre>\n\n\n\n<p>We create variables to store the current values read from the database.<\/p>\n\n\n\n<pre class=\"wp-block-code language-javascript\"><code>let floatReading;\nlet intReading;\nlet stringReading;<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Get Values from the Database (Listeners)<\/h4>\n\n\n\n<p>Finally, to get values from the database, we can attach listeners to each of those database references. Then, anytime there&#8217;s a change in the database, we&#8217;ll update the HTML page with the corresponding values.<\/p>\n\n\n\n<p>Let&#8217;s see how to do that. For example, we can use the <span class=\"rnthl rntliteral\">onValue()<\/span> function that accepts as arguments a reference to the database, and a callback function:<\/p>\n\n\n\n<pre class=\"wp-block-code language-javascript\"><code>onValue(databaseFloatRef, (snapshot) =&gt; {\n    floatReading = snapshot.val();\n    console.log(\"Float reading: \" + floatReading);\n    document.getElementById(\"reading-float\").innerHTML = floatReading;\n});<\/code><\/pre>\n\n\n\n<p>In this case, the <span class=\"rnthl rntliteral\">onValue()<\/span> function attaches a listener to the <span class=\"rnthl rntliteral\">databaseFloatRef<\/span> (<span class=\"rnthl rntliteral\">\/test\/float<\/span>). Whenever the value at that path changes in the database, the callback function runs. In this case, we&#8217;re defining the callback function inside the <span class=\"rnthl rntliteral\">onValue()<\/span>. It is defined as an arrow function.<\/p>\n\n\n\n<p>The <span class=\"rnthl rntliteral\">(snapshot)<\/span> is the parameter of the callback function. When Firebase calls the callback, it passes a snapshot object containing the current data at <span class=\"rnthl rntliteral\">test\/float<\/span>. Then, the <span class=\"rnthl rntliteral\">=&gt;<\/span> arrow syntax indicates this is an arrow function, a concise way to define functions in JavaScript. The function body is defined between <span class=\"rnthl rntliteral\">{<\/span> <span class=\"rnthl rntliteral\">}<\/span>.<\/p>\n\n\n\n<p>Let&#8217;s go back to the callback function: <span class=\"rnthl rntliteral\">snapshot.val()<\/span> gets the current value at the path. The value is stored in the <span class=\"rnthl rntliteral\">floatReading<\/span> variable.<\/p>\n\n\n\n<pre class=\"wp-block-code language-javascript\"><code>floatReading = snapshot.val();<\/code><\/pre>\n\n\n\n<p>It\u2019s logged to the console for debugging purposes.<\/p>\n\n\n\n<pre class=\"wp-block-code language-javascript\"><code>console.log(\"Float reading: \" + floatReading);<\/code><\/pre>\n\n\n\n<p>The webpage element with <span class=\"rnthl rntliteral\">id=&#8221;reading-float&#8221;<\/span> (defined in the <span class=\"rnthl rntliteral\">index.html<\/span> file) is updated to display the value.<\/p>\n\n\n\n<pre class=\"wp-block-code language-javascript\"><code>document.getElementById(\"reading-float\").innerHTML = floatReading;<\/code><\/pre>\n\n\n\n<p>We proceed in a similar way for the other database paths.<\/p>\n\n\n\n<pre class=\"wp-block-code language-javascript\"><code>onValue(databaseIntRef, (snapshot) =&gt; {<br>    intReading = snapshot.val();<br>    console.log(\"Int reading: \" + intReading);<br>    document.getElementById(\"reading-int\").innerHTML = intReading;<br>});<br><br>onValue(databaseStringRef, (snapshot) =&gt; {<br>    stringReading = snapshot.val();<br>    console.log(\"String reading: \" + stringReading);<br>    document.getElementById(\"reading-string\").innerHTML = stringReading;<br>});<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Deploy your App<\/h3>\n\n\n\n<p>After saving the HTML and JavaScript files, deploy your app on VS Code by running the following command.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><strong>firebase<\/strong> deploy<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">ESP8266 Arduino Sketch<\/h3>\n\n\n\n<p>Upload the following code to your ESP8266. This is the same code used in <a href=\"https:\/\/randomnerdtutorials.com\/esp8266-nodemcu-firebase-realtime-database\/\">this previous project<\/a> to write to the database. This code simply writes to the database every 10 seconds.<\/p>\n\n\n\n<p>Don&#8217;t forget to insert your network credentials, database URL, and Firebase Project API Key.<\/p>\n\n\n<pre style=\"max-height: 40em; margin-bottom: 20px;\"><code class=\"language-c\">\/*********\n  Rui Santos &amp; Sara Santos - Random Nerd Tutorials\n  Complete instructions at https:\/\/RandomNerdTutorials.com\/esp8266-nodemcu-firebase-realtime-database\/\n*********\/\n\n#include &lt;Arduino.h&gt;\n#include &lt;ESP8266WiFi.h&gt;\n#include &lt;WiFiClientSecure.h&gt;\n#include &lt;FirebaseClient.h&gt;\n\n\/\/ Network and Firebase credentials\n#define WIFI_SSID &quot;REPLACE_WITH_YOUR_SSID&quot;\n#define WIFI_PASSWORD &quot;REPLACE_WITH_YOUR_PASSWORD&quot;\n\n#define Web_API_KEY &quot;REPLACE_WITH_YOUR_FIREBASE_PROJECT_API_KEY&quot;\n#define DATABASE_URL &quot;REPLACE_WITH_YOUR_FIREBASE_DATABASE_URL&quot;\n#define USER_EMAIL &quot;REPLACE_WITH_FIREBASE_PROJECT_EMAIL_USER&quot;\n#define USER_PASS &quot;REPLACE_WITH_FIREBASE_PROJECT_USER_PASS&quot;\n\n\/\/ User function\nvoid processData(AsyncResult &amp;aResult);\n\n\/\/ Authentication\nUserAuth user_auth(Web_API_KEY, USER_EMAIL, USER_PASS);\n\n\/\/ Firebase components\nFirebaseApp app;\nWiFiClientSecure ssl_client;\nusing AsyncClient = AsyncClientClass;\nAsyncClient aClient(ssl_client);\nRealtimeDatabase Database;\n\n\/\/ Timer variables for sending data every 10 seconds\nunsigned long lastSendTime = 0;\nconst unsigned long sendInterval = 10000; \/\/ 10 seconds in milliseconds\n\n\/\/ Variables to send to the Database\nint intValue = 0;\nfloat floatValue = 0.01;\nString stringValue = &quot;&quot;;\n\nvoid setup(){\n  Serial.begin(115200);\n\n  \/\/ Connect to Wi-Fi\n  WiFi.begin(WIFI_SSID, WIFI_PASSWORD);\n  Serial.print(&quot;Connecting to Wi-Fi&quot;);\n  while (WiFi.status() != WL_CONNECTED)    {\n    Serial.print(&quot;.&quot;);\n    delay(300);\n  }\n  Serial.println();\n\n  \/\/ Configure SSL client\n  ssl_client.setInsecure();\n  ssl_client.setTimeout(1000); \/\/ Set connection timeout\n  ssl_client.setBufferSizes(4096, 1024); \/\/ Set buffer sizes\n\n  \/\/ Initialize Firebase\n  initializeApp(aClient, app, getAuth(user_auth), processData, &quot;\ud83d\udd10 authTask&quot;);\n  app.getApp&lt;RealtimeDatabase&gt;(Database);\n  Database.url(DATABASE_URL);\n}\n\nvoid loop(){\n  \/\/ Maintain authentication and async tasks\n  app.loop();\n\n  \/\/ Check if authentication is ready\n  if (app.ready()){\n    \/\/ Periodic data sending every 10 seconds\n    unsigned long currentTime = millis();\n    if (currentTime - lastSendTime &gt;= sendInterval){\n      \/\/ Update the last send time\n      lastSendTime = currentTime;\n\n      \/\/ send a string\n      stringValue = &quot;value_&quot; + String(currentTime);\n      Database.set&lt;String&gt;(aClient, &quot;\/test\/string&quot;, stringValue, processData, &quot;RTDB_Send_String&quot;);\n\n      \/\/ send an int\n      Database.set&lt;int&gt;(aClient, &quot;\/test\/int&quot;, intValue, processData, &quot;RTDB_Send_Int&quot;);\n      intValue++; \/\/increment intValue in every loop\n\n      \/\/ send a string\n      floatValue = 0.01 + random (0,100);\n      Database.set&lt;float&gt;(aClient, &quot;\/test\/float&quot;, floatValue, processData, &quot;RTDB_Send_Float&quot;);\n    }\n  }\n}\n\nvoid processData(AsyncResult &amp;aResult){\n  if (!aResult.isResult())\n    return;\n\n  if (aResult.isEvent())\n    Firebase.printf(&quot;Event task: %s, msg: %s, code: %d\\n&quot;, aResult.uid().c_str(), aResult.eventLog().message().c_str(), aResult.eventLog().code());\n\n  if (aResult.isDebug())\n    Firebase.printf(&quot;Debug task: %s, msg: %s\\n&quot;, aResult.uid().c_str(), aResult.debug().c_str());\n\n  if (aResult.isError())\n    Firebase.printf(&quot;Error task: %s, msg: %s, code: %d\\n&quot;, aResult.uid().c_str(), aResult.error().message().c_str(), aResult.error().code());\n\n  if (aResult.available())\n    Firebase.printf(&quot;task: %s, payload: %s\\n&quot;, aResult.uid().c_str(), aResult.c_str());\n}\n<\/code><\/pre>\n\t<p style=\"text-align:center\"><a class=\"rntwhite\" href=\"https:\/\/github.com\/RuiSantosdotme\/Firebase-ESP\/raw\/main\/ESP8266-Firebase-Send-RTDB\/ESP8266-Firebase-Send-RTDB.ino\" target=\"_blank\">View raw code<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Demonstration<\/h2>\n\n\n\n<p>The ESP8266 should be sending new readings every 10 seconds to the database.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"669\" height=\"374\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/09\/ESP8266-Send-to-Firebase-Database-Serial-Monitor.png?resize=669%2C374&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP8266 Send Data to the Realtime Database Firebase - Serial Monitor Demonstration\" class=\"wp-image-169209\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/09\/ESP8266-Send-to-Firebase-Database-Serial-Monitor.png?w=669&amp;quality=100&amp;strip=all&amp;ssl=1 669w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/09\/ESP8266-Send-to-Firebase-Database-Serial-Monitor.png?resize=300%2C168&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 669px) 100vw, 669px\" \/><\/figure><\/div>\n\n\n<p>Go to your App URL. You&#8217;ll see the readings being updated every 15 seconds. The App updates the web page any time the ESP8266 writes a new value.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"769\" height=\"449\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/09\/Firebase-Web-App-Display-Values-From-RTDB-ESP8266.png?resize=769%2C449&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Firebase Project Basic Web App Display Values from RTDB ESP8266\" class=\"wp-image-169279\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/09\/Firebase-Web-App-Display-Values-From-RTDB-ESP8266.png?w=769&amp;quality=100&amp;strip=all&amp;ssl=1 769w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/09\/Firebase-Web-App-Display-Values-From-RTDB-ESP8266.png?resize=300%2C175&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 769px) 100vw, 769px\" \/><\/figure><\/div>\n\n\n<p>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.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"760\" height=\"357\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/09\/RealTimeDatabase-Firebase-Data-Sent-From-ESP.png?resize=760%2C357&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 Store value firebase database Success\" class=\"wp-image-169134\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/09\/RealTimeDatabase-Firebase-Data-Sent-From-ESP.png?w=760&amp;quality=100&amp;strip=all&amp;ssl=1 760w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/09\/RealTimeDatabase-Firebase-Data-Sent-From-ESP.png?resize=300%2C141&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 760px) 100vw, 760px\" \/><\/figure><\/div>\n\n\n<p>Congratulations! You&#8217;ve created a Firebase Web App to interface with the ESP8266.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Wrapping Up<\/h2>\n\n\n\n<p>In this tutorial, you learned how to create a Firebase Web App to interface with the ESP8266. You&#8217;ve learned how to use Firebase Hosting services and the Realtime Database. <\/p>\n\n\n\n<p>We&#8217;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 ESP8266 GPIOs. The possibilities are endless.<\/p>\n\n\n\n<p>The example has some limitations but allows you to understand Firebase Web Apps potential for the ESP8266. For example, at this point, anyone can write and read data from your database because we haven&#8217;t set any database rules (it is in test mode). Additionally, we didn&#8217;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 <a href=\"https:\/\/firebase.google.com\/docs\" target=\"_blank\" rel=\"noreferrer noopener\">Firebase documentation<\/a>.<\/p>\n\n\n\n<p>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:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/randomnerdtutorials.com\/firebase-esp32-esp8266-ebook\/\"><strong>Firebase Web App with ESP32 and ESP8266<\/strong><\/a><\/li>\n<\/ul>\n\n\n\n<p>Learn more about the ESP8266 with our resources:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/randomnerdtutorials.com\/home-automation-using-esp8266\/\">Home Automation Using ESP8266<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/randomnerdtutorials.com\/build-web-servers-esp32-esp8266-ebook\/\">Build Web Servers with ESP32 and ESP8266 eBook (3rd Edition)<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/randomnerdtutorials.com\/projects-esp8266\/\">More ESP8266 Projects and Tutorials\u2026<\/a><\/li>\n<\/ul>\n\n\n\n<p>Thanks for reading.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This guide will teach you how to create a simple Firebase Web App to control and monitor your ESP8266 NodeMCU board. The Web App you&#8217;ll create can be accessed worldwide &#8230; <\/p>\n<p class=\"read-more-container\"><a title=\"ESP8266 NodeMCU with Firebase &#8211; Creating a Web App\" class=\"read-more button\" href=\"https:\/\/randomnerdtutorials.com\/esp8266-nodemcu-firebase-web-app\/#more-106878\" aria-label=\"Read more about ESP8266 NodeMCU with Firebase &#8211; Creating a Web App\">CONTINUE READING \u00bb<\/a><\/p>\n","protected":false},"author":5,"featured_media":169277,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[265,214,246,300,240,264],"tags":[],"class_list":["post-106878","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-esp8266-project","category-esp8266","category-esp8266-arduino-ide","category-0-esp8266","category-esp8266-projects","category-project"],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/09\/ESP8266-Firebase-Web-App.jpg?fit=1920%2C1080&quality=100&strip=all&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts\/106878","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/comments?post=106878"}],"version-history":[{"count":10,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts\/106878\/revisions"}],"predecessor-version":[{"id":169286,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts\/106878\/revisions\/169286"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/media\/169277"}],"wp:attachment":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/media?parent=106878"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/categories?post=106878"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/tags?post=106878"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}