DEV Community

Cover image for 🌐 Control Your LED from a Web Server Using ESP32 Introduction
Mohamed Ahmed
Mohamed Ahmed

Posted on • Edited on

🌐 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

  1. - ESP32 development board (e.g., ESP32 DevKit C)
  2. - 1 Γ— LED (any color)
  3. - 1 Γ— 220 Ξ© resistor
  4. - Breadboard and jumper wires
  5. - Arduino IDE installed and configured
  6. - 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.");
  }
}
Enter fullscreen mode Exit fullscreen mode

🧠 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

  1. - Connect your ESP32 to your computer.
  2. - Select your board and port in the Arduino IDE.
  3. - Replace YOUR_WIFI_NAME and YOUR_WIFI_PASSWORD with your Wi-Fi credentials.
  4. - Click Upload.
  5. - Open Serial Monitor (115200 baud).
  6. - After connecting, note the IP address displayed (e.g., 192.168.0.105). Your IDE should look like this
  7. - Type that IP address in your browser β€” you’ll see your control page!

Your web page should look like this

Click the buttons β€” your LED should respond instantly! ⚑

Your ESP321 should look like this
⚑ 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! πŸ™Œ

Top comments (0)