![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2025\/05\/ESP32-LittleFS-Web-Server.jpg?resize=1200%2C675&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nThe web server we\u2019ll build shows how to control the ESP32 outputs and how to display sensor readings. As an example, we\u2019ll control an LED and display sensor readings from a BME280 sensor.<\/p>\n\n\n\n
You can use the concepts learned in this tutorial to control any output or display sensor readings from other sensors<\/a>.<\/p>\n\n\n\n In this tutorial, we’ll cover the following topics:<\/p>\n\n\n\n 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\u2019s simpler and more limited. You can read, write, close, and delete files<\/a>. Using LittleFS with the ESP32 boards<\/a> is useful to:<\/p>\n\n\n\n It\u2019s especially helpful in projects where you need to manage data directly on the ESP32 without relying on external storage devices.<\/p>\n\n\n\n In simple terms, a web server is a \u201ccomputer\u201d that delivers web pages to users. It stores a website\u2019s files, including HTML documents and related assets like images, CSS style sheets, fonts, and other resources. <\/p>\n\n\n\n When a user makes a request\u2014usually by entering a URL or clicking a link\u2014the 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.<\/p>\n\n\n 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.<\/p>\n\n\n If you’re new to ESP32 web servers, we recommend reading the following guide:<\/p>\n\n\n\n Before going straight to the project, it\u2019s important to outline what our web server will do, so that it\u2019s easier to understand. The following picture shows the interface we’ll build with the files from the ESP32 filesystem.<\/p>\n\n\n The following figure shows a simplified diagram to demonstrate how everything works.<\/p>\n\n\n Before proceeding with this project, make sure you check all the following prerequisites.<\/p>\n\n\n\n We\u2019ll program the ESP8266 using Arduino IDE, so you must have the ESP32 boards installed. Follow the next tutorial if you haven’t already:<\/p>\n\n\n\n To upload files to the ESP32 LittleFS Filesystem, you need to install the Filesystem Uploader Plugin. Install it in your Arduino IDE 2:<\/p>\n\n\n\n We’ll build the web server using the following libraries:<\/p>\n\n\n\n You can install these libraries in the Arduino Library Manager. Open the Library Manager by clicking the Library icon on the left sidebar.<\/p>\n\n\n\n Search for ESPAsyncWebServer<\/span> and install the ESPAsyncWebServer by ESP32Async<\/strong>.<\/p>\n\n\n Then, install the AsyncTCP library. Search for AsyncTCP<\/span> and install the AsyncTCP by ESP32Async<\/strong>.<\/p>\n\n\n In this tutorial, we\u2019ll display readings from a BME280 sensor (Guide with the ESP32<\/a>). You need to install the following libraries:<\/p>\n\n\n\n You can install these libraries through the Arduino IDE Libraries Manager. Go to Sketch <\/strong>> Include Libraries<\/strong> > Manage Libraries<\/strong>. Then, search for the libraries\u2019 names to install them.<\/p>\n\n\n\n To proceed with this project, you need the following parts:<\/p>\n\n\n\n You can use the preceding links or go directly to MakerAdvisor.com\/tools<\/a> to find all the parts for your projects at the best price!<\/p> Connect all the components by following this diagram:<\/p>\n\n\n Recommended reading: ESP32 Pinout Reference: Which GPIO pins should you use?<\/a><\/p>\n\n\n\nTable of Contents<\/h2>\n\n\n\n
\n
Introducing LittleFS<\/h2>\n\n\n\n
\n
Introducing ESP32 Web Servers<\/h2>\n\n\n\n
![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2025\/04\/request-response-esp32.png?resize=770%2C191&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2025\/04\/esp32-client-server-communication-f.png?resize=750%2C271&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n\n
Project Overview<\/h2>\n\n\n\n
![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2025\/05\/ESP32-LittleFS-Web-Server.png?resize=766%2C521&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n\n
![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2025\/05\/ESP32-LittleFS-Web-Server-Project-Overview.jpg?resize=1024%2C576&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nPrerequisites<\/h2>\n\n\n\n
1. Install ESP32 Board in Arduino IDE 2<\/h3>\n\n\n\n
\n
2. Install the ESP32 Filesystem Uploader Plugin<\/h3>\n\n\n\n
\n
3. Installing Libraries<\/h3>\n\n\n\n
Async Web Server Libraries<\/h4>\n\n\n\n
\n
![\"Installing](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/06\/Install-ESPAsyncWebServer-Library-ArduinoIDE-2-f.png?resize=666%2C586&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Installing](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/06\/Install-AsyncTCP-Library-ArduinoIDE.png?resize=722%2C586&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nInstalling BME280 libraries<\/h4>\n\n\n\n
\n
Parts Required<\/h2>\n\n\n\n
\n
![](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/10\/header-200.png?w=1200&quality=100&strip=all&ssl=1\")
<\/a><\/p>\n\n\n\nWiring the Circuit<\/h2>\n\n\n\n
![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2025\/05\/ESP32-LED-BME280-Circuit_bb.png?resize=954%2C962&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n
![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2025\/05\/esp32-little-fs-web-server-folder-organization.png?resize=708%2C370&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2025\/05\/ESP32-LittleFS-Web-Server-Control-Outputs-Monitor-Sensors-demonstration.jpg?resize=750%2C422&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n