Building an ESP32 Web Server: The Complete Guide for Beginners

New to ESP32 web servers? You’re in the right place. In this detailed guide, we’ll cover the basic concepts you need to know to build web servers with the ESP32, so you can control and monitor its outputs remotely. We’ll start with the essential theory, then move on to practical examples to help you apply what you’ve learned.
We’ll cover creating a web server to control outputs and display sensor readings, adding authentication to the web server, setting the ESP32 as an access point, and more. To make things as simple as possible, we’ll use the built-in
WebServer.h
library.
New to the ESP32? We recommend following these getting-started guides first:
Getting Started with the ESP32 Development Board
ESP32 Useful Wi-Fi Library Functions (Arduino IDE)
Tutorial Overview
In this tutorial, we’ll cover the following subjects. If you’re new to ESP32 web servers and you want to learn more about this subject, we recommend following these sections in order.
Introducing Web Servers (Basic Concepts)
ESP32 Web Server Example (Control Outputs)
Add Authentication to your Web Server
ESP32 Web Server (Access Point)
ESP32 Web Server Example (Display Sensor Readings)
Recommended eBook
:
Build Web Servers with the ESP32 and ESP8266 (3rd edition)
Prerequisites
This tutorial focuses on programming the ESP32 using the Arduino core. Before proceeding, you should have the ESP32 Arduino core installed in your Arduino IDE. Follow the next tutorial to install the ESP32 on the Arduino IDE, if you haven’t already.
Installing the ESP32 Board in Arduino IDE (Windows, Mac OS X, and Linux instructions)
1) Introducing Web Servers
In simple terms, a web server is a “computer” that delivers web pages. It stores the website’s files, including HTML documents and related assets like images, CSS style sheets, fonts, and other files. When a user makes a request, the server sends those files to the user’s web browser.
When you access a web page in your browser, you’re actually sending a request to a server using the Hypertext Transfer Protocol (HTTP). This protocol handles how information is requested and delivered on the Internet. The server then responds by sending the web page you asked for—also through HTTP.
To better understand how all of this works with your ESP32 boards, let’s go over some terms you’ve probably heard before—but might not fully understand yet.
Request-response
Request-response is a message exchange pattern, in which a requestor (your browser) sends a request message to a replier system (the ESP32 as a web server) that receives and processes the request, and returns a message in response.
In most of our projects, the response message will be a web page that displays the latest sensor readings or that provides an interface to control outputs.
This is a simple, yet powerful messaging pattern, especially in client-server architectures.
Client-Server
When you type a URL in your browser, your device (the client) sends a request to a server using the Hypertext Transfer Protocol (HTTP). The server receives the request and responds—also via HTTP—by sending back the web page. This exchange between clients and servers happens over a computer network.
In simple terms, clients make requests to servers. Servers handle the clients’ requests.
Throughout this tutorial, we’ll treat the ESP32 as the server, and you—using your browser—as the client. In our projects, there’s only one server (the ESP32 board), but there can be multiple clients. These could be different web browsers on various devices like computers, smartphones, or tablets, all connected to the same network, or even multiple browser tabs opened on the same device.
IP Address
An IP address is a numerical label assigned to each device connected to a computer network.
It is a series of four values separated by periods, with each value ranging from 0 to 255. Here’s an example:
192.168.1.75
At home, your devices are connected to a private network through your router (local network). All devices connected to your router are part of your local network. Inside this network, each device has its own IP address.
Devices connected to the same router can access each other via the IP address. Devices outside your local network can’t access your local devices using their local IP address.
When you connect your ESP32 boards to your router, they become part of your local network. So, your ESP32 boards are assigned an IP address.
On your local network, the IP address of the ESP32 (and other devices) is assigned by the router using something called DHCP (Dynamic Host Configuration Protocol). You don’t need to worry about the details. You just need to know that DHCP automatically assigns an IP address and other network settings to each device on the network.
The router keeps track of every device on the network and maps an IP address to each device every time it joins the network. Two devices on the same network can’t have the same IP address.
Again, when the ESP32 is connected to your router, the IP address it gets is a local address. This means you can only access it from devices that are also connected to the same network. As shown in the previous image, you can access the ESP32 using a computer or smartphone that’s on the same network.
Wi-Fi Station and Wi-Fi Access Point
The ESP32 board can act as Wi-Fi Station, Access Point, or both.
Wi-Fi Station
When the ESP32 is set to work as a Wi-Fi station, it connects to an existing network, like your home router. In this setup, the router gives the ESP32 a unique local IP address. You can then communicate with the ESP32 from other devices (like your phone or computer) that are connected to the same network, simply by using that IP address.
Since the router is also connected to the internet, we can request information from the internet using our ESP32 boards like data from APIs, publish data to online platforms, use icons and images from the internet in our web server pages, or include JavaScript libraries.
However, in some cases, we may not have a router nearby to connect the ESP32. In this scenario, you must set your ESP32 board as an access point.
Access Point
When your ESP32 is set up as an Access Point, other devices (such as your smartphone, tablet, or computer) can connect to it without the need for a router; the ESP controls its own Wi-Fi network.
Unlike a router, an ESP32 Access Point doesn’t connect further to a wired network or the Internet, so you can’t access external libraries, publish sensor readings to the cloud, or use services like mail. In most of our examples, we usually set the ESP32 boards as stations. You can easily modify our examples and set the boards as access points instead if that’s more suitable for your projects.
Client-Server Communication
There are several ways to communicate between the client and the server: HTTP Polling, Server-Sent Events (SSE), and WebSocket. We’ll focus on HTTP Polling, which is the easiest protocol to get started with and better understand how web servers work.
We have an eBook dedicated to web servers that explores in great detail those three communication protocols:
Build Web Servers with ESP32 and ESP8266 eBook
HTTP Polling
In HTTP polling, the client repeatedly asks the server for new information. When the server receives a request, it responds with the requested data. The server only sends information when the client asks for it.
For example, your browser sends a request to the ESP32, and it responds with whatever you’ve programmed it to provide, like a web page showing the latest sensor readings. To keep the web page updated using this method, the browser needs to keep sending requests at regular intervals.
ESP32 Web Server
Let’s take a look at a practical example with the ESP32 that acts as a web server in the local network.
Typically, a web server with the ESP32 in the local network looks like this: the ESP32 running as a web server is connected via Wi-Fi to your router. Y