Introduction: WebServers on ESP32

By plus.google.com/1003969981191095

Hey, what's up, Guys! Akarsh here from CETech.

We will make a couple of projects under this one category, i.e. Web Servers -
1. 'Hello World' on WebPage (hosted from ESP32)

2. Display LIVE Data from BME280 (environment sensor) connected with ESP32

3. Make ESP32 as Access Point (HotSpot) and view the Web Page by connecting with ESP32 directly

4. Using SPIFFS (File Management within ESP32)

5. Use SPIFFS to host pages from HTML, CSS, and JS files (including images, etc)

6. Use mDNS to use custom domain names and access the WebServer

7. Use NGROK to tunnel the server and host it LIVE on the Internet Now, you have a full-fledged working webserver on that small embedded system board.

So let's get started.

Supplies

Things used in the Project:-

  1. Espressif ESP32 Development Board - Developer Edition
  2. SparkFun Atmospheric Sensor Breakout - BME280
  3. Arduino IDE

Step 1: Get PCBs for Your Projects Manufactured

You must check out PCBWAY for ordering PCBs online for cheap!

You get 10 good-quality PCBs manufactured and shipped to your doorstep for cheap. You will also get a discount on shipping on your first order. Upload your Gerber files onto PCBWAY to get them manufactured with good quality and quick turnaround time. PCBWay now could provide a complete product solution, from design to enclosure production. Check out their online Gerber viewer function. With reward points, you can get free stuff from their gift shop.

Step 2: Libraries Required/Used

We are going to use the libraries mentioned below throughout the course of this project:-

  • Wire - This library allows you to communicate with I2C / TWI devices. In ESP32, SDA -> D21 and SCL -> D22. Used to set I2C communication with the BME280 sensor.
  • SparkFunBME280 - This library allows the user to: Read pressure in Pa, Read temperature in C and F, Read humidity in %RH and Read Altitude in feet and meters. more details
  • Adafruit Sensor - To use the BME280 library, you also need to install the Adafruit_Sensor library. Follow the next steps to install the library in your Arduino IDE: Go to Sketch > Include Library > Manage Libraries and type “Adafruit Unified Sensor” in the search box. Scroll all the way down to find the library and install it.
  • WiFi - This library lets the board connect to the internet, and wifi service. more details
  • WebServer - Supports creating a webserver and running an independent simple webserver. more details
  • ESPAsyncWebServer - Creates Async HTTP and WebSocket Server on ESP32. Requires AsyncTCP to use with ESP32. more details
  • SPIFFS - It lets you access the flash memory like you would do in a normal filesystem in your computer, but simpler and more limited. You can read, write, close, and delete files. more details
  • ESP32mDNS - mDNS is a multicast UDP service that is used to provide local network service and host discovery. It is installed by default on most operating systems or is available as a separate package. more details

Step 3: Hello World WebPage

In this project, we will host a server on the ESP32 dev board, which will display a header with 'Hello World' on it. We can view this page, from the IP address of the ESP32 Dev Board when it is connected to the same wifi/network like the one I am connected with. On the Hardware end, we only require an ESP32 Dev Board.

The code that we are going to upload is explained below and you can access that from here:-

  • Use the libraries #include, #include, and Enter your WiFi name and Password at the desired places.
  • Inside the void setup(), we will first connect to the wifi network with available SSID and password using the WiFi.h library's function. Once the connection is established, print the IP address that was designated to the ESP32 by the wifi router, on the Serial monitor of Arduino IDE.

  • Using the below functions, we are creating server paths that can be accessed from the browser once the IP address is tried to be accessed from that device. It is the URL path that will/must be requested by the device trying to request data from the ESP32's Web Server.

  • These are the Endpoints that will help us in controlling the ESP32 from the URL. Basically, we are making a REST server locally that does not require internet.

  • server.on() function has 2 parameters, first part is the endpoint waiting from the clientside. and 2nd part is a function that gets executed upon the endpoint being triggered. The function is defined in the same code file. Using the server.begin() function, the server is started.

  • Now, let us define the response (HTML Page) that will be sent back to the device/user who sent the request. The function handles the server that has been started and controls all the endpoint functions when receiving a request. When the request is, https://< a="">/ i.e. - "/" -> Response will be the function handle_OnConnect().

  • The server will send a response code '200' with content as 'text/html' and finally the main HTML text. When the request is, ANYTHING ELSE -> Response will be the function handle_NotFound().

