Arduino Nano ESP32 - Web Server on SD Card
In this tutorial, we'll explore the process of creating an Arduino Nano ESP32 web server hosted on a MicroSD Card. All the necessary HTML, CSS, JavaScript, and image files will reside on the MicroSD Card.
Hardware Preparation
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 the links provided in this section are Amazon affiliate links. We may receive a commission for any purchases made through these links at no additional cost to you.
Additionally, some of these links are for products from our own brand, DIYables.
Additionally, some of these links are for products from our own brand, DIYables.
Overview of Arduino Nano ESP32 and Web Server
We have specific tutorials about Arduino Nano ESP32 and Web Server, MicroSD Card. Each tutorial contains detailed information and step-by-step instructions about hardware pinout, working principle, wiring connection to Arduino Nano ESP32, Arduino Nano ESP32 code... Learn more about them at the following links:
Wiring Diagram
This image is created using Fritzing. Click to enlarge image
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:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Arduino Nano 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="https://amazon.com/diyables">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:
Please note that you can add other files such as JavaScript, txt, csv...
Arduino Nano ESP32 Code - Web server on MicroSD Card
/*
* This Arduino Nano ESP32 code was developed by newbiely.com
*
* This Arduino Nano ESP32 code is made available for public use without any restriction
*
* For comprehensive instructions and wiring diagrams, please visit:
* https://newbiely.com/tutorials/arduino-nano-esp32/arduino-nano-esp32-web-server-on-sd-card
*/
#include <WiFi.h>
#include <ESPAsyncWebServer.h>
#include <FS.h>
#include <SD.h>
#define PIN_SPI_CS D4 // The Arduino Nano ESP32 pin connected to the CS pin of SD card module
// 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
}
Detailed Instructions
- If this is the first time you use ESP32, see how to setup environment for Arduino Nano ESP32 on Arduino IDE.
- Connect the Arduino Nano ESP32 board to your PC via a micro USB cable
- Open Arduino IDE on your PC.
- Select the right Arduino Nano ESP32 board (e.g. Arduino Nano ESP32 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.
COM6
Connecting to WiFi...
Connected to WiFi
Arduino Nano ESP32 Web Server's IP address: 192.168.0.3
Autoscroll
Clear output
9600 baud
Newline
- Upon accessing the Serial Monitor, you'll encounter an IP address, such as: 192.168.0.3.
- Enter the provided IP address into the address bar of a web browser on either your smartphone or PC.
- Keep in mind to substitute '192.168.0.3' with the IP address displayed on the Serial Monitor.
- Upon entering the IP address, a page will load HTML, CSS, and images from the SD Card.
- Upon inspection, you'll notice that the web browser successfully loads HTML, CSS, and images stored on the SD Card.
Feel free to customize the HTML, CSS code, and include additional images and JavaScript to craft your own unique web page.