Written by Chris Gregg
This tutorial describes how to set up a rudimentary web page on an ESP-32.
Use the following steps to setup the Arduino development environment:
Get one ESP-32 arduino device. This library works for the following Hiletgo devices from Amazon.com (2x for $21.98):
Wifi-UART.zip file from the course website, and unzip:
Download and install the Arduino IDE for your computer:
On a Mac, copy the IDE program to your
/Applications folder, and then run it once to install. Then quit the application.
Copy the following libraries from the zip folder’s
libraries folder into your Arduino
libraries folder (for a Mac, the default location is
Open up the Arduino application again. Follow the instructions at the following website to install the ESP32 library (under “Testing the Installation”, choose the
In the Arduino application, open the
MIDI_web_example.ino program from the zip folder. In the program, change the
ssid variable near the top of the program to be your team name (or another unique WiFi name). You may also change the password for better security.
Connect your ESP32 to the computer using a micro-USB cable. If you have the USB-serial device connected for your Raspberry Pi, disconnect it first. In the Arduino IDE, select
Tools->Port->SLAB_USBtoUART (or similar).
Click the Upload button in the
MIDI_web_example | Arduino window (it is a right-facing arrow). After the “compiling sketch…” message disappears, you should see an “Uploading…” message. If the sketch doesn’t automatically upload to the device, you can hold down the button labeled “001” on the ESP32 to force it to listen for the upload (release once it starts uploading).
To check to see if the upload worked, open
Tools->Serial Monitor, select
115200 baud, and then click the
EN button on the ESP32. You should see a message that says, “Setting AP (Access Point)_AP IP address: 192.168.4.1”. You should also be able to find the
ssid listed on your phone or computer as a WiFi network to join.
At this point, you should be able to connect to the WiFi network you named in step (6). Once you connect from a device, go to the web page
192.168.4.1 and you should see the web page that says, “Play some notes!”
If you want to load a web page from your SD card, you can use the
ff library, which is described in a different guide.