And in this way, Our Hello World part will come to an end.

Step 4: LIVE Display of Data From ESP32

In this project, we will host a server on the ESP32 dev board, which will display Temperature, Humidity, Altitude, and Pressure from the BME280 sensor module (You can use any other sensor to get the environment data / Or use a randomized value to view data here). We can view this page, from the IP address of the ESP32 Dev Board when it is connected to the same wifi/network like the one I am connected with.

Hardware Required:-

1 x ESP32 Dev Board1 x Any sensor module (I am using BME280)

The code for this project can be accessed from here and the code is explained below:-

  • The libraries used are #include, #include, #include, #include "SparkFunBME280.h". Enter your WiFi name and Password at the required places.
  • Next, we need to read the data from the sensors and store it in a variable, when the client(user) opens the Page on Browser.
  • Now as we have the data, we can push the float variables to the HTML page to view it.

Step 5: ESP32 As Access Point (HotSpot)

Here, the ESP32 will itself create a Hotspot, You can access the code for this from here. By default, the hotspot will be created with SSID="WeatherBoy" and Password= "PASSWORD123". You can change this in the code and select any name and password of your choice. Below are the network configurations we need to make, to start a network and open the network for connections from other clients. Since the IP and Gateway are the same (Gateway must be x.x.x.1), we are hardcoding the device to be the Host here:-

IPAddress local_ip(192,168,1,1);

IPAddress gateway(192,168,1,1);

IPAddres subnet(255,255,255,0);

In the above configurations, the network components may not be clear, but you can go through CCNA or other Computer Network Configuration articles/courses to learn and understand these components.


WiFi.mode(WIFI_AP);

WiFi.softAPConfig(local_ip, gateway, subnet);

WiFi.softAP(ssid, password);

In the above section, we have selected the mode of WiFi i.e. AP and therefore using the softAP() function to configure and create a WiFi Hotspot on the ESP32 dev board. And that's it! Type http://192.168.1.1/ in the Browser and view the HTML page.

Step 6: SPIFFS (Serial Peripheral Interface Flash File System)

Having a File System within the board is definitely an advantage:-

  • Create files to save small amounts of data instead of using a microSD card;
  • Save HTML and CSS files to build a web server;
  • Save images, figures, and icons

In the Flash Memory of 4 MB, around 1MB is reserved for storage by the users. To use it along with Arduino, we need to install the File Uploader Plugin on Arduino IDE. Then follow the below steps - Follow the next steps to install the filesystem uploader:

1) Download the ZIP file from the Github Repo Releases Page. Reach out to the latest release. (ESP32FS-1.0.zip)

2) Go to the Arduino IDE directory, and open the Tools folder.

3) Unzip the downloaded .zip folder to the Tools folder. You should have a similar folder structure: ../Arduino-Directory/tools/ESP32FS/tool/esp32fs.jar

4) Now, restart the Arduino IDE. We'll see the uploader plugin visible in the Tools section. Select the Partition Scheme and choose the amount of space you require for your SPIFFS Data.

By Default, select 1.5MB SPIFFS (FAT32 is meant for SD Card modules). Now we are READY and SET to upload data to the ESP32.
Next, let us upload sample data to the ESP32 board. To upload files to the ESP32 filesystem follow the next instructions:-

1) Create an Arduino sketch and save it.

2) Then, open the sketch folder. You can go to Sketch > Show Sketch Folder. The folder where your sketch is saved should open.

