🌐 Control Your LED from a Web Server Using ESP32 Introduction

#iot #esp32 #webserver #led

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! 🙌