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.

ESP32 web server on 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×USB 3.0 SD Card Reader
1×(Recommended) ESP32 Screw Terminal Adapter

Or you can buy the following sensor kits:

1×DIYables Sensor Kit (30 sensors/displays)
1×DIYables Sensor Kit (18 sensors/displays)
Disclosure: some of these links are affiliate links. We may earn a commission on your purchase at no extra cost to you. We appreciate it.

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

ESP32 Micro SD Card Module 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):
Micro SD Card format FAT32
  • Create a HTML file index.html and add the following code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ESP32 Web Page</title> <link rel="icon" href="favicon.ico" type="image/x-icon"> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="container"> <h1>Web Page hosted on MicroSD Card</h1> <img src="luffy.jpg" alt="A beautiful image"> <p>Sponsored by <a href="">DIYables</a></p> </div> </body> </html>
  • Create a CSS file styles.css and add the following code:
body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: white; } h1 { font-size: 28px; } .container { max-width: 800px; margin: 20px auto; text-align: center; } img { max-width: 80%; height: auto; display: block; margin: 20px auto; }
  • 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:
ESP32 HTML contents on microSD Card

Please note that you can add other files such as JavaScript, txt, csv...

ESP32 Code - Web server on MicroSD Card

/* * This ESP32 code is created by * * This ESP32 code is released in the public domain * * For more detail (instruction and wiring diagram), visit */ #include <WiFi.h> #include <ESPAsyncWebServer.h> #include <FS.h> #include <SD.h> #define PIN_SPI_CS 5 // The ESP32 pin GPIO5 // Replace with your network credentials const char* ssid = "YOUR_WIFI_SSID"; // CHANGE IT const char* password = "YOUR_WIFI_PASSWORD"; // CHANGE IT // Create AsyncWebServer object on port 80 AsyncWebServer server(80); void setup() { Serial.begin(9600); // Connect to Wi-Fi WiFi.begin(ssid, password); while (WiFi.status() != WL_CONNECTED) { delay(1000); Serial.println("Connecting to WiFi..."); } Serial.println("Connected to WiFi"); // Print the ESP32's IP address Serial.print("ESP32 Web Server's IP address: "); Serial.println(WiFi.localIP()); // init MicroSD Card if (!SD.begin(PIN_SPI_CS)) { while (1) { Serial.println(F("SD CARD FAILED, OR NOT PRESENT!")); delay(1000); } } server.on("/", HTTP_GET, [](AsyncWebServerRequest* request) { request->send(SD, "/index.html", "text/html"); }); server.serveStatic("/", SD, "/"); server.begin(); } void loop() { // Your code here }

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.
ESP32 ESPAsyncWebServer library
  • You will be asked to install the dependency. Click Install All button.
ESP32 ESPAsyncWebServer dependencies library
  • 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.
Connecting to WiFi... Connected to WiFi ESP32 Web Server's IP address:
Autoscroll Show timestamp
Clear output
9600 baud  
  • You will see an IP address on the Serial Monitor, for example:
  • 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 to the IP address you got on Serial Monitor.
  • You will see a page loads HTML, CSS, images from SD Card
ESP32 Web page on 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.