Tutorial 5: Setting up an ESP8266 Web Server

Posted on February 3, 2017 by R-B Leave a comment |

In this tutorial, we will explore how to setup an ESP8266 web server to serve an webpage that can be displayed on a client’s browser. The client can be any other computer, smartphone, or tablet connected to the same WiFi network. The webpage will also provide an user interface to allow you to toggle an I/O pin of the ESP8266 hardware.

ESP8266 Webserver setup tutorial

Hardware Setup

There is nothing much to do in the hardware setup of this experiment. In your EasyESP-1 board, all you need to do is to connect the LD1 pin to D1 pin using a jumper cable. This will connect the LD1 LED on board to the D1 I/O pin of the ESP8266.

Hardware Setup

Software

As mentioned above, this tutorial illustrates how to create a standalone local web server using EasyESP-1. The web server will respond to a client’s request with a web page that will allow the user to toggle the LED connected to the D1 I/O pin. The first step to do that is to create a server object, which is done with the following statement.

WiFiServer server(80);

The server will respond to clients on port 80. You need to provide the credentials (network SSID and password) to connect to the chosen WiFi network. You can initiate the connection using WiFi.begin(ssid, password) function. Once connected to the network, you can find out the local IP address assigned to your ESP8266 using WiFi.localIP(). The complete code for this tutorial is posted below. The content of the webpage is defined in the string variable HTMLpage.

#include 
#include 
#include 
#include 
 
ESP8266WebServer Webserver(80);
 
// Replace with your network credentials
const char* ssid = "your network ssid";
const char* password = "password";
 
String HTMLpage = "";
int LED = D1;
 
void setup(void){
  HTMLpage += "

ESP8266 Webserver Demo (Toggle LED)

LED

";
 
  pinMode(LED, OUTPUT);
  digitalWrite(LED, LOW);
  Serial.begin(115200);
  WiFi.begin(ssid, password);
  Serial.println("");
 
  // Wait for connection
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.print("Connected to ");
  Serial.println(ssid);
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());
 
  if (MDNS.begin("esp8266", WiFi.localIP())) {
    Serial.println("MDNS responder started");
  }
 
  Webserver.on("/", [](){
    Webserver.send(200, "text/html", HTMLpage);
  });
  Webserver.on("/ledON", [](){
    Webserver.send(200, "text/html", HTMLpage+"

LED is ON

");
    digitalWrite(LED, HIGH);
    delay(1000);
  });
  Webserver.on("/ledOFF", [](){
    Webserver.send(200, "text/html", HTMLpage+"

LED is OFF

");
    digitalWrite(LED, LOW);
    delay(1000); 
  });
 
  Webserver.begin();
  Serial.println("HTTP Webserver started");
}
 
void loop(void){
  Webserver.handleClient();
}

Download Webserver Tutorial code

Output

After uploading the web server code posted above (make sure you typed in your network credentials), open a Serial Monitor window for the IP address assigned to your EasyESP-1 board. If the connection to the selected WiFi network is successful, you will see the following output on the Serial Monitor window. The IP address displayed here is the IP address of the ESP8266 web server.

Serial Monitor terminal output

Now open a browser on any computer or tablet connected to the same WiFi network and type that IP address in the URL field and hit Go. You will see the web page served by the EasyESP-1 as follows.

Web server home page

Now if you press ON button, the browser will send that info to the server, and the ESP8266 will turn ON the LED connected to D1 pin. Similarly, clicking on OFF button will turn the LED OFF.