Build a Simple Web Server with ESP32 to Control an LED

By DevNode Technologies

ESP32 Setup

Introduction

The ESP32 is a powerhouse for IoT developers because it has built-in Wi-Fi and Bluetooth. In this tutorial, we won’t just blink an LED; we will build a standalone Web Server hosted entirely on the ESP32. This allows you to control the LED from your smartphone browser without paying for any cloud services.

What You Need

  • ESP32 Development Board (DOIT DevKit V1 or similar)
  • LED (Any color)
  • 330Ω Resistor
  • Breadboard & Jumper Wires

The Circuit

The wiring is simple:

  1. Connect the Long Leg (+) of the LED to GPIO 2.
  2. Connect the Short Leg (-) to the Resistor, and then to GND.

The Code

We will use the WiFi.h and WebServer.h libraries.


#include <WiFi.h>
#include <WebServer.h>

// Replace with your network credentials
const char* ssid = "YOUR_WIFI_SSID";
const char* password = "YOUR_WIFI_PASSWORD";

WebServer server(80);

const int ledPin = 2;

void handleRoot() {
  String html = "<h1>ESP32 Web Server</h1>";
  html += "<p><a href=\"/on\"><button>Turn On</button></a></p>";
  html += "<p><a href=\"/off\"><button>Turn Off</button></a></p>";
  server.send(200, "text/html", html);
}
// ... (Rest of code logic)

How to Test It

  1. Upload the code to your ESP32.
  2. Open the Serial Monitor (115200 baud).
  3. Type the IP address into your phone\'s browser.