ESP32 Home Automation

Controlling Relays Locally via a Built-In Web Server (No Internet Required)

1. Concept Overview

This project demonstrates how an ESP32 can be turned into a small local web server that controls a relay module, allowing you to turn appliances (lamps, fans, etc.) ON or OFF from any phone or computer connected to the same Wi-Fi network. No internet connection is required — only a Wi-Fi router.

Wi-Fi Router ESP32 (Web Server) Phone / PC (Web Browser) Relay → Lamp IP assigned HTTP request

Figure 1: ESP32 joins the home Wi-Fi network, receives an IP address, hosts a web page, and any device on the same network can control the relay through a browser.

How it works, step by step

  1. ESP32 connects to your home Wi-Fi network as a client (station mode).
  2. The router assigns an IP address to the ESP32.
  3. ESP32 runs a lightweight web server that serves a simple HTML control page.
  4. Any phone, tablet, or laptop on the same network opens that IP address in a browser.
  5. Buttons on the page send commands to the ESP32, which toggles the relay (GPIO pin) accordingly.

2. Hardware Required

ComponentPurpose
ESP32 Development BoardWi-Fi enabled microcontroller acting as the web server
Relay Module (1-channel or more)Switches AC/DC appliances ON/OFF
Jumper WiresConnect ESP32 GPIO pins to relay module
AC Appliance (e.g., lamp)Demonstration load controlled by the relay
Wi-Fi RouterProvides the local network — no internet access needed
Note: The circuit is identical to previous relay-based projects: the relay's control pin connects to an ESP32 GPIO (in this example, GPIO 13), and the relay's switching contacts are wired in series with the appliance's power line.

3. Required Libraries (Manual Installation)

Unlike most Arduino libraries that are installed automatically through the Library Manager, this project needs two libraries that must be installed manually:

Manual Installation Steps

  1. Download the ZIP files of both libraries from their official GitHub repositories.
  2. Extract each ZIP file on your computer.
  3. Open the extracted folder — inside you will find the actual library folder (do not use the outer wrapper folder).
  4. Copy that inner library folder.
  5. Navigate to your Arduino installation directory, typically under Program Files.
  6. Paste the folder inside the libraries subfolder of the Arduino IDE installation.
  7. Repeat for the second library.
  8. Restart the Arduino IDE so it detects the newly added libraries.
Important: Make sure you copy the actual library folder (the one containing .cpp and .h files), not the outer ZIP-extraction folder — otherwise the Arduino IDE will not recognize the library.

4. Example Arduino Sketch

Below is a simplified example sketch illustrating the structure used in this project. It creates a web server with a single relay control button. You can expand it by adding more GPIO pins and buttons as needed. 

#include <WiFi.h>
#include <ESPAsyncWebServer.h>

const char* ssid     = "YOUR_WIFI_SSID";
const char* password = "YOUR_WIFI_PASSWORD";

#define RELAY1 13   // GPIO connected to relay

AsyncWebServer server(80);

const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE html>
<html>
<body>
  <h2>ESP32 Relay Control</h2>
  <p>Lamp: <a href="/relay1/on">ON</a> | <a href="/relay1/off">OFF</a></p>
</body>
</html>
)rawliteral";

void setup() {
  Serial.begin(9600);
  pinMode(RELAY1, OUTPUT);
  digitalWrite(RELAY1, LOW);

  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("\nConnected!");
  Serial.println(WiFi.localIP());

  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/html", index_html);
  });

  server.on("/relay1/on", HTTP_GET, [](AsyncWebServerRequest *request){
    digitalWrite(RELAY1, HIGH);
    request->send_P(200, "text/html", index_html);
  });

  server.on("/relay1/off", HTTP_GET, [](AsyncWebServerRequest *request){
    digitalWrite(RELAY1, LOW);
    request->send_P(200, "text/html", index_html);
  });

  server.begin();
}

void loop() {
  // Nothing needed here — server runs asynchronously
}

Adding More Relays

To control additional devices, define more GPIO pins and add matching routes, for example a second relay on GPIO 12 with routes /relay2/on and /relay2/off, following the same pattern as relay 1.

5. Uploading and Testing

Follow these commands/actions one at a time:

1. Insert your Wi-Fi SSID and password into the sketch 2. Select correct ESP32 board and COM port in Arduino IDE 3. Click Upload 4. Open Serial Monitor 5. Set baud rate to 9600 6. Press the Reset (EN) button on the ESP32 7. Wait for "Connected!" message and note the IP address 8. Open a browser on phone or PC connected to same Wi-Fi 9. Enter ESP32's IP address in the address bar 10. Press Enter to load the control page
Tip: After uploading, always reset the ESP32 and reopen the Serial Monitor — otherwise you may miss the printed IP address, since the board restarts automatically after upload.

Example Output in Serial Monitor

Connecting to WiFi...
.....
Connected!
192.168.20.167

Simply type this IP address into any browser on a device connected to the same network to load the control page.

6. Expanding the Project

Once the basic single-relay setup works, you can scale it up:

Multiple Relays

  • Define extra GPIO pins for each relay
  • Add corresponding ON/OFF routes in the server
  • Update the HTML page with new buttons/links

Custom HTML Page

  • Modify the inline HTML string to add styling
  • Add labels for each connected device (e.g., "Lamp", "Fan")
  • Use icons or toggle switches for a nicer UI

7. Limitations

This setup only works within your local Wi-Fi network. Devices must be connected to the same router as the ESP32. To control devices over the internet from anywhere, a different approach (such as cloud-based MQTT or a remote server) is required — a topic for a future project.