Arduino ESP8266 ESP-01 Web Server: Wiring, Code and Simulator

To build this Arduino ESP8266 ESP-01 Web Server project you need an Arduino Uno and an ESP-01 ESP8266 wi-fi module. AT+CIPSERVER turns the ESP-01 into a web server: its page shows the LED and switches it. Make the 5 connections in the wiring table, upload the Arduino C++ code, and open the Modules tab and press Open on the ESP-01 in the LAN browser, then click On and Off.

Open this circuit in the free Arduino Uno simulator

Parts list

QtyPartWhat it does
1Arduino Unothe microcontroller board
1ESP-01 ESP8266 Wi-Fi moduleESP8266 Wi-Fi module with the AT firmware: VCC and EN to 3.3 V (never 5 V), GND, TX → the board’s RX pin, RX ← its TX pin. Starts at 115200 baud (set 9600 here to match SoftwareSerial). AT+CWJAP="BFB-Lab","" joins the lab’s Wi-Fi; AT+CIPSTART and AT+CIPSEND fetch web pages; AT+CIPSERVER serves a page you open from the Modules tab.

Wiring

#FromTo
1Arduino Uno 3.3VESP-01 ESP8266 Wi-Fi module VCC
2Arduino Uno 3.3VESP-01 ESP8266 Wi-Fi module EN
3Arduino Uno GNDESP-01 ESP8266 Wi-Fi module GND
4Arduino Uno pin 2ESP-01 ESP8266 Wi-Fi module TX
5Arduino Uno pin 3ESP-01 ESP8266 Wi-Fi module RX

Step by step

  1. Open the simulator. Open the BitForBytes Embedded Lab in your browser and start from the Arduino Uno. No install or account is needed.
  2. Add the parts. Add an ESP-01 ESP8266 wi-fi module from the parts palette.
  3. Wire 1. Connect Arduino Uno 3.3V to ESP-01 ESP8266 Wi-Fi module VCC.
  4. Wire 2. Connect Arduino Uno 3.3V to ESP-01 ESP8266 Wi-Fi module EN.
  5. Wire 3. Connect Arduino Uno GND to ESP-01 ESP8266 Wi-Fi module GND.
  6. Wire 4. Connect Arduino Uno pin 2 to ESP-01 ESP8266 Wi-Fi module TX.
  7. Wire 5. Connect Arduino Uno pin 3 to ESP-01 ESP8266 Wi-Fi module RX.
  8. Paste the Arduino C++ code. Paste the Arduino C++ code below into the code editor.
  9. Run it. Press Run. Open the Modules tab and press Open on the ESP-01 in the LAN browser, then click On and Off.

Arduino C++ code

// ESP-01 web server: a page that switches an LED. Open it from the Modules tab's LAN browser.
// ESP-01 TX -> pin 2, RX <- pin 3, VCC and EN -> 3.3V, GND (module at 9600 baud). LED on pin 13.
#include <SoftwareSerial.h>

SoftwareSerial esp(2, 3);
const int LED = 13;

void cmd(const char *c, unsigned long ms) {
  esp.println(c);
  unsigned long t = millis();
  while (millis() - t < ms) while (esp.available()) Serial.write(esp.read());
}

void sendTo(int id, const String &s) {
  esp.print(F("AT+CIPSEND="));
  esp.print(id);
  esp.print(',');
  esp.println(s.length());
  unsigned long t = millis();
  while (millis() - t < 1000) if (esp.find('>')) break;
  esp.print(s);
  t = millis();
  while (millis() - t < 1000) if (esp.find("SEND OK")) break;
}

void setup() {
  Serial.begin(115200);
  pinMode(LED, OUTPUT);
  esp.begin(9600);
  delay(500);
  cmd("ATE0", 300);
  cmd("AT+CWMODE=1", 300);
  cmd("AT+CWJAP=\"BFB-Lab\",\"\"", 3000);
  cmd("AT+CIPMUX=1", 300);
  cmd("AT+CIPSERVER=1,80", 300);
  cmd("AT+CIFSR", 300);
  Serial.println(F("\nServer ready: open it from the Modules tab."));
}

void loop() {
  if (!esp.find("+IPD,")) return;
  int id = esp.parseInt();
  esp.find(':');
  String line = esp.readStringUntil('\n');  // GET /on HTTP/1.1
  Serial.print(F("Request: "));
  Serial.println(line);
  if (line.indexOf("/on") > 0) digitalWrite(LED, HIGH);
  if (line.indexOf("/off") > 0) digitalWrite(LED, LOW);
  while (esp.available()) esp.read();

  String body = F("<h1>Uno + ESP-01</h1><p>LED is ");
  body += digitalRead(LED) ? F("ON") : F("OFF");
  body += F("</p><p><a href='/on'>On</a> | <a href='/off'>Off</a></p>");
  String page = F("HTTP/1.1 200 OK\r\nContent-Type: text/html\r\nConnection: close\r\n\r\n");
  page += body;
  sendTo(id, page);
  esp.print(F("AT+CIPCLOSE="));
  esp.println(id);
}

What to try

Open the Modules tab and press Open on the ESP-01 in the LAN browser, then click On and Off.

Frequently asked questions

How do I wire the ESP8266 ESP-01 Web Server project on an Arduino Uno?

Make 5 connections: Arduino Uno 3.3V to ESP-01 ESP8266 Wi-Fi module VCC; Arduino Uno 3.3V to ESP-01 ESP8266 Wi-Fi module EN; Arduino Uno GND to ESP-01 ESP8266 Wi-Fi module GND; Arduino Uno pin 2 to ESP-01 ESP8266 Wi-Fi module TX; Arduino Uno pin 3 to ESP-01 ESP8266 Wi-Fi module RX.

What parts do I need for this Arduino project?

An Arduino Uno and an ESP-01 ESP8266 wi-fi module.

Can I simulate this Arduino project online for free?

Yes. The BitForBytes Embedded Lab runs this exact circuit and Arduino C++ code in your browser for free, with no install and no hardware. The sketch is compiled with the real Arduino toolchain and runs on an emulated ATmega328P.

What does the code do?

AT+CIPSERVER turns the ESP-01 into a web server: its page shows the LED and switches it.

How do I make an ESP8266 web server with AT commands?

AT+CIPMUX=1 for multiple connections, then AT+CIPSERVER=1,80. Each request arrives as +IPD,<link>,<length>:…; answer with AT+CIPSEND=<link>,<length>, send the HTTP response, then AT+CIPCLOSE=<link>.

More Arduino Uno projects