![\"ESP32-CAM](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/11\/ESP32-CAM-Firebase-Web-App.jpg?resize=1200%2C675&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nThis 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 on 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 on Firebase Storage. The Firebase Storage must be set up also as shown in the tutorial.<\/p>\n\n\n\n To make the web app as simple as possible, we won’t add an authentication form to the web app. We’ll use the anonymous user method\u2014any user can see the ESP32-CAM pictures. To do that, you need to enable an Anonymous user in your Firebase project console.<\/p>\n\n\n\n Go to your project in the Firebase console. Then, go to Authentication <\/strong>> Sign-In<\/strong> method. Click on Add new provider<\/strong>.<\/p>\n\n\n Select the Anonymous sign-in provider.<\/p>\n\n\n Finally, enable the Anonymous sign-in.<\/p>\n\n\n If you want to add an authentication form to your web app, you can take inspiration from this project: ESP32\/ESP8266: Firebase Web App to Display Sensor Readings (with Authentication)<\/a>.<\/p>\n\n\n\n Before getting started, you need to install the required software to create the Firebase Web App. Here’s a list of the software you need to install (click on the links for instructions):<\/p>\n\n\n\n 1)<\/strong> Go to your Firebase project Console and add an app to the project you created in the previous tutorial by clicking on the +Add app <\/strong>button. <\/p>\n\n\n 2)<\/strong> Select the web app icon.<\/p>\n\n\n 3)<\/strong> Give your app a name. Then, check the box next to \u221a Also set up Firebase Hosting for this App<\/strong>. Click Register app<\/strong>.<\/p>\n\n\n 4)<\/strong> Then, copy the firebaseConfig<\/span> object and save it because you’ll need it later.<\/p>\n\n\n After this, you can also access the firebaseConfig<\/span> object if you go to your Project Settings in your Firebase console.<\/p>\n\n\n\n 5)<\/strong> Click Next<\/strong> on the proceeding steps, and finally on Continue to console<\/strong>.<\/p>\n\n\n\n Follow the next steps to create a Firebase Web App Project using VS Code.<\/p>\n\n\n\n 1)<\/strong> Create a folder on your computer to save your Firebase project\u2014for example, Firebase-Project<\/em><\/span> on the Desktop.<\/p>\n\n\n\n 2)<\/strong> Open VS Code. Go to File<\/strong> > Open Folder…<\/strong> and select the folder you’ve just created.<\/p>\n\n\n\n 3)<\/strong> Go to Terminal <\/strong>> New Terminal<\/strong>. A new Terminal window should open on your project path.<\/p>\n\n\n 4)<\/strong> On the previous Terminal window, type the following:<\/p>\n\n\n\n 5)<\/strong> You’ll be asked to collect CLI usage and error reporting information. Enter “n<\/strong>” and press Enter<\/strong> to deny.<\/p>\n\n\n Note:<\/strong> If you are already logged in, it will show a message saying: “Already logged in as user@gmail.com”.<\/p>\n\n\n\n 6)<\/strong> After this, it will pop up a new window on your browser to login into your firebase account.<\/p>\n\n\n 7)<\/strong> Allow Firebase CLI to access your google account.<\/p>\n\n\n 8)<\/strong> After this, Firebase CLI login should be successful. You can close the browser window.<\/p>\n\n\n 9)<\/strong> After successfully login in, run the following command to start a Firebase project directory in the current folder.<\/p>\n\n\n\n 10)<\/strong> You’ll be asked if you want to initialize a Firebase project in the current directory. Enter Y<\/strong> and hit Enter<\/strong>.<\/p>\n\n\n 11)<\/strong> Then, use up and down arrows and the Space key to select the options. Select the following options:<\/p>\n\n\n\n The selected options will show up with a green asterisk. Then, hit Enter<\/strong>. <\/p>\n\n\n 12)<\/strong> Select the option “Use an existing project”\u2014it should be highlighted in blue\u2014then hit Enter.<\/p>\n\n\n 13)<\/strong> After that, select the Firebase project for this directory\u2014it should be the project created in this previous tutorial<\/strong>. In my case, it is called esp-firebase-demo<\/span>. Then hit Enter.<\/p>\n\n\n 14)<\/strong> Then, select the hosting options as shown below:<\/p>\n\n\n\n 15)<\/strong> Then, press Enter on the following question to select the default file for storage rules.<\/p>\n\n\n\n 16)<\/strong> The Firebase project should now be initialized successfully. Notice that VS code created some essential files under your project folder.<\/p>\n\n\n The index.html<\/span> file contains some HTML text to build a web page. For now, leave the default HTML text. The idea is to replace that with your own HTML text to create a custom web page for your needs. We’ll do that later in this tutorial.<\/p>\n\n\n\n 17)<\/strong> To check if everything went as expected, run the following command on the VS Code Terminal window.<\/p>\n\n\n\n You should get a Deploy complete!<\/strong> message and an URL to the Project Console and the Hosting URL.<\/p>\n\n\n\n 18)<\/strong> Copy the hosting URL and paste it into a web browser window. You should see the following web page. You can access that web page from anywhere in the world.<\/p>\n\n\n The web page you’ve seen previously is built with the HTML file placed in the public<\/span> folder of your Firebase project. By changing the content of that file, you can create your own web app. That’s what we’re going to do in the next section.<\/p>\n\n\n\n Now that you’ve created a Firebase project app successfully on VS Code, follow the next steps to customize the app to display the 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 on 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 You must add the following line to be able to use Firebase with your app.<\/p>\n\n\n\n You must also add any Firebase products you want to use. In this example, we’re using Storage and Authentication.<\/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
Enabling Anonymous User<\/h3>\n\n\n\n
![\"Firebase](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2022\/01\/Add-provider-firebase-authentication.png?resize=896%2C443&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Enable](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2022\/04\/Firebase-sign-in-provider.png?resize=939%2C298&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Enable](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2022\/01\/enable-anonymous-user-firebase.png?resize=748%2C253&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nInstalling Required Software<\/h3>\n\n\n\n
\n
\n\n\n\n1) Add an App to Your Firebase Project<\/h2>\n\n\n\n
![\"Firebase](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/10\/Firebase-Add-App-to-Project.png?resize=750%2C365&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Firebase](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/10\/Firebase-Add-Web-App-to-Project.png?resize=750%2C328&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Firebase](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/10\/add-firebase-to-web-app-example.png?resize=552%2C601&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Firebase](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/10\/app-firebase-config-object.png?resize=666%2C210&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n
\n\n\n\n2) Setting Up a Firebase Web App Project (VS Code)<\/h2>\n\n\n\n
1) Creating a Project Folder<\/h3>\n\n\n\n
![\"Install](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/08\/Terminal-Window-Firebase-Folder-Project.png?resize=746%2C163&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n2) Firebase Login<\/h3>\n\n\n\n
firebase <\/strong>login<\/code><\/pre>\n\n\n\n![\"Login](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/08\/Terminal-Window-Login-Firebase-VS-Code.png?resize=750%2C397&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Login](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/08\/Login-Firebase-Account.png?resize=750%2C648&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Login](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/08\/Login-Firebase-Account-2.png?resize=750%2C875&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Login](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/08\/Firebase-CLI-Login-Successful.png?resize=689%2C454&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n3) Initializing Web App Firebase Project<\/h3>\n\n\n\n
firebase <\/strong>init<\/code><\/pre>\n\n\n\n![\"Login](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/08\/Firebase-Start-Project-VS-Code.png?resize=684%2C187&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n\n
![\"Login](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/11\/create-firebase-project-with-storage.png?resize=750%2C180&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Firebase](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/08\/Firebase-Project-Setup-VS-Code.png?resize=658%2C228&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Login](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/09\/add-firebase-project-VS-Code.png?resize=646%2C216&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\/2021\/08\/firebase-project-app-created-successfully.png?resize=750%2C382&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nfirebase <\/strong>deploy<\/code><\/pre>\n\n\n![\"Firebase](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/10\/firebase-first-deploy-test-app.png?resize=659%2C322&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\n3) Creating 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 <!-- The core Firebase JS SDK is always required and must be listed first -->\n <script src="https:\/\/www.gstatic.com\/firebasejs\/8.10.0\/firebase-app.js"><\/script>\n\n <!-- TODO: Add SDKs for Firebase products that you want to use\n https:\/\/firebase.google.com\/docs\/web\/setup#available-libraries -->\n <script src="https:\/\/www.gstatic.com\/firebasejs\/8.8.1\/firebase-auth.js"><\/script>\n <script src="https:\/\/www.gstatic.com\/firebasejs\/8.10.0\/firebase-storage.js"><\/script>\n\n\n <script>\n \/\/ REPLACE WITH YOUR web app's Firebase configuration\n const firebaseConfig = {\n apiKey: "",\n authDomain: "",\n databaseURL: "",\n projectId: "",\n storageBucket: "",\n messagingSenderId: "",\n appId: ""\n };\n \/\/ Initialize Firebase\n firebase.initializeApp(firebaseConfig);\n \n \/\/ Get a reference to the storage service, which is used to create references in your storage bucket\n var storage = firebase.storage();\n\n \/\/ Create a storage reference from our storage service\n var storageRef = storage.ref();\n\n<\/script>\n<script src="app.js" defer><\/script>\n\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 onclick="window.location.reload();">Refresh<\/button>\n <\/body>\n<\/html><\/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:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\"><\/code><\/pre>\n\n\n\n<link rel=\"stylesheet\" type=\"text\/css\" href=\"style.css\"><\/code><\/pre>\n\n\n\n<script src=\"https:\/\/www.gstatic.com\/firebasejs\/8.10.0\/firebase-app.js\"><\/script><\/code><\/pre>\n\n\n\n<script src=\"https:\/\/www.gstatic.com\/firebasejs\/8.8.1\/firebase-auth.js\"><\/script>\n<script src=\"https:\/\/www.gstatic.com\/firebasejs\/8.10.0\/firebase-storage.js\"><\/script><\/code><\/pre>\n\n\n\n
![\"Create](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/10\/Firebase-Project-VS-Code-CSS-File.png?resize=578%2C277&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n