A Mini Webserver for the ESP8266 and ESP32

ESP8266 and ESP32 are great microcontrollers with WIFI. Using a webserver to control pins or display sensor data on a webpage comes in mind. On this page I would like to show a quick way how to get a working webserver on an ESP.

The right webserver examples to start with  in the Arduino IDE are:

  • on the ESP32 the IDE Example Webserver / HelloServer
  • on the ESP8266 the IDE Example ESP8266Webserver / HelloServer

This page is "under development" - I just needed a quick way to upload the ZIP file.

What you will get here

The ZIP file contains an ESP32/ESP8266 compatible webserver. It demonstrates

  • How to setup a webserver
  • A page to output several variables (for example your sensor data)
  • A page 404 if the user enters a wrong page
  • Handle the favicon.ico which is requested by several browsers.
  • How to style the page using CSS
  • Activate OTA for easier (and faster) sketch upload

Main Tab

This ESP webserver sketch is compatible for the ESP8266 and the ESP32. Hence there are several precompiler defines to differentiate the boards based on your upload settings. The setup() in the main tab connects to your wifi, defines which "pages" are available on your server and starts OTA.

In the loop() you just need to call the webserver and OTA. Furthermore you would need to read your sensors, update your variables,...

The Tab "config1.h"

The tab "config1.h" defines basic configuration of your board. If you have several boards, you can easily modify the configuration for each webserver. Just include the right config file before uploading to a board.

The Tab "server"

The tab server contains the functions to output the HTML pages and other resources. The server can also output plain text (used for 404 page not found), CSS or any other file type you need.

The Tab "ota"

The sketch adds OTA (over the air) update capability. OTA is not necessary to operate a webserver. OTA enables you to update your ESP8266 / ESP32 via WIFI without a serial connection.

Links

(*) Disclosure: Some of the links above are affiliate links, meaning, at no additional cost to you I will earn a (little) comission if you click through and make a purchase. I only recommend products I own myself and I'm convinced they are useful for other makers.

History

First upload: 2023-07-27 | Version: 2024-03-22