ESP32 - Web Server on SD Card
In this tutorial, we'll find out how to make ESP32 web server hosted on MicroSD Card. The HTML, CSS, JavaScript, image files will be stored on the MicroSD Card.
Hardware Used In This Tutorial
1 | × | ESP-WROOM-32 Dev Module | |
1 | × | USB Cable Type-C | |
1 | × | Micro SD Card | |
1 | × | Micro SD Card Module | |
1 | × | Jumper Wires | |
1 | × | Breadboard | |
1 | × | USB 3.0 SD Card Reader | |
1 | × | (Recommended) Screw Terminal Expansion Board for ESP32 |
Or you can buy the following sensor kits:
1 | × | DIYables Sensor Kit (30 sensors/displays) | |
1 | × | DIYables Sensor Kit (18 sensors/displays) |
Introduction to ESP32 and Web Server
If you're not familiar with ESP32 and Web Server, MicroSD Card (including pinout, how it works, and programming), you can learn about them through the following tutorials:
Wiring Diagram
This image is created using Fritzing. Click to enlarge image
If you're unfamiliar with how to supply power to the ESP32 and other components, you can find guidance in the following tutorial: How to Power ESP32.
Copy HTML contents to MicroSD Card
- Please make sure that your Micro SD Card is formated on FAT32 format as below (on Windows OS, right mouse click → format):
- Create a HTML file index.html and add the following code:
- Create a CSS file styles.css and add the following code:
- Prepare an image. This tutorial uses luffy.jpg, which is used in HTML code. You can download this image here:
- (Optional) Prepare favicon image. This tutorial uses this favicon.ico
- Put all files in the root directory of MicroSD Card, like below images:
Please note that you can add other files such as JavaScript, txt, csv...
ESP32 Code - Web server on MicroSD Card
Quick Instructions
- If this is the first time you use ESP32, see how to setup environment for ESP32 on Arduino IDE.
- Connect the ESP32 board to your PC via a micro USB cable
- Open Arduino IDE on your PC.
- Select the right ESP32 board (e.g. ESP32 Dev Module) and COM port.
- Open the Library Manager by clicking on the Library Manager icon on the left navigation bar of Arduino IDE.
- Search “ESPAsyncWebServer”, then find the ESPAsyncWebServer created by lacamera.
- Click Install button to install ESPAsyncWebServer library.
- You will be asked to install the dependency. Click Install All button.
- Copy the above code and open with Arduino IDE
- Change the wifi information (SSID and password) in the code to yours
- Click Upload button on Arduino IDE to upload code to ESP32
- Open the Serial Monitor
- Check out the result on Serial Monitor.
- You will see an IP address on the Serial Monitor, for example: 192.168.0.3
- Type the IP address on the address bar of a web browser on your smartphone or PC.
- Please note that you need to change the 192.168.0.3 to the IP address you got on Serial Monitor.
- You will see a page loads HTML, CSS, images from SD Card
- As you can see, the HTML, CSS, images stored on SD Card were loaded by web browser.
Now you can modify the HTML, CSS code, add more images, JavaScript to make your own web page.