![\"ESP32-CAM](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2022\/01\/ESP32-CAM-Firebase-Web-App.jpg?resize=1200%2C675&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nUpdated May 9, 2026.<\/em><\/p>\n\n\n\n This article is Part 2 of this previous tutorial: ESP32-CAM Save Picture in Firebase Storage<\/a>. Follow that tutorial first before proceeding. <\/p>\n\n\n\n In this tutorial (Part 2), you’ll create a web app to display the last picture taken with the ESP32-CAM and saved in the Firebase Storage (see this previous tutorial<\/a>).<\/p>\n\n\n\n The following diagram shows a high-level overview of the project we’ll build\u2014programming the ESP32-CAM and setting up the Firebase Project with Storage was done in Part 1. <\/p>\n\n\n Before you start creating the Firebase Web App, you need to check the following prerequisites.<\/p>\n\n\n\n You should have followed the following tutorial first:<\/p>\n\n\n\n The ESP32-CAM must be running the code provided in that tutorial so that there’s a picture saved in Firebase Storage. The Firebase Storage must be set up 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 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 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 the project created in Part 1<\/a> of this tutorial\u2014then hit Enter.<\/p>\n\n\n 13)<\/strong> Then, select the hosting options as shown below:<\/p>\n\n\n\n 14)<\/strong> Then, press Enter on the following question to select the default file for storage rules.<\/p>\n\n\n\n 15)<\/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 create a custom web page for your needs. We’ll do that later in this tutorial.<\/p>\n\n\n\n 16)<\/strong> To check if everything went as expected, run the following command on the VS Code Terminal window.<\/p>\n\n\n\n It will ask you if you want to set a new role. Hit Enter to accept.<\/p>\n\n\n You should get a Deploy complete!<\/strong> message and an URL to the Project Console and the Hosting URL.<\/p>\n\n\n\n 17)<\/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 picture saved on Firebase Storage.<\/p>\n\n\n\n Copy the following to your index.html<\/span> file. This HTML file creates a simple web page that displays the last picture saved on the Firebase Storage and the time it was taken (created in this previous project<\/a>).<\/p>\n\n\n View raw code<\/a><\/p>\n\n\n\n You need to modify the code with your own firebaseConfig<\/span> object\u2014the one you’ve got in this step<\/a>.<\/p>\n\n\n\n Let’s take a quick look at the HTML file, or skip to the next section<\/a>.<\/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 web page’s title 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 Reference an external style.css<\/span> file to format the HTML page.<\/p>\n\n\n\n Load the app.js JavaScript file<\/p>\n\n\n\n This line tells the browser to load and execute the JavaScript file app.js<\/span><\/strong> located in the same directory as the index.html<\/span><\/strong> file\u2014we’ll create that file next.<\/p>\n\n\n\n We’re done with the metadata. Now, let’s go to the HTML parts that are visible to the user\u2014go between the <body><\/span> and <\/body><\/span><\/span> tags.<\/span><\/p>\n\n\n\n We create a top “navigation” bar with the name of our app and a small icon from fontawesome.<\/p>\n\n\n\n The following line creates a paragraph with an image tag where we’ll display the picture later on. The image tag has a specific id (“img<\/span>“) so that we can refer to that element in the JavaScript file by its id.<\/p>\n\n\n\n Next, we create a paragraph to display the date and time that the picture was taken. There is a <span><\/span><\/span> tag with the date-time<\/span> id where we’ll display that information later on.<\/p>\n\n\n\n Finally, there’s a button to refresh the web page (to display a new picture, if that’s the case).<\/p>\n\n\n\n Save the HTML file.<\/p>\n\n\n\n Inside the public<\/span> folder, create a file called style.css<\/span>. To create the file, select the public<\/span> folder, and then click on the +file<\/strong> icon at the top of the File Explorer. Call it style.css<\/span>.<\/p>\n\n\n Then, copy the following to the style.css<\/span> file.<\/p>\n\n\n View raw code<\/a><\/p>\n\n\n\n The CSS file includes some simple styles to make our webpage look better. We won’t discuss how CSS works in this tutorial.<\/p>\n\n\n\n Create a new file inside the public<\/span> folder called app.js<\/span>.<\/p>\n\n\n\n The following image shows how your web app project folder structure should look.<\/p>\n\n\n Copy the following to the app.js<\/span> file you created previously. <\/p>\n\n\n View raw code<\/a><\/p>\n\n\n\n This file gets the picture saved on the Firebase Storage and the time it was taken, and displays that on the HTML page.<\/p>\n\n\n\n First, we load the necessary Firebase modules we’ll use.<\/p>\n\n\n\n Then, add your Firebase configuration object for this project. The one you’ve got in previous steps in this tutorial<\/a>.<\/p>\n\n\n\nProject Overview<\/h2>\n\n\n\n
![\"ESP32-CAM](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/11\/ESP32-CAM-Firebase-Storage-Web-App-Project-Overview.png?resize=750%2C616&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n\n
Prerequisites<\/h2>\n\n\n\n
Creating a Firebase Project<\/h3>\n\n\n\n
\n
Installing Required Software<\/h3>\n\n\n\n
\n
\n\n\n\n1) 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\/11\/create-firebase-project-with-storage.png?resize=750%2C180&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\n
![\"Login](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/11\/Firebase-Project-Setup-Firebase-Storage-Rules.png?resize=683%2C68&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Firebase](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2022\/01\/ESP32-Firebase-Web-App-with-Storage-Files-on-VS-Code.png?resize=595%2C316&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nfirebase <\/strong>deploy<\/code><\/pre>\n\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![\"](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/09\/firebase-hosting-complete.png?resize=773%2C495&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n
\n\n\n\n2) Creating the Firebase Web App<\/h2>\n\n\n\n
index.html<\/h3>\n\n\n\n
<!DOCTYPE html>\n<html lang="en">\n<head>\n <meta charset="UTF-8">\n <meta name="viewport" content="width=device-width, initial-scale=1.0">\n <title>ESP Firebase App<\/title>\n\n <link rel="stylesheet" href="https:\/\/use.fontawesome.com\/releases\/v5.7.2\/css\/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">\n <link rel="stylesheet" type="text\/css" href="style.css">\n\n <script type="module" src="app.js"><\/script>\n<\/head>\n<body>\n <div class="topnav">\n <h1>ESP32-CAM Web App <i class="fas fa-camera"><\/i><\/h1>\n <\/div>\n <p><img id="img" width="500px"><\/p> \n <p>Last picture taken: <span id="date-time"><\/span><\/p>\n <button type="button" id="refreshBtn">Refresh<\/button>\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<link rel=\"stylesheet\" type=\"text\/css\" href=\"style.css\"><\/code><\/pre>\n\n\n\n<script type=\"module\" src=\"app.js\"><\/script><\/code><\/pre>\n\n\n\n<div class=\"topnav\">\n <h1>ESP32-CAM Web App <i class=\"fas fa-camera\"><\/i><\/h1>\n<\/div><\/code><\/pre>\n\n\n\n<p><img id=\"img\" width=\"500px\"><\/p><\/code><\/pre>\n\n\n\n<p>Last picture taken: <span id=\"date-time\"><\/span><\/p><\/code><\/pre>\n\n\n\n<button onclick=\"window.location.reload();\">Refresh<\/button><\/code><\/pre>\n\n\n\nstyle.css<\/h3>\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\nhtml {\r\n font-family: Arial, Helvetica, sans-serif; \r\n display: inline-block; \r\n text-align: center;\r\n }\r\n h1 {\r\n font-size: 1.8rem; \r\n color: white;\r\n }\r\n p { \r\n font-size: 1.2rem;\r\n }\r\n .topnav { \r\n overflow: hidden; \r\n background-color: #0A1128;\r\n }\r\n body { \r\n margin: 0;\r\n }\r\n button{\r\n background-color: #034078;\r\n border: none;\r\n padding: 14px 20px;\r\n text-align: center;\r\n font-size: 20px;\r\n border-radius: 4px;\r\n transition-duration: 0.4s;\r\n width: 150px;\r\n color: white;\r\n cursor: pointer;\r\n }<\/code><\/pre>\n\tJavaScript File<\/h3>\n\n\n\n
![\"Firebase](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/11\/Firebase-Web-App-Project-Files.png?resize=466%2C267&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\napp.js<\/h4>\n\n\n\n
import { initializeApp } from 'https:\/\/www.gstatic.com\/firebasejs\/10.14.1\/firebase-app.js';\r\nimport { getAuth, signInWithEmailAndPassword } from 'https:\/\/www.gstatic.com\/firebasejs\/10.14.1\/firebase-auth.js';\r\nimport { getStorage, ref, getDownloadURL, getMetadata } from 'https:\/\/www.gstatic.com\/firebasejs\/10.14.1\/firebase-storage.js';\r\n\r\n\/\/ Firebase configuration\r\nconst firebaseConfig = {\r\n apiKey: "REPLACE_WITH_YOUR_Firebase_CONFIGURATION",\r\n authDomain: "REPLACE_WITH_YOUR_Firebase_CONFIGURATION",\r\n databaseURL: "REPLACE_WITH_YOUR_Firebase_CONFIGURATION",\r\n projectId: "REPLACE_WITH_YOUR_Firebase_CONFIGURATION",\r\n storageBucket: "REPLACE_WITH_YOUR_Firebase_CONFIGURATION",\r\n messagingSenderId: "REPLACE_WITH_YOUR_Firebase_CONFIGURATION",\r\n appId: "REPLACE_WITH_YOUR_Firebase_CONFIGURATION"\r\n};\r\n\r\nconst email = 'AUTHORIZED_USER_EMAIL'; \/\/ Replace with your user email\r\nconst password = 'PASSWORD'; \/\/ Replace with your user password\r\n\r\n\/\/ Initialize Firebase\r\nconst app = initializeApp(firebaseConfig);\r\nconst auth = getAuth(app);\r\nconst storage = getStorage(app);\r\n\r\n\/\/ Format date and time\r\nconst formatDateTime = (date) => {\r\n const pad = (num) => String(num).padStart(2, '0');\r\n return `${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())} at ${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;\r\n};\r\n\r\n\/\/ Authenticate user\r\nconst authenticate = async () => {\r\n try {\r\n const userCredential = await signInWithEmailAndPassword(auth, email, password);\r\n return userCredential.user;\r\n } catch (error) {\r\n document.getElementById('date-time').textContent = `Authentication error: ${error.message}`;\r\n throw error;\r\n }\r\n};\r\n\r\n\/\/ Load image and metadata\r\nconst loadImageData = async (user) => {\r\n try {\r\n const storageRef = ref(storage, 'data\/photo.jp');\r\n const url = await getDownloadURL(storageRef);\r\n document.querySelector('#img').src = url;\r\n\r\n const metadata = await getMetadata(storageRef);\r\n document.getElementById('date-time').textContent = formatDateTime(new Date(metadata.timeCreated));\r\n } catch (error) {\r\n document.getElementById('date-time').textContent = `Error: ${error.message}`;\r\n }\r\n};\r\n\r\n\/\/ Initialize on page load\r\ndocument.addEventListener('DOMContentLoaded', async () => {\r\n const user = await authenticate();\r\n await loadImageData(user);\r\n\r\n document.querySelector('#refreshBtn').addEventListener('click', async () => {\r\n const user = await authenticate();\r\n await loadImageData(user);\r\n });\r\n});\r\n<\/code><\/pre>\n\tFirebase Modules<\/h4>\n\n\n\n
import { initializeApp } from 'https:\/\/www.gstatic.com\/firebasejs\/10.14.1\/firebase-app.js';\nimport { getAuth, signInWithEmailAndPassword } from 'https:\/\/www.gstatic.com\/firebasejs\/10.14.1\/firebase-auth.js';\nimport { getStorage, ref, getDownloadURL, getMetadata } from 'https:\/\/www.gstatic.com\/firebasejs\/10.14.1\/firebase-storage.js';<\/code><\/pre>\n\n\n\nFirebase Configuration Object<\/h4>\n\n\n\n
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\nUser Email and Password<\/h4>\n\n\n\n
![\"Firebase](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2022\/01\/Firebase-Storage-Rules-File.png?resize=733%2C377&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n