3) Inside that folder, create a new folder called data.

4) Inside the data folder is where you should put the files you want to be saved into the ESP32 filesystem. As an example, create a .txt file with some text called sample.txt.

5)Then, to upload the files, in the Arduino IDE, you just need to go to Tools > ESP32 Sketch Data Upload.

After the Data is uploaded, the below response will be visible in the console (verbose).

Note: in some ESP32 development boards you need to keep the ESP32 on-board “BOOT” button pressed while it’s uploading the files. When you see the “Connecting …….____……” message, you need to press the ESP32 on-board “BOOT” button.
Now, let’s just check if the file was actually saved into the ESP32 filesystem - Upload the Code to the ESP32 this time, and view the Serial Monitor

Step 7: HTML, CSS and JS Using SPIFFS

In this project, we will host a server on the ESP32 dev board, which will display Temperature, Humidity, Altitude, and Pressure from the BME280 sensor module. It is the same as the LIVE Display of Data on ESP32but this time the file for the Web Page can be easily scripted in HTML, CSS, and JS for all the functionalities.

Here, we shall upload the data (HTML, CSS, images - files) to the ESP32 board using SPIFFS first. The data folder components are present in the Code Section

Next, use the code available here to extract SPIFFS data and use it on the WebServer as the client requests information, and ESP32 (Server) responses with data from the file system (Database). What we have over here, is a FULL-FLEDGED Web System (Local) - Without any OS running the whole thing. Even though it is small scale and meant for only single runtime data, we at least have an understanding of the whole system.

Step 8: Custom Domains for WebServers

In this project, we will assign a Domain name to the IP Address and access the WebServer on ESP32 not using IP Address, but with a name directly. The code for this is available here. So, it won't matter what the IP Address is, it can always be ACCESSED with the Domain Name.

We will use the mDNS library for this, and assign a name to the IP Address.
#include <ESPmDNS.h>

Next, let us create a 'host' variable which will be the hostname to access the IP Address - const char* host = "weatherboy";

Inside the void setup() function, just insert the below block of code:-


if (!MDNS.begin(host)) {

//http://.local Serial.println("Error setting up MDNS responder!");

while (1) {

delay(1000);

}

}

Serial.println("mDNS responder started");

As you can see above, I was able to access my site using http://weatherboy.local and this opens endless possibilities for the projects we can make on WebServers.
For complete code, refer to the Github repository from here.

Step 9: NGROK to Host on Cloud

In this project, we will host the page we created from the server on ESP32 to the cloud. The IP Address is tunneled and the port is made available on the hosting server of NGROK.

1)First, sign up and log in to ngrok.com.

2) Once you are Logged IN to the dashboard, download and unzip the file.

3) Now, run the ngrok.exe file. Go to Dashboard and copy the command with Auth Token. Use the command on the terminal that opened on opening the ngrok application. This will save the auth token to the configurations ngrok.yml file for future uses.

4) The very last thing, is to run the tunnel service from this terminal.

We can also use the IP Address or the hostname here. But to make sure we also need to mention the port we used to create the webserver.> ngrok http :portnumber
There we go, this will tunnel the IP Address and make it publicly available - for Free (temporary features). That's it we have the service running on the URL Address on the 'Forwarding' key. Do not worry about the inability to copy the URL Link, go to the Dashboard > Endpoints and both the HTTP and HTTPS links will be available and clickable there.

Step 10: And We Are Done

THERE WE GOOOO !! Control/Monitor your ESP32 through the Internet, from any corner of the world. Now you have a RealTime WebServer that is physically present with you, and you'd be able to access the website on the Device from the NGROK's link.

We are at the END of the Documentation on WebServers on ESP32. I have shared ALL the possibilities I am aware of, related to the WebServer. There are 2 separate ways to build a Web Server Page though, one of them runs/works inside the void loop() function instead of setup() as an endpoint. (Similar to Backend technologies)