ESP32 S3 UNO - Web Server

Hardware Preparation

Or you can buy the following kits:

ESP32 S3 Uno Pinout

This project needs no extra wiring, because the web server only uses the board's built-in WiFi. The pinout image below is still handy later, when you connect a real sensor or an LED to the Uno header pins.

Showing a Simple Web Page from the ESP32 S3 Uno

The best way to start is a page that only says hello. It proves that WiFi, the library and your browser all work together before you add any real data.

The sketch starts a web server on the ESP32 S3 Uno and waits for HTTP requests. When a browser asks for the home page, the board sends back an HTTP header and a short HTML body with a greeting. The DIYables ESP32 WebServer library does the WiFi connection and the request parsing for you.

Detailed Instructions

1. New to the ESP32 S3 Uno? Follow ESP32 S3 Uno - Getting Started first.
2. Connect the board to your computer with a USB Type-C cable.
3. Open Arduino IDE, choose the ESP32S3 Dev Module board and the correct COM port.
4. Open the Library Manager by clicking the Library Manager icon on the left side of Arduino IDE.
5. Find the library: search for "DIYables ESP32 WebServer" and pick the Web Server library made by DIYables.
6. Install it by clicking the Install button.

• Search for DIYables ESP32 WebServer created by DIYables.io and click the Install button.

1. Copy the code above and open it in Arduino IDE.
2. Add your WiFi details: put your own SSID and password in place of YOUR_WIFI_SSID and YOUR_WIFI_PASSWORD.
3. Upload the code by clicking the Upload button.
4. Open the Serial Monitor and check the output. It looks like this:

1. Open the page: type the IP address you see into the address bar of a browser on your phone or computer. The Serial Monitor then shows the request:

1. Check the browser: you see a very simple page with the text "Hello, ESP32 S3 Uno!".

1. Tip: Bookmark the board's IP address in your browser. You will open it many times while you build your project.

Reading the Sensor Value from the ESP32 S3 Uno via Web

Now the page shows real data. This is the base of every monitoring project, such as a weather station or a room thermometer.

The sketch below builds the HTML page on each request and puts the temperature value inside it. To keep the example free of wiring, getTemperature() returns a random value from 0 to 100. Replace the body of this function with your real sensor code later.

Detailed Instructions

1. New to the ESP32 S3 Uno? Follow ESP32 S3 Uno - Getting Started first.
2. Copy the code above and open it in Arduino IDE.
3. Add your WiFi details (SSID and password).
4. Upload the code to the ESP32 S3 Uno.
5. Open the IP address in your web browser. You see a simple page with the temperature value:

1. Tip: The value changes only when you reload the page. The next part of this tutorial shows how to update it in the background.

If you want a nicer looking page with a real user interface, see the "Separating HTML Content" section below.

Controlling the ESP32 S3 Uno via Web

Reading a value is easy, because the board only answers. Control is a bit harder, because the ESP32 S3 Uno must first understand what the browser asks for and then act on it.

Here is what the code does to control a device from a web page:

1. It starts a web server that listens for HTTP requests.
2. It reads the HTTP request from the browser and finds the command in the path or in the query string, like /led?state=on.
3. It drives the connected device (LED, relay, servo…) to match the command.
4. It sends an HTTP response back. If you want, the response can also hold an HTML page that shows the new state.

The guides below use the same DIYables web server library and show full working projects. When you follow them on the ESP32 S3 Uno, use the Uno header pins and write their GPIO numbers in code (for example, D7 is GPIO14).

• Control an LED via web
• Control a relay via web
• Control a servo motor via web
• Control a robot car via web

Separating HTML Content into Another File on Arduino IDE

A small page fits fine inside the sketch, as in the examples above. But a good looking page with a lot of HTML, CSS and JavaScript quickly turns your code into a mess of quotes and += lines.

The clean way is to split the project into two files:

• The ESP32 S3 Uno code stays in the .ino file.
• The web page (HTML, CSS and JavaScript) goes into a .h file. You can then change the design without touching the board logic.

You do this in two steps: first you prepare the HTML content, then you program the ESP32 S3 Uno.

Preparing HTML Content

It is much faster to design the page on your computer than to upload code again and again. Build it first, then move it into Arduino IDE.

