ESP32 HTTP Web Server With Content Served from SPIFFS Filesystem

In this video, I demonstrate how to set up a web server on an ESP32 and serve content from the SPIFFS filesystem.
Platform.io have moved the Upload FS command and made it quite hard to find - see here if you are struggling - • SPIFFS Upload in Platf...
We set up and endpoint so that we can switch an LED on and off. You can add WiFi control to any of your projects.
I show you how to build a simple User Interface using HTML and JavaScript.
And then we serve that UI directly from the ESP32 using files stored in the SPIFFS filesystem. This makes our device completely self-contained.
I also show how you can compress the content to save valuable space.
The GitHub repo with the sample code can be found here: github.com/atomic14/ESP32WebS...
If you enjoyed this video please subscribe to the atomic14 channel by clicking here: / @atomic14

[@simonkufeld7903]

nice work! I was wondering whether LittleFs also works with the EspAsyncWebserver

[@atomic14]

I’ll take a look.

[@atomic14]

I will look at this - got slightly sidetracked with audio projects...

[@BuildEver]

OMG, this tut explains sooo much! Thank you :) Especially for the mDNS

[@atomic14]

Thanks - just a word of caution - Android devices don't do mDNS - very annoying as it's such a nice way of making a UI for your device.

[@L-36]

I like your new microphone quite a lot. This video suffers from lack of a good mic.

[@atomic14]

It’s made huge difference to the audio quality. It’s a shame RUclips doesn’t let you update existing videos.

[@taqqiraja2722]

hey! can I send pulses from pulse sensors through the Async server? I'm talking about displaying a realtime graph of a heart pulse on a server

[@Faabsen97]

Hey i have a little Problem. I tried to run the Example, but the Serial Monitor only shows me "Not Found".

[@medb2322]

hello is it possible to upload data measurement of a sensor that are saved in the spiffs filesystem with this method

[@atomic14]

I don't see why not. They are just files so you can serve the contents up.

[@EGARZAGU]

excellent work! I was wondering if can also use css and javascript files? If that so it be same as calling the html file?

[@atomic14]

Yes they work without any problem as well.

[@Schlohmotion]

Is it possible to have file trees in the spiffs?
Sepcifically: I plan to copy the chart.js-library to the spiffs, so my eps32-hosted site does not need internet connection for beautiful graphs, charts and diagrams.

[@Schlohmotion]

I am sorry for my bad english.

[@fusianafredy5143]

HI @atomic14 i am doing one of project. do u know how can i get contact image sensor image (CIS) and compare that image with prepossessed image to verify it.

[@atomic14]

It might be worth you jumping onto Reddit and asking in the Arduino forums. I don't know if you CIS will have an interface that will let you pull images from it easily. But someone there might know.

[@indrawanbudiprasetyo1182]

What is your platform to start the server? before you create simple html ui

[@SpinaRCSpeed]

Hello, how to serve web server from Spiffs and access point ? without wifi network of home
please ?

[@atomic14]

Hi Spina, there's a good tutorial on how to do this here - randomnerdtutorials.com/esp32-access-point-ap-web-server
You just need to setup the WiFi in access point mode and then connect to the IP address of your ESP32.

[@SpinaRCSpeed]

@@atomic14 thank you for your reply

[@HeitorYT]

IoT 😍

[@enredao_electronico2737]

I'm Using Platformio under Windows and I get this error : \ESPAsyncWebServer-esphome\src\WebHandlers.cpp:67:64: error: 'strftime' was not declared in this scope
This problem happens in Windows only. Linux and Mac are case sensitive for files, so these OSes differ between time.h and Time.h. Windows doesn't.
The workaround I used was
At platformio.ini file I ignored :
lib_ignore=Time
After this my compile was success
I hope this Help Others .

[@atomic14]

Thanks for this Cesar - the joys of cross platform development!

[@arievandermaarl3000]

What is the tool what is used for the HTTP request, I cannot hear what is said.

[@atomic14]

Hi Arie, I was using a tool called Postman - apologies for the poor quality audio on the video - it was recorded before I had a proper microphone.

[@arievandermaarl3000]

@@atomic14 Thanks for your reply, I am going to try it.

[@tudinenominoe6992]

Great! Work well on PC but an android phone can't find demo-server.local. It work with adress. Have an idea why?

[@atomic14]

Unfortunately Android doesn't support mDNS so unfortunately, it can't find .local addresses. There are some long outstanding feature requests for support but they don't seem to be getting prioritised. The only workaround is to use the IP address instead - which is not ideal. You should be able to set up a fixed IP address for the ESP32 on your WiFi router DHCP settings.

[@bektinurwanto]

Please make tutorial in littlefs sir

[@atomic14]

I will add it to the list.