🌐 Control Your LED from a Web Server Using ESP32 Introduction – ██FR█████ █INTELL███████████

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