This content originally appeared on DEV Community and was authored by Mohamed Ahmed
Introduction
Welcome back, makers! 👋
So far, we’ve learned how to blink an LED, connect an external one, and control it using a button. Now, it’s time to make things even more exciting — we’ll control the LED using a simple web interface hosted directly on your ESP32!
By the end of this tutorial, you’ll be able to open a webpage on your phone or computer and turn the LED ON or OFF wirelessly.
🧰 What You’ll Need
- - ESP32 development board (e.g., ESP32 DevKit C)
- - 1 × LED (any color)
- - 1 × 220 Ω resistor
- - Breadboard and jumper wires
- - Arduino IDE installed and configured
- - A Wi-Fi network (SSID and password)
⚡ Step 1: Breadboard/Circuit Setup
| Component | ESP32 Pin | Description |
|---|---|---|
| LED (anode – long leg) | GPIO 4 | Digital output pin |
| LED (cathode – short leg) | GND | Ground |
| Resistor (220 Ω) | In series with LED | Limits current |
💡 Use the same wiring as in the previous post — we’ll just control it differently this time.
💻 Step 2: Write the Code
Open your Arduino IDE and paste the following code:
#include <WiFi.h>
// Replace with your network credentials
const char* ssid = "YOUR_WIFI_NAME";
const char* password = "YOUR_WIFI_PASSWORD";
WiFiServer server(80); // Port 80 for HTTP
int ledPin = 4; // GPIO 4 for LED
void setup() {
Serial.begin(115200);
pinMode(ledPin, OUTPUT);
digitalWrite(ledPin, LOW);
Serial.println("Connecting to WiFi...");
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected!");
Serial.print("IP address: ");
Serial.println(WiFi.localIP()); // Your web server address
server.begin();
}
void loop() {
WiFiClient client = server.available(); // Listen for incoming clients
if (client) {
Serial.println("New Client Connected.");
String request = client.readStringUntil('\r');
Serial.println(request);
client.flush();
// Control LED
if (request.indexOf("/LED=ON") != -1) {
digitalWrite(ledPin, HIGH);
} else if (request.indexOf("/LED=OFF") != -1) {
digitalWrite(ledPin, LOW);
}
// Build Web Page
String html = "<!DOCTYPE html><html>";
html += "<head><meta name='viewport' content='width=device-width, initial-scale=1'>";
html += "<title>ESP32 LED Control</title></head>";
html += "<body style='text-align:center; font-family:sans-serif;'>";
html += "<h2>ESP32 Web LED Controller 💡</h2>";
html += "<p><a href='/LED=ON'><button style='padding:10px 20px; background:green; color:white; border:none;'>TURN ON</button></a></p>";
html += "<p><a href='/LED=OFF'><button style='padding:10px 20px; background:red; color:white; border:none;'>TURN OFF</button></a></p>";
html += "</body></html>";
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
client.println();
client.println(html);
client.stop();
Serial.println("Client disconnected.");
}
}
🧠 How It Works
- The ESP32 connects to your Wi-Fi network using your SSID and password.
- It starts a simple web server that listens for incoming connections on port 80.
- When you open the ESP32’s IP address in your browser, it serves a web page with two buttons.
- Clicking TURN ON or TURN OFF sends a request (/LED=ON or /LED=OFF) that toggles the LED.
🖥️ Step 3: Upload and Test
- - Connect your ESP32 to your computer.
- - Select your board and port in the Arduino IDE.
- - Replace YOUR_WIFI_NAME and YOUR_WIFI_PASSWORD with your Wi-Fi credentials.
- - Click Upload.
- - Open Serial Monitor (115200 baud).
- - After connecting, note the IP address displayed (e.g., 192.168.0.105).
- - Type that IP address in your browser — you’ll see your control page!
Click the buttons — your LED should respond instantly! ⚡
⚡ Troubleshooting
1.No IP address shown?
- Double-check your Wi-Fi name and password.
2.Page not loading?
- Ensure your computer/phone is on the same Wi-Fi network as your ESP32.
3.LED not turning on?
- Verify your wiring and GPIO pin number in the code.
🎯 What’s Next
You’ve now built your first IoT web interface! 🌍
✅ Connected ESP32 to Wi-Fi
✅ Hosted a mini web server
✅ Controlled hardware from a browser
In the next post, we’ll go further — read sensor data (like temperature or light) and display it on your web dashboard in real time. 📊
💬 Your Turn
Did you manage to control your LED from your browser? 💡
Share your setup, screenshots, or questions in the comments — let’s keep learning and building together! 🙌
This content originally appeared on DEV Community and was authored by Mohamed Ahmed
Mohamed Ahmed | Sciencx (2025-10-24T14:00:00+00:00) 🌐 Control Your LED from a Web Server Using ESP32 Introduction. Retrieved from https://www.scien.cx/2025/10/24/%f0%9f%8c%90-control-your-led-from-a-web-server-using-esp32-introduction/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.