1. Create an HTML file on your computer with your page design (HTML, CSS and JavaScript).
2. Where the page should show data from the ESP32 S3 Uno, type any sample value for now.
3. Open the file in your browser, test it and change it until you like it.
4. Copy the HTML content. You will put it in a .h file in the next step.

Programming the ESP32 S3 Uno

The sketch below serves two routes. The / route sends the web page, and the /temperature route sends only the temperature value as plain text. The JavaScript in the page calls /temperature every 4 seconds, so the value updates without a page reload.

1. Create a new sketch in Arduino IDE and give it a name, for example newbiely.com.ino.
2. Paste the code below into the new file.

1. Add your WiFi details (SSID and password) in the code.
2. Add a new file: click the button just below the Serial Monitor icon and choose New Tab, or press Ctrl+Shift+N.

1. Name the file index.h and click the OK button.

1. Paste the template below into index.h.

1. Insert your page: replace the line REPLACE_YOUR_HTML_CONTENT_HERE with the HTML you prepared. New lines are fine, because the template uses a raw string. Here is a full example of index.h:

1. Check the files: your sketch now has two tabs, newbiely.com.ino and index.h.
2. Upload the code by clicking the Upload button.
3. Open the page in your browser with the board's IP address, as before. It looks like this:

1. Tip: To change how often the page updates, edit the 4000 (milliseconds) in setInterval(fetchTemperature, 4000) inside index.h.

For a full project with a real DS18B20 sensor, see the DS18B20 temperature sensor via web guide, and use the ESP32 S3 Uno GPIO numbers for the wiring.

ESP32 S3 Uno Web Server - Multiple Pages

A real project often needs more than one page, plus error pages for wrong links. The same library handles this with one route per page. See the web server with multiple pages guide. Its code runs on the ESP32 S3 Uno without changes.

FAQ

Do I need a WiFi module to make a web server with the ESP32 S3 Uno?

No. The ESP32 S3 Uno has WiFi built into the chip. You only need the board, a USB Type-C cable and a 2.4 GHz WiFi network. The board cannot join a 5 GHz-only network.

Can I use the UNO R4 WiFi web server code on the ESP32 S3 Uno?

Not directly. The UNO R4 WiFi code uses WiFiS3.h and the UnoR4WiFi_WebServer library. On the ESP32 S3 Uno, use WiFi.h and the DIYables ESP32 WebServer library, as in this tutorial. The route handlers look almost the same, so moving a project over is easy.

How do I find the IP address of my ESP32 S3 Uno web server?

Open the Serial Monitor at 9600 baud and press the RESET button on the board. The library prints the line "Web Server Address", followed by the IP. You can also find the board in your router's list of connected devices.

How can I open the web page from outside my home network?

By default, the page works only on your local network. To reach it from the internet, you need port forwarding on your router or a cloud service. Be careful, because an open web server can be a security risk. Add a password first.

What if my project needs more pins than the Uno headers give?

The ESP32 S3 Uno has two extra rows of holes with more GPIOs. GPIO15 and GPIO16 support I/O, PWM and analog. GPIO45 and GPIO35 to GPIO42 support I/O and PWM, and GPIO47 and GPIO48 are output only with PWM. Solder pin headers to use them and write the GPIO number in code. For a web project that controls many LEDs or relays, GPIO35 to GPIO42 are a good first choice, and GPIO15/GPIO16 are best for analog sensors. Be careful with two things. First, GPIO47 and GPIO48 may run at 1.8V instead of 3.3V on some modules (especially ones with "V" in the name, like R8V or R16V), so 3.3V devices can be damaged or act strangely. Second, GPIO0, GPIO3 (D6), GPIO45 and GPIO46 (D9) are boot strapping pins, and a wrong connection can stop the board from booting or uploading code. Use the other extra pins first.

Can I use 5V sensors with my ESP32 S3 Uno web server?

You can power a 5V module from the 5V pin, but ESP32 S3 Uno pins are NOT 5V tolerant. If a 5V signal goes into a GPIO, use a voltage divider or a level shifter to bring it down to 3.3V.

Troubleshooting

Learn More

• ESP32 S3 UNO - WebSocket
• ESP32 S3 UNO - Controls Car via Web