ESP32 Web Server: Control LEDs from Any Browser

The ESP32 is powerful enough to host its own HTTP server, serving HTML pages to connected devices. This project creates a simple dashboard page with toggle buttons for three LEDs and a live temperature readout from a DHT22. Any browser on the same WiFi network can access it by typing the ESP32’s IP address — no internet or cloud service required.

What You’ll Need

• ESP32 DevKit board
• 3 LEDs (red, green, blue) + 3 × 220 Ω resistors
• DHT22 sensor + 10 kΩ pull-up resistor
• Breadboard and jumper wires
• USB-C cable + computer for programming

Step-by-Step Instructions

1. Install ESP32 in Arduino IDE: Add “https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_index.json” to Board Manager URLs. Install “esp32” by Espressif. Select board: “ESP32 Dev Module”.
2. Wire components: LEDs on GPIO 25 (red), 26 (green), 27 (blue) through 220 Ω to GND. DHT22 data to GPIO 4 with pull-up.
3. Write the server: Use the #include <WebServer.h> library. In setup(), connect to WiFi and print the IP. Register routes: GET “/” returns an HTML page with three toggle buttons. GET “/toggle/1” etc. toggles the corresponding LED and redirects back. GET “/temp” returns temperature as plain text.
4. Build the HTML: Embed a minimal HTML page in a C++ string with CSS-styled buttons. Use JavaScript fetch() to update the temperature reading every 5 seconds without reloading the page.
5. Upload and access: Upload, open Serial Monitor, note the IP address. Type it in your phone browser — the control panel appears.
6. Make the IP static: In WiFi.config(), set a fixed IP so it doesn’t change between reboots.

Safety Notes

• This server is accessible to everyone on your local network — do not use on untrusted public WiFi without adding authentication.
• The ESP32 runs at 3.3 V logic — do not connect 5 V signals to its GPIO pins.

Tips & Troubleshooting

• If the page doesn’t load, ping the ESP32 IP from your computer to confirm it’s reachable — some routers block device-to-device communication (client isolation).
• Add mDNS (WiFi.hostByName or ESPmDNS library) to access the ESP32 by name (e.g. http://esp32-home.local) instead of remembering an IP.
• Extend with a relay module to control a real appliance remotely.