![\"\"](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/10\/esp32-web-server-spiffs.jpg?resize=1200%2C675&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n\nFor demonstration purposes, the web server we’ll build controls an ESP32 output, but it can be easily adapted for other purposes like displaying sensor readings.<\/p>\n\n\n\n
Recommended reading:<\/strong>\u00a0ESP8266 Web Server using SPIFFS<\/a><\/p>\n\n\n\n To follow this tutorial you should have the ESP32 Filesystem Uploader plugin installed in your Arduino IDE. If you haven’t, follow the next tutorial to install it first:<\/p>\n\n\n\n Note:<\/strong> make sure you have the latest Arduino IDE installed, as well as the ESP32 add-on for the Arduino IDE. If you don’t, follow one of the next tutorials to install it:<\/p>\n\n\n\n Before going straight to the project, it’s important to outline what our web server will do, so that it is easier to understand.<\/p>\n\n\n\n The following figure shows a simplified diagram to demonstrate how everything works.<\/p>\n\n\n\n In most of our projects we\u2019ve created the HTML and CSS files for the web server as a String directly on the Arduino sketch. With SPIFFS, you can write the HTML and CSS in separated files and save them on the ESP32 filesystem.<\/p>\n\n\n\n One of the easiest ways to build a web server using files from the filesystem is by using the ESPAsyncWebServer library. The ESPAsyncWebServer library is well documented on its GitHub page. For more information about that library, check the following link:<\/p>\n\n\n\n Installing the ESPAsyncWebServer library<\/strong><\/p>\n\n\n\n Follow the next steps to install the ESPAsyncWebServer<\/a> library:<\/p>\n\n\n\n Installing the Async TCP Library for ESP32<\/strong><\/p>\n\n\n\n The ESPAsyncWebServer<\/a> library requires the AsyncTCP<\/a> library to work. Follow the next steps to install that library:<\/p>\n\n\n\n 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<\/strong> inside the Arduino sketch folder, as shown below:<\/p>\n\n\n\n The HTML for this project is very simple. We just need to create a heading for the web page, a paragraph to display the GPIO state and two buttons.<\/p>\n\n\n\n Create an index.html<\/em> file with the following content or download all the project files here<\/a>:<\/p>\n\n\n View raw code<\/a><\/p>\n\n\n\n Because we’re using CSS and HTML in different files, we need to reference the CSS file on the HTML text. The following line should be added between the <head> <\/head> tags:<\/p>\n\n\n\n The <link> tag tells the HTML file that you\u2019re using an external style sheet to format how the page looks. The rel<\/strong> attribute specifies the nature of the external file, in this case that it is a stylesheet<\/strong>\u2014the CSS file\u2014that will be used to alter the appearance of the page.<\/p>\n\n\n\n The type<\/strong> attribute is set to “text\/css”<\/strong> to indicate that you\u2019re using a CSS file for the styles. The href<\/strong> attribute indicates the file location; since both the CSS and HTML files will be in the same folder, you just need to reference the filename: style.css<\/strong>.<\/p>\n\n\n\n In the following line, we write the first heading of our web page. In this case we have “ESP32 Web Server”. You can change the heading to any text you want:<\/p>\n\n\n\n Then, we add a paragraph with the text “GPIO state: ” followed by the GPIO state. Because the GPIO state changes accordingly to the state of the GPIO, we can add a placeholder that will then be replaced for whatever value we set on the Arduino sketch.<\/p>\n\n\n\n To add placeholder we use %<\/strong> signs. To create a placeholder for the state, we can use %STATE%<\/span>, for example.<\/p>\n\n\n\n Attributing a value to the STATE<\/span> placeholder is done in the Arduino sketch.<\/p>\n\n\n\n Then, we create an ON and an OFF buttons. When you click the on button, we redirect the web page to to root followed by \/on<\/span> url. When you click the off button you are redirected to the \/off<\/span> url.<\/p>\n\n\n\n Create the style.css file<\/em> with the following content or download all the project files here<\/a>:<\/p>\n\n\n View raw code<\/a><\/p>\n\n\n\n This is just a basic CSS file to set the font size, style and color of the buttons and align the page. We won’t explain how CSS works. A good place to learn about CSS is the W3Schools website<\/a>.<\/p>\n\n\n\n Copy the following code to the Arduino IDE or download all the project files here<\/a>. Then, you need to type your network credentials (SSID and password) to make it work.<\/p>\n\n\n View raw code<\/a><\/p>\n\n\n\n First, include the necessary libraries:<\/p>\n\n\n\n You need to type your network credentials in the following variables:<\/p>\n\n\n\n Next, create a variable that refers to GPIO 2 called ledPin<\/span>, and a String variable to hold the led state: ledState<\/span>.<\/p>\n\n\n\n Create an AsynWebServer<\/span> object called server<\/span> that is listening on port 80.<\/p>\n\n\n\n The processor()<\/span> function is what will attribute a value to the placeholder we’ve created on the HTML file. It accepts as argument the placeholder and should return a String that will replace the placeholder. The processor()<\/span> function should have the following structure:<\/p>\n\n\n\n This function first checks if the placeholder is the STATE<\/span> we’ve created on the HTML file.<\/p>\n\n\n\n If it is, then, accordingly to the LED state, we set the ledState<\/span> variable to either ON or OFF.<\/p>\n\n\n\n Finally, we return the ledState<\/span> variable. This replaces the placeholder with the ledState<\/span> string value.<\/p>\n\n\n\n In the setup()<\/span>, start by initializing the Serial Monitor and setting the GPIO as an output.<\/p>\n\n\n\n Initialize SPIFFS:<\/p>\n\n\n\n Wi-Fi connection<\/strong><\/p>\n\n\n\n Connect to Wi-Fi and print the ESP32 IP address:<\/p>\n\n\n\n Async Web Server<\/strong><\/p>\n\n\n\n The ESPAsyncWebServer library allows us to configure the routes where the server will be listening for incoming HTTP requests and execute functions when a request is received on that route. For that, use the on()<\/span> method on the server object as follows:<\/p>\n\n\n\n When the server receives a request on the root “\/<\/strong>” URL, it will send the index.html<\/em> file to the client. The last argument of the send()<\/span> function is the processor, so that we are able to replace the placeholder for the value we want – in this case the ledState<\/span>.<\/p>\n\n\n\n Because we’ve referenced the CSS file on the HTML file, the client will make a request for the CSS file. When that happens, the CSS file is sent to the client:<\/p>\n\n\n\n Finally, you need to define what happens on the \/on<\/span> and \/off<\/span> routes. When a request is made on those routes, the LED is either turned on or off, and the ESP32 serves the HTML file.<\/p>\n\n\n\n In the end, we use the begin()<\/span> method on the server<\/span> object, so that the server starts listening for incoming clients.<\/p>\n\n\n\n Because this is an asynchronous web server, you can define all the requests in the setup()<\/span>. Then, you can add other code to the loop()<\/span> while the server is listening for incoming clients.<\/p>\n\n\n\n Save the code as Async_ESP32_Web_Server<\/em> or download all the project files here<\/a>. Go to Sketch<\/strong> > Show Sketch Folder<\/strong>, and create a folder called data<\/strong>. Inside that folder you should save the HTML and CSS files.<\/p>\n\n\n\n Then, upload the code to your ESP32 board. Make sure you have the right board and COM port selected. Also, make sure you’ve added your networks credentials to the code.<\/p>\n\n\n\n After uploading the code, you need to upload the files. Go to Tools <\/strong>> ESP32 Data Sketch Upload<\/strong> and wait for the files to be uploaded.<\/p>\n\n\n\n When everything is successfully uploaded, open the Serial Monitor at a baud rate of 115200. Press the ESP32 “ENABLE<\/strong>” button, and it should print the ESP32 IP address.<\/p>\n\n\n\n Open your browser and type the ESP32 IP address. Press the ON and OFF buttons to control the ESP32 on-board LED. Also, check that the GPIO state is being updated correctly.<\/p>\n\n\n\n Using SPI Flash File System (SPIFFS) is specially useful to store HTML and CSS files to serve to a client – instead of having to write all the code inside the Arduino sketch.<\/p>\n\n\n\n The ESPAsyncWebServer library allows you to build a web server by running a specific function in response to a specific request. You can also add placeholders to the HTML file that can be replaced with variables – like sensor readings, or GPIO states, for example.<\/p>\n\n\n\n If you liked this project, you may also like:<\/p>\n\n\n\n This is an excerpt from our course: Learn ESP32 with Arduino IDE<\/a><\/strong>. If you like ESP32 and you want to learn more, we recommend enrolling in Learn ESP32 with Arduino IDE course<\/a>.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":" In this tutorial we’ll show you how to build a web server that serves HTML and CSS files stored on the ESP32 filesystem. Instead of having to write the HTML … <\/p>\nESP32 Filesystem Uploader Plugin<\/h2>\n\n\n\n
Project Overview<\/h2>\n\n\n\n
![\"\"](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/10\/esp32-async-web-server.png?resize=477%2C486&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n\n![\"\"](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/10\/async-web-server-spiffs.png?resize=1200%2C479&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n\nInstalling Libraries<\/h2>\n\n\n\n
ESPAsyncWebServer-master<\/del> to ESPAsyncWebServer<\/li>AsyncTCP-master<\/del> to AsyncTCP<\/li>Organizing your Files<\/h2>\n\n\n\n
![\"\"](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/10\/folder-organization-async-spiffs.png?resize=708%2C370&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n\nCreating the HTML File<\/h2>\n\n\n\n
<!DOCTYPE html>\n<html>\n<head>\n <title>ESP32 Web Server<\/title>\n <meta name="viewport" content="width=device-width, initial-scale=1">\n <link rel="icon" href="data:,">\n <link rel="stylesheet" type="text\/css" href="style.css">\n<\/head>\n<body>\n <h1>ESP32 Web Server<\/h1>\n <p>GPIO state: <strong> %STATE%<\/strong><\/p>\n <p><a href="\/on"><button class="button">ON<\/button><\/a><\/p>\n <p><a href="\/off"><button class="button button2">OFF<\/button><\/a><\/p>\n<\/body>\n<\/html>\n<\/code><\/pre>\n\t<link rel=\"stylesheet\" type=\"text\/css\" href=\"style.css\"><\/code><\/pre>\n\n\n\n<h1>ESP32 Web Server<\/h1><\/code><\/pre>\n\n\n\n<p>GPIO state: <strong>%STATE%<\/strong><\/p><\/code><\/pre>\n\n\n\n<p><a href=\"\/on\"><button class=\"button\">ON<\/button><\/a><\/p>\n<p><a href=\"\/off\"><button class=\"button button2\">OFF<\/button><\/a><\/p><\/code><\/pre>\n\n\n\nCreating the CSS file<\/h2>\n\n\n\n
html {\n font-family: Helvetica;\n display: inline-block;\n margin: 0px auto;\n text-align: center;\n}\nh1{\n color: #0F3376;\n padding: 2vh;\n}\np{\n font-size: 1.5rem;\n}\n.button {\n display: inline-block;\n background-color: #008CBA;\n border: none;\n border-radius: 4px;\n color: white;\n padding: 16px 40px;\n text-decoration: none;\n font-size: 30px;\n margin: 2px;\n cursor: pointer;\n}\n.button2 {\n background-color: #f44336;\n}\n<\/code><\/pre>\n\tArduino Sketch<\/h2>\n\n\n\n
\/*********\n Rui Santos\n Complete project details at https:\/\/randomnerdtutorials.com \n*********\/\n\n\/\/ Import required libraries\n#include "WiFi.h"\n#include "ESPAsyncWebServer.h"\n#include "SPIFFS.h"\n\n\/\/ Replace with your network credentials\nconst char* ssid = "REPLACE_WITH_YOUR_SSID";\nconst char* password = "REPLACE_WITH_YOUR_PASSWORD";\n\n\/\/ Set LED GPIO\nconst int ledPin = 2;\n\/\/ Stores LED state\nString ledState;\n\n\/\/ Create AsyncWebServer object on port 80\nAsyncWebServer server(80);\n\n\/\/ Replaces placeholder with LED state value\nString processor(const String& var){\n Serial.println(var);\n if(var == "STATE"){\n if(digitalRead(ledPin)){\n ledState = "ON";\n }\n else{\n ledState = "OFF";\n }\n Serial.print(ledState);\n return ledState;\n }\n return String();\n}\n \nvoid setup(){\n \/\/ Serial port for debugging purposes\n Serial.begin(115200);\n pinMode(ledPin, OUTPUT);\n\n \/\/ Initialize SPIFFS\n if(!SPIFFS.begin(true)){\n Serial.println("An Error has occurred while mounting SPIFFS");\n return;\n }\n\n \/\/ Connect to Wi-Fi\n WiFi.begin(ssid, password);\n while (WiFi.status() != WL_CONNECTED) {\n delay(1000);\n Serial.println("Connecting to WiFi..");\n }\n\n \/\/ Print ESP32 Local IP Address\n Serial.println(WiFi.localIP());\n\n \/\/ Route for root \/ web page\n server.on("\/", HTTP_GET, [](AsyncWebServerRequest *request){\n request->send(SPIFFS, "\/index.html", String(), false, processor);\n });\n \n \/\/ Route to load style.css file\n server.on("\/style.css", HTTP_GET, [](AsyncWebServerRequest *request){\n request->send(SPIFFS, "\/style.css", "text\/css");\n });\n\n \/\/ Route to set GPIO to HIGH\n server.on("\/on", HTTP_GET, [](AsyncWebServerRequest *request){\n digitalWrite(ledPin, HIGH); \n request->send(SPIFFS, "\/index.html", String(), false, processor);\n });\n \n \/\/ Route to set GPIO to LOW\n server.on("\/off", HTTP_GET, [](AsyncWebServerRequest *request){\n digitalWrite(ledPin, LOW); \n request->send(SPIFFS, "\/index.html", String(), false, processor);\n });\n\n \/\/ Start server\n server.begin();\n}\n \nvoid loop(){\n \n}\n<\/code><\/pre>\n\tHow the Code Works<\/h3>\n\n\n\n
#include \"WiFi.h\" \n#include \"ESPAsyncWebServer.h\" \n#include \"SPIFFS.h\"<\/code><\/pre>\n\n\n\nconst char* ssid = \"REPLACE_WITH_YOUR_SSID\"; \nconst char* password = \"REPLACE_WITH_YOUR_PASSWORD\";<\/code><\/pre>\n\n\n\nconst int ledPin = 2;\nString ledState;<\/code><\/pre>\n\n\n\nAsyncWebServer server(80);<\/code><\/pre>\n\n\n\nprocessor()<\/h3>\n\n\n\n
String processor(const String& var){\n Serial.println(var);\n if(var == \"STATE\"){\n if(digitalRead(ledPin)){\n ledState = \"ON\";\n }\n else{\n ledState = \"OFF\";\n }\n Serial.print(ledState);\n return ledState;\n }\n return String();\n}<\/code><\/pre>\n\n\n\nif(var == \"STATE\"){<\/code><\/pre>\n\n\n\nif(digitalRead(ledPin)){\n ledState = \"ON\";\n}\nelse{\n ledState = \"OFF\";\n}<\/code><\/pre>\n\n\n\nreturn ledState;<\/code><\/pre>\n\n\n\nsetup()<\/h3>\n\n\n\n
Serial.begin(115200);\npinMode(ledPin, OUTPUT);<\/code><\/pre>\n\n\n\nif(!SPIFFS.begin(true)){\n Serial.println(\"An Error has occurred while mounting SPIFFS\");\n return;\n}<\/code><\/pre>\n\n\n\nWiFi.begin(ssid, password);\nwhile (WiFi.status() != WL_CONNECTED) {\n delay(1000);\n Serial.println(\"Connecting to WiFi..\");\n}\nSerial.println(WiFi.localIP());<\/code><\/pre>\n\n\n\nserver.on(\"\/\", HTTP_GET, [](AsyncWebServerRequest *request){\n request->send(SPIFFS, \"\/index.html\", String(), false, processor);\n});<\/code><\/pre>\n\n\n\nserver.on(\"\/style.css\", HTTP_GET, [](AsyncWebServerRequest *request){\n request->send(SPIFFS, \"\/style.css\",\"text\/css\");\n});<\/code><\/pre>\n\n\n\nserver.on(\"\/on\", HTTP_GET, [](AsyncWebServerRequest *request){\n digitalWrite(ledPin, HIGH);\n request->send(SPIFFS, \"\/index.html\", String(),false, processor);\n});\nserver.on(\"\/off\", HTTP_GET, [](AsyncWebServerRequest *request){\n digitalWrite(ledPin, LOW);\n request->send(SPIFFS, \"\/index.html\", String(),false, processor);\n});<\/code><\/pre>\n\n\n\nserver.begin();<\/code><\/pre>\n\n\n\nUploading Code and Files<\/h2>\n\n\n\n
![\"\"](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/12\/arduino-ide-upload-button.png?resize=34%2C29&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n\n![\"\"](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/10\/sketch-data-upload.png?resize=295%2C391&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n\n![\"\"](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/10\/esp32-ip-address.png?resize=574%2C362&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n\nDemonstration<\/h2>\n\n\n\n
![\"\"](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/10\/esp32-web-server-spiffs-example.jpg?resize=1200%2C675&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n\nWrapping Up<\/h2>\n\n\n\n