Create a Web Server with ESP32

Difficulty Level: Intermediate

The ESP32 is a powerful microcontroller with built-in Wi-Fi capabilities, allowing you to create a web server to control devices or display sensor data. In this tutorial, we will set up a simple web server that serves a web page accessible from any device on the same network.

Components Required

• ESP32 development board
• USB cable to connect ESP32 to your computer
• Arduino IDE installed with ESP32 board support

Wiring the Circuit

No additional wiring is required for this project if you are only serving a web page. The ESP32 will connect to your Wi-Fi network.

Installing ESP32 Board in Arduino IDE

1. Open the Arduino IDE.
2. Go to File > Preferences.
3. In the Additional Board Manager URLs field, add the following URL:
4. https://dl.espressif.com/dl/package_esp32_index.json
5. Go to Tools > Board > Board Manager.
6. Search for "ESP32" and install the package.

Arduino Code

The following code creates a simple web server that serves a webpage with a button to control an LED connected to pin 2 of the ESP32:

#include <WiFi.h>

// Replace with your network credentials
const char* ssid = "YOUR_SSID";
const char* password = "YOUR_PASSWORD";

WiFiServer server(80); // Create a server that listens on port 80
const int ledPin = 2; // LED connected to GPIO 2

void setup() {
  Serial.begin(115200);
  pinMode(ledPin, OUTPUT);
  digitalWrite(ledPin, LOW); // Turn the LED off

  // Connect to Wi-Fi
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi...");
  }
  Serial.println("Connected to WiFi");
  Serial.print("IP Address: ");
  Serial.println(WiFi.localIP());

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

void loop() {
  WiFiClient client = server.available(); // Check for incoming clients
  if (client) {
    String currentLine = ""; // Variable to store incoming data
    while (client.connected()) {
      if (client.available()) {
        char c = client.read(); // Read a byte
        Serial.write(c); // Echo the byte back to the serial monitor
        currentLine += c; // Add the byte to the current line
        // If the line is complete
        if (c == '\n') {
          // Send a response to the client
          if (currentLine.length() == 0) {
            // Send HTML response
            client.println("HTTP/1.1 200 OK");
            client.println("Content-type:text/html");
            client.println();
            client.println("");
            client.println("
ESP32 Web Server
");
            client.println("
LED Control:
");
            client.println("Toggle LED");
            client.println("");
            client.println("");
            break;
          } else if (currentLine.endsWith("GET /toggle")) {
            digitalWrite(ledPin, !digitalRead(ledPin)); // Toggle the LED state
          }
          currentLine = ""; // Clear the current line
        }
      }
    }
    client.stop(); // Close the connection
    Serial.println("Client Disconnected");
  }
}
        

How the Code Works

• The code begins by including the WiFi.h library and defining the Wi-Fi credentials.
• A server object is created, listening on port 80.
• In the setup() function, the ESP32 connects to the Wi-Fi network and starts the server.
• In the loop() function, the server checks for incoming client connections. When a client connects, it reads the incoming request.
• If the request is for the HTML page, it sends back the page with a button to toggle the LED. When the button is pressed, it sends a request to toggle the LED's state.

Testing the Web Server

Follow these steps to test the web server:

1. Upload the code to the ESP32 using the Arduino IDE.
2. Open the Serial Monitor to view the ESP32's IP address.
3. Enter the IP address in a web browser on the same network as the ESP32.
4. You should see the web page with a button to toggle the LED.
5. Click the button to turn the LED on or off.

Conclusion

In this tutorial, you created a simple web server using the ESP32, enabling you to control an LED via a web interface. This project can be expanded to include various sensors and actuators, allowing for remote monitoring and control of devices over the internet.