Blog
ESP32 HTTP Server: Web UI, REST, WebSockets
Turning an ESP32 into a web server — control pages, JSON APIs, live updates — is the fastest way to make a project feel finished. Sketch and test the whole flow in the free ESP32 simulator before the first browser tab.
Can ESP32 Host a Web Server?
Yes — that’s one of its most useful tricks. WebServer from the Arduino core comes up in a handful of lines, and AsyncWebServer handles several browsers without blocking loop(). If your search was “how to make webserver to control esp32 device”, the answer is exactly that: a WebServer with routes for /, /on and /off.
What Is a ESP32 Web Server, Anyway?
It’s a tiny HTTP server living on the chip: a TCP listener on port 80, a request parser, and handlers that answer with HTML, JSON, or files. No OS, no Apache — the whole stack fits in a few hundred KB of flash. What it isn’t: a replacement for a cloud host. What it is: a control panel for your device that any browser on the LAN can open.
How Do I Build a Web UI on an ESP32?
Write HTML as a PROGMEM string or put files on LittleFS, keep the CSS inline, and use fetch() in the page to call your /api routes. Yes, the ESP32 can make colored html buttons — HTML is just strings, styling costs nothing extra. One page, one script, a few endpoints: that’s the whole UI.
How to Serve Static Files from an ESP32?
LittleFS plus one line: server.serveStatic(“/”, LittleFS, “/”); then upload files with the Arduino Filesystem uploader plugin. Pre-compress with gzip and serve .gz files for noticeably faster loads. Static files beat PROGMEM strings once a page grows past a screen or two.
How to Build a REST API on an ESP32?
Register routes with server.on(“/api/temp”, HTTP_GET, handler) and answer application/json; read POST bodies via arg(“plain”). People searching “how to make http web requests esp32” usually mean the outbound direction — that’s HTTPClient.get(), same chip, opposite way. Add CORS headers if a browser page calls your API.
Does ESP32 Support WebSockets?
Yes — AsyncWebServer includes WebSocket support, and ws.textAll() pushes updates to every connected client at once, which beats polling for dashboards. A realistic limit is a handful of concurrent clients — fine for a control panel, not a chat app. My ESP32-CAM fed two browser tabs a video stream while a third polled /api/status without complaint.
How Does an ESP32 Redirect Work?
Two lines: server.sendHeader(“Location”, “/login”); server.send(302, “”, “”); — the browser follows the Location header. There’s also server.sendRedirect(“/”), which does the same. The classic mistake is sending 200 first and expecting the browser to move on; it won’t.
Can the ESP32 Send a 200 Response and Then Redirect?
Not as one HTTP response — a 200 means “here’s your content” and a 302 means “go elsewhere”; they’re mutually exclusive. What you can do: send 200 with a meta-refresh or location.replace() in the page, so the client shows success and then moves on. That pattern fits form submissions well.
How to Add Pan and Tilt to ESP32-CAM Web Server?
Two servos on any free GPIOs — pan and tilt — plus a web page with sliders that POST angle values. The handler writes servo.write(angle) with a small delay so the servo doesn’t receive 60 updates per second. The stock ESP32-CAM web server example is a fine base; the MJPEG stream route stays untouched. If the page stalls, the WiFi FAQ has the link-side fixes.
How to Keep an ESP32 Web Server Secure?
Password it — server.auth() or authBasic gives you a login prompt with three lines of code. Don’t forward port 80 to the internet without a strong password; the whole internet will knock on it within hours. For anything public, prefer a tunnel or MQTT. It’s a demo-class device; keep the stakes honest.
Serve a Real Page From an ESP32 — In Your Browser
An ESP32 web server is not a diagram — it boots, joins, and hands you a URL. Run it here:
- HTTP server on ESP32 — a genuine server you click into from inside the simulator.
ESP32 HTTP Server
Connecting to WiFi
.... Connected!
Server started at: http://192.168.1.42/
Open the IoT Gateway link to access it from your browser.That last line is the part tutorials skip: the IoT Gateway link opens the served page, so you see both sides — firmware output on the Serial Monitor, the actual web UI in the canvas. The same sketch structure (route handlers in server.on()) is what you flash to real hardware.