ESP32 Web Server – Arduino IDE

In this project you’ll create a standalone web server with an ESP32 that controls outputs (two LEDs) using the Arduino IDE programming environment. The web server is mobile responsive and can be accessed with any device that as a browser on the local network. We’ll show you how to create the web server and how the code works step-by-step.

Project Overview

Before going straight to the project, it is important to outline what our web server will do, so that it is easier to follow the steps later on.

• The web server you’ll build controls two LEDs connected to the ESP32 GPIO 26 and GPIO 27;
• You can access the ESP32 web server by typing the ESP32 IP address on a browser in the local network;
• By clicking the buttons on your web server you can instantly change the state of each LED.

This is just a simple example to illustrate how to build a web server that controls outputs, the idea is to replace those LEDs with a relay, or any other electronic components you want.

Installing the ESP32 board in Arduino IDE

There’s an add-on for the Arduino IDE that allows you to program the ESP32 using the Arduino IDE and its programming language. Follow one of the following tutorials to prepare your Arduino IDE:

• Windows instructions – Installing the ESP32 Board in Arduino IDE
• Mac and Linux instructions – Installing the ESP32 Board in Arduino IDE

Parts Required

For this tutorial you’ll need the following parts:

• ESP32 development board –  read ESP32 Development Boards Review and Comparison
• 2x 5mm LED
• 2x 330 Ohm resistor
• Breadboard
• Jumper wires

You can use the preceding links or go directly to MakerAdvisor.com/tools to find all the parts for your projects at the best price!