Scribd
Upload
406 views

ESP32 Web Server

The document discusses building a simple web server with an ESP32 board that can control GPIO pins to turn LEDs on and off. It will require an ESP32 board, resistors, LEDs, breadboard, and jumper wires. The web server will use URLs to control the state of the LEDs, so if a URL like "http://192.168.1.1/ledon" is entered in a browser, it will turn the LED on and update the webpage. The goal is to understand how to set up a web server on the ESP32 that can be controlled via a client webpage to control its GPIO pins.

Uploaded by

Tiffany Sandia
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
406 views

ESP32 Web Server

The document discusses building a simple web server with an ESP32 board that can control GPIO pins to turn LEDs on and off. It will require an ESP32 board, resistors, LEDs, breadboard, and jumper wires. The web server will use URLs to control the state of the LEDs, so if a URL like "http://192.168.1.1/ledon" is entered in a browser, it will turn the LED on and update the webpage. The goal is to understand how to set up a web server on the ESP32 that can be controlled via a client webpage to control its GPIO pins.

Uploaded by

Tiffany Sandia
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

CHAPTER III

3.1 ESP32 WEB SERVER

One of the most interesting project we can build while learning to work with a WiFi Based board is a
web Server. As we continue the journey to learn how to build projects with the ESP32, we will
examine how to build a simple web Server with the ESP32.

A Web server is essentially a device which stores, processes and delivers web pages to web clients,
which can range from browsers on our laptops to Mobile apps on our smartphones. The
communication between client and server takes place using a special protocol called Hypertext
Transfer Protocol (HTTP). The client uses an URL to make a request for a particular page and the
server responds with the content of that web page or an error message if the page is not available.

In our case, rather than responding with a specific webpage, the URL will be used to control the
state of LEDs connected to the ESP and the changes made will be updated on the webpage. For
instance, if a URL like “http://192.168.1.1/ledon” is entered in the browser, the web server will
understand its time to turn the LED “ON” and then update the status of the LED to “ON” on the
webpage. Same thing will happen when it’s required to go “OFF”.
At the end of today’s tutorial, you would know how to set up a web server on the ESP32 and connect
to it via a client (Webpage) to control its GPIO pins.

REQUIRED COMPONENTS

The following components are required for this project:

1. DOIT ESP32 DEVKIT V1


2. 220 ohms Resistor (2)
3. LED (2)
4. Breadboard
5. Jumper Wire
The DOIT Devkit V1 ESP32 board is used for this tutorial due to its obvious popularity among
makers. Feel free to use any of the other ESP32 based boards for the project.
In this tutorial we’ll build an asynchronous web server using
the ESPAsyncWebServer library.
The HTML to build the web page will be stored on the ESP32 or ESP8266
Filesystem (SPIFFS).

We’ll display temperature, humidity and pressure readings from a BME280


sensor on a chart, but you can modify this project to display sensor readings
from any other sensor.

1. Install ESP Board in Arduino IDE


We’ll program the ESP32 and ESP8266 using Arduino IDE. So, you must
have the ESP32 or ESP8266 add-on installed. Follow one of the next tutorials
to install the ESP add-on:

2. Filesystem Uploader Plugin


To upload the HTML file to the ESP32 and ESP8266 flash memory, we’ll use
a plugin for Arduino IDE: Filesystem uploader. Follow one of the next
tutorials to install the filesystem uploader depending on the board you’re
using:
3. Installing Libraries
To build the asynchronous web server, you need to install the following
libraries.

 ESP32: you need to install the ESPAsyncWebServer and


the AsyncTCP libraries.
 These libraries aren’t available to install through the Arduino Library
Manager, so you need to copy the library files to the Arduino Installation
folder.
 To get readings from the BME280 sensor module you need to have the
next libraries installed:

Organizing your Files


To build the web server you need two different files. The Arduino sketch and
the HTML file. The HTML file should be saved inside a folder
called data inside the Arduino sketch folder, as shown below:

You might also like