You may already know that the ubiquitous ESP8266 is designed to connect to WiFi, but did you know it can also act as a web server?
In this tutorial you will learn how to turn a Wemos D1 Mini into a web server using the Arduino IDE and just 17 lines of code.
If you prefer using Python then you can also use MicroPython, check out this tutorial instead.
This is a basic implementation which is suitable for beginners or anyone who wants a quick and easy web server running on their ESP8266.
Table of Contents
Prerequisite
For this tutorial you will also need an ESP8266 board, a copy of the Arduino IDE and a USB cable to connect the board to your computer.
For the ESP8266 board I usually recommend the Wemos D1 Mini as it is compact and not so expensive, check the latest price on Amazon here.
If you didn’t use an ESP8266 with Arduino before then I would recommend reading through this tutorial first.
How To Make A Web Server using Arduino and ESP8266
The ESP8266 is a very powerful little chip and it is especially easy to use since Arduino was ported to it.
Making a simple web server is super-simple!
But why might we want to do this?
There are a number of reasons why you might want to serve a web page using ESP8266. For example it can be really useful to be able to access settings and information on your ESP8266 remotely using a browser.
You can do loads of cool stuff such as display sensor values on your ESP8266 web pages or have buttons that change settings.
This article will teach you how to serve a basic web page from ESP8266. To begin lets go ahead and open a new document in Arduino.
The first thing we want to do is add some includes in order to link the necessary libraries.
Adding the includes
We will be using something called the ESP8266 community library, which is not a standard library that comes with the Arduino IDE.
Don’t worry though, it is really easy to add this library to the IDE! If you haven’t done so already, go ahead and add the ESP8266 community library.
We will add the ESP8266WiFi and ESP8266WebServer libraries from the ESP8266 community library.
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
void setup() {
// put your setup code here, to run once:
}
void loop() {
// put your main code here, to run repeatedly:
}Define WiFi credentials
Next we will define our WiFi credentials.
You will need to replace YOUR SSID and YOUR PASSWORD with your own WiFi credentials.
See lines 5 to 6:
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
// Set WiFi credentials
#define WIFI_SSID "YOUR SSID"
#define WIFI_PASS "YOUR PASSWORD"
void setup() {
// put your setup code here, to run once:
}
void loop() {
// put your main code here, to run repeatedly:
}Create a new web server
We now need to create a new instances of the ESP8266WebServer. We will call it webserver and assign it to the default port 80.
You can choose any port you like, but web browsers default to 80 if a port is not specified. Therefore it is best to leave this as port 80 unless you have a specific reason to change it.
See line 9:
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
// Set WiFi credentials
#define WIFI_SSID "YOUR SSID"
#define WIFI_PASS "YOUR PASSWORD"
// Create a new web server
ESP8266WebServer webserver(80);
void setup() {
// put your setup code here, to run once:
}
void loop() {
// put your main code here, to run repeatedly:
}Handle the pages
When the web server receives a request it will call a particular function that we can define, depending on the request.
Here we will define a function that is called when a client navigates to the root. We will also define a function to handle a 404 error triggered by an unknown URL being entered.
See lines 12 to 19:
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
// Set WiFi credentials
#define WIFI_SSID "YOUR SSID"
#define WIFI_PASS "YOUR PASSWORD"
// Create a new web server
ESP8266WebServer webserver(80);
// Handle Root
void rootPage() {
webserver.send(200, "text/plain", "Check out https://siytek.com !");
}
// Handle 404
void notfoundPage(){
webserver.send(404, "text/plain", "404: Not found");
}
void setup() {
// put your setup code here, to run once:
}
void loop() {
// put your main code here, to run repeatedly:
}Begin the serial port
Now we can move on to our setup function. This is usually created when a new file is create in Arduino, if you can add it if you don’t already have it.
void setup()
{
}The following code should be included inside of the void setup() function.
Firstly we will define the serial port in order to receive a message that states the IP address of our web server, once it connects to the network.
See line 24 to 25:
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
// Set WiFi credentials
#define WIFI_SSID "YOUR SSID"
#define WIFI_PASS "YOUR PASSWORD"
// Create a new web server
ESP8266WebServer webserver(80);
// Handle Root
void rootPage() {
webserver.send(200, "text/plain", "Check out https://siytek.com !");
}
// Handle 404
void notfoundPage(){
webserver.send(404, "text/plain", "404: Not found");
}
void setup()
{
// Setup serial port
Serial.begin(115200);
Serial.println();
}
void loop() {
// put your main code here, to run repeatedly:
}Connect to WiFi
Now we can begin the WiFi connection using the credential definitions specified at the beginning of the program.
After we start the WiFi connection we will put the program into a continuous while loop that iterates until WL_CONNECTED is set. This occurs when the ESP is assigned and IP address.
As soon as the WL_CONNECTED flag is set, the while loop exits and the IP address is printed to the serial console. We can make a note of it so that we can use it to navigate to our hosted web page.
See line 28 to 33:
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
// Set WiFi credentials
#define WIFI_SSID "YOUR SSID"
#define WIFI_PASS "YOUR PASSWORD"
// Create a new web server
ESP8266WebServer webserver(80);
// Handle Root
void rootPage() {
webserver.send(200, "text/plain", "Check out https://siytek.com !");
}
// Handle 404
void notfoundPage(){
webserver.send(404, "text/plain", "404: Not found");
}
void setup()
{
// Setup serial port
Serial.begin(115200);
Serial.println();
//Begin WiFi
WiFi.begin(WIFI_SSID, WIFI_PASS);
while (WiFi.status() != WL_CONNECTED) { delay(100); }
// WiFi Connected
Serial.print("Connected! IP address: ");
Serial.println(WiFi.localIP());
}
void loop() {
// put your main code here, to run repeatedly:
}Start the web server
Now we are ready to start our web server! First we will specify the root and 404 error functions that we specified earlier to the webserver instance. Then we can begin the server.
See line 26 to 28:
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
// Set WiFi credentials
#define WIFI_SSID "YOUR SSID"
#define WIFI_PASS "YOUR PASSWORD"
// Create a new web server
ESP8266WebServer webserver(80);
// Handle Root
void rootPage() {
webserver.send(200, "text/plain", "Check out https://siytek.com !");
}
// Handle 404
void notfoundPage(){
webserver.send(404, "text/plain", "404: Not found");
}
void setup()
{
// Setup serial port
Serial.begin(115200);
Serial.println();
//Begin WiFi
WiFi.begin(WIFI_SSID, WIFI_PASS);
while (WiFi.status() != WL_CONNECTED) { delay(100); }
// WiFi Connected
Serial.print("Connected! IP address: ");
Serial.println(WiFi.localIP());
// Start Web Server
webserver.on("/", rootPage);
webserver.onNotFound(notfoundPage);
webserver.begin();
}
void loop() {
// put your main code here, to run repeatedly:
}Listen for HTTP requests
Lastly we need to add a command within the continuous loop function in order to listen for incoming client connections and handle them as necessary.
See line 43 to 45:
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
// Set WiFi credentials
#define WIFI_SSID "YOUR SSID"
#define WIFI_PASS "YOUR PASSWORD"
// Create a new web server
ESP8266WebServer webserver(80);
// Handle Root
void rootPage() {
webserver.send(200, "text/plain", "Check out https://siytek.com !");
}
// Handle 404
void notfoundPage(){
webserver.send(404, "text/plain", "404: Not found");
}
void setup()
{
// Setup serial port
Serial.begin(115200);
Serial.println();
//Begin WiFi
WiFi.begin(WIFI_SSID, WIFI_PASS);
while (WiFi.status() != WL_CONNECTED) { delay(100); }
// WiFi Connected
Serial.print("Connected! IP address: ");
Serial.println(WiFi.localIP());
// Start Web Server
webserver.on("/", rootPage);
webserver.onNotFound(notfoundPage);
webserver.begin();
}
// Listen for HTTP requests
void loop(void){
webserver.handleClient();
}Test the web server
We are now ready to test our new super-tiny web server! Go ahead and upload the sketch, then open the serial monitor window. Don’t forget to change the baud rate to 115200 to match what we specified in the program.
Once you have the serial monitor open, press the reset button on the board and wait a few moments. When the ESP establishes a connection to the network, it will print the IP address to the serial window.
Now go ahead and point your browser to http://<your-ip-address> and marvel at your new super-tiny web server!
Conclusion
In this tutorial we have seen that it is possible to build a simple web server in the Arduino IDE using an ESP-based device. The aim of this tutorial was to make the process as simple as possible in order to help you understand the basics.
You should be able to further this example and produce a more complex page using HTML, even including links that control the GPIO pins!
Alternatively if you want to try something a little different, why not check out my tutorial that explains how to use webhooks to send email from an ESP-based device. Also, did you know that you can flash your device over WiFi too? Check out this tutorial to learn how!
