How to Create Your Own Webserver Using ESP32

The ESP32 is a versatile, low-cost microcontroller with integrated Wi-Fi and Bluetooth. One of its most popular applications is acting as a standalone webserver. This allows you to host a small website directly on the chip to monitor sensor data or control hardware like LEDs and motors from any device on your network.

What You Will Need

• An ESP32 Development Board
• Micro-USB cable
• Arduino IDE installed on your computer
• A local Wi-Fi connection

Step 1: Setting Up the Arduino IDE

To program the ESP32, you need to add the board support to your Arduino IDE. Go to File > Preferences and add the following URL to the "Additional Boards Manager URLs" field:

https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_index.json

Next, go to Tools > Board > Boards Manager, search for "ESP32," and install the latest version.

Step 2: The Webserver Code

Below is a simple script that sets up a basic webserver. It will display a "Hello World" message and show the uptime of the device. Replace YOUR_SSID and YOUR_PASSWORD with your actual Wi-Fi credentials.

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

const char* ssid = "YOUR_SSID";
const char* password = "YOUR_PASSWORD";

WebServer server(80);

void handleRoot() {
  server.send(200, "text/html", "<h1>ESP32 Webserver</h1><p>Hello from your ESP32!</p>");
}

void setup() {
  Serial.begin(115200);
  WiFi.begin(ssid, password);
  
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting...");
  }
  
  Serial.println(WiFi.localIP());
  server.on("/", handleRoot);
  server.begin();
}

void loop() {
  server.handleClient();
}

Step 3: Uploading and Testing

Connect your ESP32 to your computer and select your board model under Tools > Board. Click the Upload button. Once the upload is complete, open the Serial Monitor (set to 115200 baud).

After the ESP32 connects to Wi-Fi, it will print an IP address (e.g., 192.168.1.50). Type this IP address into any web browser on the same network to see your live webserver!

Customizing Your Server

You can expand this project by adding more routes using server.on() or by serving complex HTML/CSS files stored on the ESP32's SPIFFS (Serial Peripheral Interface Flash File System). This allows for interactive dashboards and real-time data visualization.

Creating an ESP32 webserver is the first step toward building a fully integrated smart home system. With its built-in Wi-Fi, the possibilities for DIY IoT projects are endless.