Build an ESP32 Web Server with Arduino IDE (2026 Updated Guide)

/*********
 * ESP32 Standalone Web Server
 * Controls two LEDs connected to GPIO 26 and GPIO 27
 * Complete project details: https://www.randomnerdtutorials.com
 * Based on the Arduino WiFi library examples
 *********/

#include <WiFi.h>
#include <WiFiClient.h>

// ======== CONFIGURE YOUR NETWORK ========
const char* ssid = "YOUR_WIFI_NETWORK_NAME";  // Replace with your SSID
const char* password = "YOUR_WIFI_PASSWORD";   // Replace with your password

// ======== SERVER & PIN CONFIGURATION ========
WiFiServer server(80); // Set web server port to 80 (standard HTTP)

// Define GPIO pins for the outputs
const int ledPin_26 = 26;
const int ledPin_27 = 27;

// Variables to track the current state of each output
String state_26 = "off";
String state_27 = "off";

// Header variable to store HTTP request
String header;

// Timing variables for connection timeout (2000ms = 2s)
unsigned long currentTime = millis();
unsigned long previousTime = 0;
const long timeoutTime = 2000;

// ======== SETUP FUNCTION ========
void setup() {
  Serial.begin(115200); // Start serial communication for debugging

  // Initialize GPIO pins as outputs and set to LOW (OFF)
  pinMode(ledPin_26, OUTPUT);
  pinMode(ledPin_27, OUTPUT);
  digitalWrite(ledPin_26, LOW);
  digitalWrite(ledPin_27, LOW);

  // Connect to WiFi Network
  Serial.print("Connecting to ");
  Serial.println(ssid);
  WiFi.begin(ssid, password);

  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }

  // Print connection details
  Serial.println("\nWiFi connected successfully!");
  Serial.print("Board IP Address: ");
  Serial.println(WiFi.localIP()); // <- CRITICAL: You need this IP to access the server

  server.begin(); // Start the web server
}

// ======== MAIN LOOP ========
void loop() {
  WiFiClient client = server.available(); // Listen for incoming client connections

  if (client) { // A new client has connected
    Serial.println("New Client Connected.");
    String currentLine = ""; // Buffer for incoming data
    currentTime = millis();
    previousTime = currentTime;

    // Stay connected while client is active and within timeout window
    while (client.connected() && (currentTime - previousTime <= timeoutTime)) {
      currentTime = millis();

      if (client.available()) { // Data is available to read from client
        char c = client.read(); // Read one byte
        Serial.write(c);        // Echo to Serial Monitor (optional)
        header += c;            // Append to the header string

        if (c == '\n') { // End of a line in the HTTP request
          // If the line is blank, the HTTP request has ended
          if (currentLine.length() == 0) {
            // Send a standard HTTP response header
            client.println("HTTP/1.1 200 OK");
            client.println("Content-type:text/html");
            client.println("Connection: close");
            client.println(); // Blank line marks end of header

            // ======== CONTROL LOGIC ========
            // Check the request URL and control GPIOs accordingly
            if (header.indexOf("GET /26/on") >= 0) {
              Serial.println("Turning GPIO 26 ON");
              state_26 = "on";
              digitalWrite(ledPin_26, HIGH);
            } else if (header.indexOf("GET /26/off") >= 0) {
              Serial.println("Turning GPIO 26 OFF");
              state_26 = "off";
              digitalWrite(ledPin_26, LOW);
            } else if (header.indexOf("GET /27/on") >= 0) {
              Serial.println("Turning GPIO 27 ON");
              state_27 = "on";
              digitalWrite(ledPin_27, HIGH);
            } else if (header.indexOf("GET /27/off") >= 0) {
              Serial.println("Turning GPIO 27 OFF");
              state_27 = "off";
              digitalWrite(ledPin_27, LOW);
            }

            // ======== GENERATE THE HTML WEB PAGE ========
            client.println("<!DOCTYPE html><html>");
            client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
            client.println("<title>ESP32 Web Server</title>");
            client.println("<style>");
            client.println("html {font-family: Arial, sans-serif; display: inline-block; text-align: center;}");
            client.println(".button {background-color: #4CAF50; border: none; color: white; padding: 15px 32px;");
            client.println("text-decoration: none; display: inline-block; font-size: 18px; margin: 4px 2px; cursor: pointer;}");
            client.println(".button-off {background-color: #555555;}"); // Style for the OFF button
            client.println("</style></head>");
            client.println("<body>");
            client.println("<h1>ESP32 Web Server Control Panel</h1>");

            // Display control for GPIO 26
            client.println("<p>LED on GPIO 26 is: <strong>" + state_26 + "</strong></p>");
            if (state_26 == "off") {
              client.println("<p><a href=\"/26/on\"><button class=\"button\">TURN ON</button></a></p>");
            } else {
              client.println("<p><a href=\"/26/off\"><button class=\"button button-off\">TURN OFF</button></a></p>");
            }

            // Display control for GPIO 27
            client.println("<p>LED on GPIO 27 is: <strong>" + state_27 + "</strong></p>");
            if (state_27 == "off") {
              client.println("<p><a href=\"/27/on\"><button class=\"button\">TURN ON</button></a></p>");
            } else {
              client.println("<p><a href=\"/27/off\"><button class=\"button button-off\">TURN OFF</button></a></p>");
            }

            client.println("</body></html>");
            client.println(); // End of response

            break; // Exit the while loop
          } else { // If we got a newline, clear the current line buffer
            currentLine = "";
          }
        } else if (c != '\r') { // Ignore carriage return characters
          currentLine += c; // Add character to the current line
        }
      }
    }
    // Clear the header variable and close the connection
    header = "";
    client.stop();
    Serial.println("Client disconnected.");
    Serial.println();
  }
}