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): ESP32 on Amazon.com
Download our esp32.zip file and unzip.
Download and install the Arduino IDE for your computer: Arduino Download link
On a Mac, copy the IDE program to your
/Applicationsfolder, and then run it once to install. Then quit the application.
Copy the following libraries from the zip folder's
librariesfolder into your Arduino
librariesfolder (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
Node32sboard):Install ESP32 on Arduino
In the Arduino application, open the
MIDI_web_example.inoprogram from the zip folder. In the program, change the
ssidvariable 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
Click the Upload button in the
MIDI_web_example | Arduinowindow (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
ENbutton 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
ssidlisted 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.1and 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 sd library, which is described in a different guide.