This project tutorial series will discussed how to create your own ESP8266 Web Server using the NodeMCU module. The web server application that we are gonna be creating is used to control our electronic components. We can accessed our application using your mobile phone.

The ESP8266 Microcontroller Chip is a powerful wifi chip suitable for your Internet of Things (IOT) applications developed by Espressif Systems in China. It contains the necessary capability to connect to your wifi and gather information form the internet like gathering latest weather information. It also contains multi purpose General Purpose Input Output (GPIO) Pins capable of interfacing with multidude of analog and digital sensors.

The NodeMCU ESP8266 module contains its own usb port that we can use to load our sketch. This will simplify our programming process so that we don’t need to use additional circuitry to load our program. The small but versatile ESP8266 ESP-01 is often used if “space” or “dimension” is your concern. However programming the ESP-01 requires additional circuitry if you have not bought the Programmer for it. I have written a post on how to program your ESP-01 using the Arduino IDE.

The goal of this NodeMCU ESP8266 WebServer tutorial series is to show how you can create your own application to control whatever electronic components that you like. We will build the application and continually improved it thru succeeding post.

The ESP32 System on Chip Microcontroller is a successor to the ESP8266 model. Apart from having wifi connectivity capability, it also has dual mode bluetooth function. In a future post we will be creating a Web Server Tutorial Series for ESP32 based module so watch out for it.

Tutorial Sections

Discussing the ESP8266 WebServer in one post would result to a lengthy and unreadable experience. Thus it is better to break it down on several iterative post and improve the code progressively.

1. Introduction to the NodeMCU ESP8266 Web Server

The first part of this series will discussed what a Web Server is. It contains information on how we can control our electronic components using our mobile phones. Additionally we program all of our user interface inside the application. The NodeMCU sketch contains all the html/css/javascript. It does not look good from a coding perspective however the goal of this post is to introduce our web server. We will use this post as a baseline to improve our application.

2. Creating an AJAX Enabled Page

The second part of this series will discussed how we can improved our initial NodeMCU ESP8266 Web Server. The initial code of our application causes our web page to “flicker” when you toggle the buttons. We will use the XMLHttpRequest API to make Asynchronous Javascript and XML (AJAX) request to our web server. The concepts that you will be learning in this post is used if you want to read and display real time sensor values without refreshing your page.

3. Using SPIFFS in loading our page

The third part of this series will discussed how we can use the Serial Peripheral Interface Flash File System (SPIFFS) in serving our web user interfaces. The first two part of this series embeds the html/javascript/css in our sketch thus it makes our code hard to read. To overcome this unreadability problem, we will save all of our html/javascript/css inside the built in File System of ESP8266 called the SPIFFS. Note that a deprecation warning is now stated in the ESP8266 api documentation about SPIFFS. The LittleFS is now the recommended approach. In future post we will use LittleFS.

4. Improving our web server speed using ESPAsyncWebServer library

The built it ESP8266WebServer class that we have built in the previous 3 post is able to serve one simultaneous client. Thus it means that we are only able to service one single HTTP GET and HTT POST for one client. To overcome this problem, we will use the very versatile ESPAsyncWebServer.

This post will discuss how we can turbo charged our web server so that we can improve its efficiency in serving http request!

5. Controlling High Voltage Device using our ESP8266 NodeMCU Web Server

This post will discuss how we can control high voltage device using our mobile phone. The NodeMCU will serve the user interface and control the high voltage device connected to it. We will use a relay to connect our high voltage device to our NodeMCU GPIO Port.

Wrapping Up

After reading this tutorial series you might have learn how to create your own NodeMCU ESP8266 Web Server. Additionally, I hope it will teach you how to optimize your application so that it there is no need to refresh the page by using AJAX calls.

Thats it!

Happy Exploring!