ESP32 S3 - Web Server
The ESP32 S3 is a powerful microcontroller with built-in Wi-Fi, making it an excellent choice for hosting a lightweight web server that lets you monitor sensor data or control outputs directly from a browser. In this step-by-step tutorial, we'll show you how to program an ESP32 S3 board to become a web server so you can access web pages from any device on the same network. To make it easy, we will progress from simple to more challenging steps as follows:
- ESP32 S3 Web Server - Showing simple text on a web page.
- ESP32 S3 Web Server - Monitoring sensor values from the ESP32 S3 via a web browser.
- ESP32 S3 Web Server - Controlling the ESP32 S3 via a web browser.
- ESP32 S3 Web Server - Separating HTML content (HTML, CSS, and Javascript) from ESP32 S3 code and putting it into another file on the Arduino IDE.
- ESP32 S3 Web Server - Creating multiple pages such as index.html, temperature.html, led.html, error_404.html, and error_405.html..., and more.
Hardware Preparation
Or you can buy the following kits:
| 1 | × | DIYables ESP32 S3 Starter Kit (ESP32 S3 included) | |
| 1 | × | DIYables Sensor Kit (18 sensors/displays) |
Disclosure: Some of the links provided in this section are Amazon affiliate links. We may receive a commission for any purchases made through these links at no additional cost to you.
Additionally, some of these links are for products from our own brand, DIYables .
Additionally, some of these links are for products from our own brand, DIYables .
Reading the sensor value from ESP32 S3 via Web
This is relatively simple. The ESP32 S3 code does the following tasks:
- Creating a web server that listens for HTTP requests from a web browser.
- Upon receiving a request from a web browser, the ESP32 S3 responds with the following information:
- HTTP header
- HTTP body: This includes HTML content and the value read from the sensor.
- New to ESP32 S3? Complete our Getting Started with ESP32 S3 guide first.
- Connect the ESP32 S3 board to your PC via a USB Type-C cable.
- Open Arduino IDE on your PC.
- Select the right ESP32 S3 board (e.g. ESP32S3 Dev Module) and COM port.
- Open the Library Manager by clicking on the Library Manager icon on the left navigation bar of Arduino IDE.
- Search "DIYables ESP32 WebServer", then find the Web Server library created by DIYables.
- Click Install button to install the Web Server library.
- Search for DIYables ESP32 WebServer created by DIYables.io and click the Install button.
- Copy the above code and open with Arduino IDE.
- Change the Wi-Fi information (SSID and password) in the code to yours.
- Click Upload button on Arduino IDE to upload code to ESP32 S3.
- Open the Serial Monitor.
- Check out the result on Serial Monitor.
- Take note of the IP address displayed, and enter this address into the address bar of a web browser on your smartphone or PC.
- As a result, you will see the following output on the Serial Monitor.
- Once you access the web browser using the IP address, you will be presented with a very basic web page displaying "Hello, ESP32 S3!". The page will look like the following:
- Pro Tip: Bookmark the ESP32 S3's IP address in your browser for quick access during development sessions.
The following code performs the above tasks on the ESP32 S3. Copy it into your Arduino IDE sketch and update the Wi-Fi credentials before uploading.
/*
* This ESP32 S3 code was developed by newbiely.com
*
* This ESP32 S3 code is made available for public use without any restriction
*
* For comprehensive instructions and wiring diagrams, please visit:
* https://newbiely.com/tutorials/esp32-s3/esp32-s3-web-server
*/
/*
* This ESP32-S3 code is created by esp32io.com
*
* This ESP32-S3 code is released in the public domain
*
* For more detail (instruction and wiring diagram), visit https://esp32io.com/tutorials/esp32-s3-web-server
*/
#include <DIYables_ESP32_WebServer.h>
// WiFi credentials
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// Create web server instance
DIYables_ESP32_WebServer server;
// Page handlers
void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
server.sendResponse(client, "<html><body><h1>Hello, ESP32 S3!</h1></body></html>");
}
void setup() {
Serial.begin(9600);
delay(1000);
Serial.println("ESP32 S3 Web Server");
// Configure routes
server.addRoute("/", handleHome);
// Start web server with WiFi connection
server.begin(WIFI_SSID, WIFI_PASSWORD);
}
void loop() {
server.handleClient();
}
Detailed Instructions
1
void setup() {
8
Serial.println("Hello World!");
Message (Enter to send message to 'ESP32S3 Dev Module' on 'COM15')
New Line
9600 baud
Connecting to WiFi...
Connected to WiFi
ESP32 S3 Web Server's IP address: 192.168.0.2
8
Serial.println("Hello World!");
Message (Enter to send message to 'ESP32S3 Dev Module' on 'COM15')
New Line
9600 baud
Connecting to WiFi...
Connected to WiFi
ESP32 S3 Web Server's IP address: 192.168.0.2
ESP32 S3 Web Server: New request received:
GET /
Reading the sensor value from ESP32 S3 via Web
The following code prints the temperature value to a web page hosted on the ESP32 S3. It demonstrates how sensor data can be served dynamically with each browser request.
/*
* This ESP32 S3 code was developed by newbiely.com
*
* This ESP32 S3 code is made available for public use without any restriction
*
* For comprehensive instructions and wiring diagrams, please visit:
* https://newbiely.com/tutorials/esp32-s3/esp32-s3-web-server
*/
/*
* This ESP32-S3 code is created by esp32io.com
*
* This ESP32-S3 code is released in the public domain
*
* For more detail (instruction and wiring diagram), visit https://esp32io.com/tutorials/esp32-s3-web-server
*/
#include <DIYables_ESP32_WebServer.h>
// WiFi credentials
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// Create web server instance
DIYables_ESP32_WebServer server;
float getTemperature() {
// YOUR SENSOR IMPLEMENTATION HERE
// simulate the temperature value
float temp_x100 = random(0, 10000); // a random value from 0 to 10000
return temp_x100 / 100; // return the simulated temperature value from 0 to 100 in float
}
// Page handlers
void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
// get temperature from sensor
float temperature = getTemperature();
// Format the temperature with two decimal places
String temperatureStr = String(temperature, 2);
String html = "<!DOCTYPE HTML>";
html += "<html>";
html += "<head>";
html += "<link rel=\"icon\" href=\"data:,\">";
html += "</head>";
html += "<p>";
html += "Temperature: <span style=\"color: red;\">";
html += temperature;
html += "°C</span>";
html += "</p>";
html += "</html>";
server.sendResponse(client, html.c_str());
}
void setup() {
Serial.begin(9600);
delay(1000);
Serial.println("ESP32 S3 Web Server");
// Configure routes
server.addRoute("/", handleHome);
// Start web server with WiFi connection
server.begin(WIFI_SSID, WIFI_PASSWORD);
}
void loop() {
server.handleClient();
}
Detailed Instructions
- New to ESP32 S3? Complete our Getting Started with ESP32 S3 guide first.
- Copy the above code and open with Arduino IDE.
- Change the Wi-Fi information (SSID and password) in the code to yours.
- Upload the code to ESP32 S3.
- Once you access the web browser using the IP address, you will be presented with a very basic web page displaying information about the ESP32 S3 board. The page will look like the following:
- Pro Tip: To get automatic temperature updates without reloading, see the HTML separation section below where JavaScript handles background refresh.
To make the web page look fantastic with a graphic user interface (UI), check out the final section of this tutorial.
※ NOTE THAT:
With the code provided above, to get the temperature update, you have to reload the page on the web browser. In a next part, we will learn how to make the web page update the temperature value in the background without reloading the webpage.
Controlling the ESP32 S3 via Web
Controlling something connected to the ESP32 S3 is a bit more challenging than just reading a value. That's because the ESP32 S3 has to understand the request it receives from the web browser to know what action to take.
For a more comprehensive and detailed example, I recommend checking out the tutorials listed below:
Separating HTML content into another file on Arduino IDE
If you want to create a simple web page with minimal content, you can embed the HTML directly into the ESP32 S3 code, as explained earlier.
However, if you want to make a more sophisticated and impressive web page with larger content, it becomes inconvenient to include all the HTML, CSS, and Javascript directly in the ESP32 S3 code. In this situation, you can use a different approach to manage the code:
- The ESP32 S3 code will be placed in a .ino file, just like before.
- The HTML code (HTML, CSS, Javascript) will be placed in a separate .h file. This allows you to keep the web page content separate from the ESP32 S3 code, making it easier to manage and modify.
To do so, we need to do two major steps:
- Preparing HTML content
- Programming ESP32 S3
Preparing HTML content
- Create an HTML file on your local PC that contains the HTML content (HTML, CSS, and Javascript) for your UI design.
- In the HTML file, where data from ESP32 S3 should be displayed, use an arbitrary value.
- Test and modify it until you are satisfied.
- We will put the HTML content in the .h file on the Arduino IDE. See the next step.
Programming ESP32 S3
- Open the Arduino IDE and create a new sketch. Give it a name, for example, newbiely.com.ino.
- Copy the code provided below and paste it to the created file.
/*
* This ESP32 S3 code was developed by newbiely.com
*
* This ESP32 S3 code is made available for public use without any restriction
*
* For comprehensive instructions and wiring diagrams, please visit:
* https://newbiely.com/tutorials/esp32-s3/esp32-s3-web-server
*/
/*
* This ESP32-S3 code is created by esp32io.com
*
* This ESP32-S3 code is released in the public domain
*
* For more detail (instruction and wiring diagram), visit https://esp32io.com/tutorials/esp32-s3-web-server
*/
#include <DIYables_ESP32_WebServer.h>
#include "index.h"
// WiFi credentials
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// Create web server instance
DIYables_ESP32_WebServer server;
float getTemperature() {
// YOUR SENSOR IMPLEMENTATION HERE
// simulate the temperature value
float temp_x100 = random(0, 10000); // a random value from 0 to 10000
return temp_x100 / 100; // return the simulated temperature value from 0 to 100 in float
}
// Page handlers
void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
server.sendResponse(client, webpage);
}
void handleTemperature(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
float temperature = getTemperature();
// Format the temperature with two decimal places
String temperatureStr = String(temperature, 2);
server.sendResponse(client, temperatureStr.c_str(), "text/plain");
}
void setup() {
Serial.begin(9600);
delay(1000);
Serial.println("ESP32 S3 Web Server");
// Configure routes
server.addRoute("/", handleHome);
server.addRoute("/temperature", handleTemperature);
// Start web server with WiFi connection
server.begin(WIFI_SSID, WIFI_PASSWORD);
}
void loop() {
server.handleClient();
}
- Change the WiFi information (SSID and password) in the code to yours
- Create the index.h file On Arduino IDE by:
- Either click on the button just below the serial monitor icon and choose New Tab, or use Ctrl+Shift+N keys.
- Give file's name index.h and click OK button
- Copy the below code and paste it to the index.h.
/*
* This ESP32 S3 code was developed by newbiely.com
*
* This ESP32 S3 code is made available for public use without any restriction
*
* For comprehensive instructions and wiring diagrams, please visit:
* https://newbiely.com/tutorials/esp32-s3/esp32-s3-web-server
*/
#ifndef WEBPAGE_H
#define WEBPAGE_H
const char* webpage = R"=====(
REPLACE_YOUR_HTML_CONTENT_HERE
)=====";
#endif
- Replace the line REPLACE_YOUR_HTML_CONTENT_HERE by your HTML content you prepared before. There is no problem with new line character. The below is an example of index.h file:
/*
* This ESP32 S3 code was developed by newbiely.com
*
* This ESP32 S3 code is made available for public use without any restriction
*
* For comprehensive instructions and wiring diagrams, please visit:
* https://newbiely.com/tutorials/esp32-s3/esp32-s3-web-server
*/
#ifndef WEBPAGE_H
#define WEBPAGE_H
const char* webpage = R"=====(
<!DOCTYPE html>
<html>
<head>
<title>ESP32 S3 Temperature</title>
</head>
<body>
<h1>ESP32 S3 Temperature</h1>
<p>Temperature: <span style="color: red;"><span id="temperature">Loading...</span> ℃</span></p>
<script>
function fetchTemperature() {
fetch("/temperature")
.then(response => response.text())
.then(data => {
document.getElementById("temperature").textContent = data;
});
}
fetchTemperature();
setInterval(fetchTemperature, 4000); // Update temperature every 4 seconds
</script>
</body>
</html>
)=====";
#endif
- Now you have the code in two files: newbiely.com.ino and index.h
- Click Upload button on Arduino IDE to upload code to ESP32 S3
- Access the web page of ESP32 S3 board via web browser as before. You will see it as below:
※ NOTE THAT:
In the above codes:
- The HTML code is designed to update the temperature in the background at regular intervals, currently set to every 4 seconds in the code. This means that the temperature value is automatically refreshed without the need to manually reload the webpage. You can adjust the update interval in the code to suit your preferences.
- ESP32 S3 code serves two requests from the web browser.
- One request to return the HTML content of the webpage
- The other to return the temperature value requested by the webpage in the background
For a more comprehensive and detailed illustration, please refer to the ESP32 S3 - DS18B20 Temperature Sensor via Web tutorial
※ NOTE THAT:
- If you make changes to the HTML content within the index.h file but don't modify anything in the newbiely.com.ino file, the Arduino IDE won't refresh or update the HTML content when you compile and upload the code to the ESP32 S3.
- To force the Arduino IDE to update the HTML content in this situation, you need to make a modification in the newbiely.com.ino file. For example, you can add an empty line or insert a comment. This action triggers the IDE to recognize that there have been changes in the project, ensuring that your updated HTML content gets included in the upload.
ESP32 S3 Web Server - Multiple Pages
Check out this ESP32 S3 - Web Server Multiple Pages tutorial.