The ESP32 is a powerful microcontroller with built-in Wi-Fi and Bluetooth capabilities, making it a favorite for IoT applications. One of its standout features is the ability to store files using the SPIFFS (SPI Flash File System). This tutorial will show you how to set up SPIFFS on the ESP32 and use it to serve files through a web server, similar to our ESP8266 SPIFFS tutorial.
What is SPIFFS?
SPIFFS is a lightweight file system for microcontrollers that lets you store files like HTML, CSS, JavaScript, or any other data. These files are stored in the flash memory of the ESP32, making it ideal for creating web servers or storing configuration data.
Setting Up SPIFFS
Before using SPIFFS on the ESP32, you need the following:
- ESP32 board
- Arduino IDE installed
- ESP32 board package installed in the Arduino IDE
- Arduino ESP32 filesystem uploader plugin
Step 1: Install the Filesystem Uploader Plugin
- Download the Plugin: Visit the ESP32 Arduino SPIFFS GitHub page and download the latest release.
- Install the Plugin: Extract the downloaded file and place the ESP32FS folder into the tools folder of your Arduino IDE directory. If the tools folder does not exist, create it.
- Restart the Arduino IDE.
Step 2: Partition Scheme
By default, the ESP32 uses a partition scheme that may not allocate enough space for SPIFFS. To change it:
- In the Arduino IDE, go to Tools > Partition Scheme.
- Select a scheme like “Default with 1.5MB SPIFFS.”
Writing and Uploading Files to SPIFFS
- Prepare Files: Create a folder named data in your Arduino project directory. Add the files you want to upload (e.g., index.html, style.css, or script.js) into this folder.
- Upload Files:
- Open your project in the Arduino IDE.
- Select your ESP32 board and port under Tools.
- Click Tools > ESP32 Sketch Data Upload to upload the contents of the data folder to SPIFFS.
Building the Web Server
Step 1: Basic Code Setup
To create a web server that serves files from SPIFFS, use the following code:
#include <WiFi.h>
#include <FS.h>
#include <SPIFFS.h>
#include <WebServer.h>
const char* ssid = "Your_SSID";
const char* password = "Your_PASSWORD";
WebServer server(80);
void setup() {
Serial.begin(115200);
// 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");
Serial.println(WiFi.localIP());
// Initialize SPIFFS
if (!SPIFFS.begin(true)) {
Serial.println("An Error has occurred while mounting SPIFFS");
return;
}
// Define routes
server.on("/", handleRoot);
server.serveStatic("/style.css", SPIFFS, "/style.css");
// Start server
server.begin();
}
void loop() {
server.handleClient();
}
void handleRoot() {
File file = SPIFFS.open("/index.html", "r");
if (!file) {
server.send(404, "text/plain", "File Not Found");
return;
}
server.streamFile(file, "text/html");
file.close();
}Step 2: Adding HTML and CSS
- In the folder, create index.html with the following content:
<!DOCTYPE html>
<html>
<head>
<title>ESP32 Web Server</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Welcome to ESP32 Web Server</h1>
<p>This page is served from SPIFFS.</p>
</body>
</html>- Create style.css:
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f0f0f0;
color: #333;
}Step 3: Upload and Test
- Upload the files to SPIFFS as described earlier.
- Compile and upload the code to your ESP32.
- Open the Serial Monitor to find the ESP32’s IP address.
- Enter the IP address in your browser to see your web page served from SPIFFS.
Conclusion
Using SPIFFS on the ESP32 is an efficient way to store and serve files for your IoT projects. Whether you’re building a web server, storing configuration files, or managing data, SPIFFS makes it simple and effective. Try extending this project by adding JavaScript for interactivity or creating APIs to send and receive data.
Happy tinkering!
