ESP32 Web Server using LittleFS Filesystem (serve files from filesystem)

In this tutorial, you’ll learn how to build a web server with the ESP32 that serves HTML and CSS files stored in the LittleFS filesystem. Instead of embedding the HTML and CSS directly in the Arduino sketch, we’ll store them as separate files, making the code cleaner and easier to manage.
The web server we’ll build shows how to control the ESP32 outputs and how to display sensor readings. As an example, we’ll control an LED and display sensor readings from a BME280 sensor.
You can use the concepts learned in this tutorial to control any output or display
sensor readings from other sensors
Table of Contents
In this tutorial, we’ll cover the following topics:
Introducing LittleFS
Introducing ESP32 Web Servers
Project Overview
Prerequisites
Organizing Your Files
Creating the HTML File
Creating the CSS File
Introducing LittleFS
LittleFS is a lightweight filesystem created for microcontrollers. It lets you access the flash memory as you do in a standard file system on your computer, but it’s simpler and more limited. You can
read, write, close, and delete files
. Using
LittleFS with the ESP32 boards
is useful to:
Create configuration files with settings;
Save data permanently, even after a restart or power loss;
Create files to store small amounts of data instead of using a microSD card;
Save HTML, CSS, and JavaScript files to build a web server interface (like we’ll do in this tutorial);
Store images, figures, and icons for your web pages or display modules;
Log sensor readings or application data locally;
And much more, depending on your project needs.
It’s especially helpful in projects where you need to manage data directly on the ESP32 without relying on external storage devices.
Introducing ESP32 Web Servers
In simple terms, a web server is a “computer” that delivers web pages to users. It stores a website’s files, including HTML documents and related assets like images, CSS style sheets, fonts, and other resources.
When a user makes a request—usually by entering a URL or clicking a link—the web server responds by sending the requested files to the user’s web browser using the HTTP (Hypertext Transfer Protocol). HTTP is the foundation of data communication on the web, defining how messages are formatted and transmitted between clients (like your browser) and servers.
In this example, the ESP32 acts as a web server. It stores the HTML and CSS files needed to build the web page on the LittleFS filesystem. When you access the ESP32 IP address in your browser, an HTTP request is sent to the ESP32. The ESP32 then responds with the HTML and CSS files, which the browser uses to render the page. These files can also include dynamic content, such as sensor readings and the current state of outputs, which are updated each time a new request is made.
If you’re new to ESP32 web servers, we recommend reading the following guide:
Building an ESP32 Web Server: The Complete Guide for Beginners
Project Overview
Before going straight to the project, it’s important to outline what our web server will do, so that it’s easier to understand. The following picture shows the interface we’ll build with the files from the ESP32 filesystem.
The web server controls an LED connected to the ESP32 GPIO 2. This is the ESP32 on-board LED. You can control any other GPIO;
The web server page shows two buttons: ON and OFF, to turn GPIO 2 on and off;
The web server page also shows the current GPIO state;
You’ll also use a
BME280 sensor
to display sensor readings (temperature, humidity, and pressure).
The following figure shows a simplified diagram to demonstrate how everything works.
Prerequisites
Before proceeding with this project, make sure you check all the following prerequisites.
1. Install ESP32 Board in Arduino IDE 2
We’ll program the ESP8266 using Arduino IDE, so you must have the ESP32 boards installed. Follow the next tutorial if you haven’t already:
Installing ESP32 Board in Arduino IDE 2 (Windows, Mac OS X, Linux)
2. Install the ESP32 Filesystem Uploader Plugin
To upload files to the ESP32 LittleFS Filesystem, you need to install the Filesystem Uploader Plugin. Install it in your Arduino IDE 2:
Arduino IDE 2: Install ESP32 LittleFS Uploader (Upload Files to the Filesystem)
3. Installing Libraries
Async Web Server Libraries
We’ll build the web server using the following libraries:
ESPAsyncWebServer
by ESP32Async
AsyncTCP
by ESP32Async
You can install these libraries in the Arduino Library Manager. Open the Library Manager by clicking the Library icon on the left sidebar.
Search for
ESPAsyncWebServer
and install the
ESPAsyncWebServer by ESP32Async
Then, install the AsyncTCP library. Search for
AsyncTCP
and install the
AsyncTCP by ESP32Async
Installing BME280 libraries
In this tutorial, we’ll display readings from a BME280 sensor (
Guide with the ESP32
). You need to install the following libraries:
Adafruit_BME280_Library
Adafruit_Sensor
You can install these libraries through the Arduino IDE Libraries Manager. Go to
Sketch
>
Include Libraries
>
Manage Libraries
. Then, search for the libraries’ names to install them.
Parts Required
To proceed with this project, you need the following parts:
ESP32 Board
(read
Best ESP32 development boards
)
BME280 sensor module
(
Guide for BME280
)
5 mm LED
330 Ohm resistor
Breadboard
Jumper wires
You can use the preceding links or go directly to
MakerAdvisor.com/tools
to find all the parts for your projects at the best price!
Wiring the Circuit
Connect all the components by following this diagram:
Recommended reading:
ESP32 Pinout Reference: Which GPIO pins should you use?
BME280
ESP32
Vin
3V3
GND
GND
SCL
GPIO 22
SDA
GPIO 21
Organizing Your Files
To build the web server you need three different files. The Arduino sketch, the HTML file, and the CSS file. The HTML and CSS files should be saved inside a folder called
data
inside the Arduino sketch folder, as shown below.
You can download all project files:
Click here to download all the project files
Then, you need to upload the filesystem image before uploading the code.
Creating the HTML File
Create an
index.html
file with the following content:
<!DOCTYPE html>
<!--
-->
<html>
<head>
<meta charset="UTF-8">
<title>ESP32 LittleFS Web Server</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="data:,">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>ESP32 LittleFS Web Server</h1>

<p>💡 GPIO state<strong> %STATE%</strong></p>

<p>
<a href="/on"><button class="button">ON</button></a>
<a href="/off"><button class="button button2">OFF</button></a>
</p>

<p>
<span class="sensor-labels">🌡️ Temperature</span>
<span id="temperature">%TEMPERATURE%</span>
<sup class="units">&deg;C</sup>
</p>

<p>
<span class="sensor-labels">💧 Humidity</span>
<span id="humidity">%HUMIDITY%</span>
<sup class="units">&#37;</sup>
</p>

<p>
<span class="sensor-labels">↕️ Pressure</span>
<span id="pressure">%PRESSURE%</span>
<sup class="units">hPa</sup>
</p>
</body>

<script>
const updateSensorValue = (id, endpoint) => {
fetch(endpoint)
.then(response => {
if (!response.ok) {
throw new Error(`Failed to fetch ${endpoint}`);
}
return response.text();
})
.then(data => {
document.getElementById(id).textContent = data;
})
.catch(error => {
console.error(error);
document.getElementById(id).textContent = 'Error';
});
};

// Update all sensors every 10 seconds
setInterval(() => {
updateSensorValue('temperature', '/temperature');
updateSensorValue('humidity', '/humidity');
updateSensorValue('pressure', '/pressure');
}, 10000);

</script>
</html>
View