Arduino: How to use ESP8266WebServer library and RequestHandler to serve SPIFFS files ?

[hallard]

I've been using code based on example FSBrowser.ino for handling and serving SPIFFS files for long time and this is working great. But I saw that this part of code is now also present on ESP8266WebServer library (in detail/RequestHandlersImpl.h and detail/RequestHandlers.h) and it's almost the same.

I wanted to clean up my code and use the one in this library but I don't know how to use this implementation and I did not found any example. Any idea on how to do this ? (I tried server.getContentType(myURI) for example but this method is not on "server")

If I understand how to use it, I can make change to FSBrowser.ino example to use the library code instead of hard coding (and duplicating code) in the ino file ?

[liquidfalcon]

I don't think the example uses it, but, the function you want is serveStatic(..) in ESP8266WebServer. It'll serve up files from SPIFFS automatically if other handlers do not claim that path.

[gmag11]

You can find an example in my code. Have a look to https://github.com/gmag11/FSBrowser/

[hallard]

@liquidfalcon I already had a
server.serveStatic("/", SPIFFS, "/", "max-age=86400");
to put files in browser cache, and I deleted all my handle associated code not needed in my .ino as you suggested, guess what, works fine ;-) thanks for the tip
@gmag11, thanks, nice piece of code, I'm also having my own config/network/wifi but with boostrap FW.
Good to know it exists, I will grab your NTP part ;-)

[gmag11]

@hallard Sure you can get it. I'm a begginer with html and javascript. I do not have enough skills with bootstrap to include in my interface, but it would be easy to modify my pages are they are all static and stored on SPIFFS.
Ace Editor is great. I knew about it when used FSBrowser example. I can edit pages directly on ESP!
I'd like to have a look to your bootstrap GUI, may you send a link?

[hallard]

@gmag11
Ace looks great, I need to put it on my FW because it's cool to quick modify files :-)
Interface is not released yet but looks something like that (I also spent some months to extend my knowledge to HTML5/CSS3/JQuery and bootstrap) No difficult, but takes time ;-)

[gmag11]

Looks really great! I've followed you here. Let me know if you publish code.

[kiralikbeyin]

@gmag11 I just download your lib really awesome! Thanks!
There is a problem with file names i think @hallard noticed that because he is using bootstrap

"glyphicons-halflings-regular.*" -- > "glyphicons-halflings-regu"

@hallard Do you have any solution for long file names more than 32 chars? It will be great if you share your code. Maybe you remember i asked it 2 months ago :) I am following you 👍

[kiralikbeyin]

i am getting LmacRxBlk:1 errors for my index.htm file.
I use bootstrap and merged all css and js files to one css and one js.

[me-no-dev]

@kiralikbeyin I have a solution for LmacRxBlk:1 and long filenames :)
it's called ESPAsyncWebServer. Just using it will get rid of LmacRxBlk:1, as for the long names, you can use rewrite like this:

server.rewrite("/file-with-verry-long-name.ext" "/short-name.ext");

and upload the files with their short names, the server will send them when the long one is requested. The server example includes an Async version of the FSBrowser

[gmag11]

I already knew about ESPAsyncWebServer. I want to switch to it as soon I find some time ;-)

[kiralikbeyin]

@me-no-dev i looked this lib before but didn't understand what it is for really :) Do you have a template with a bootstrap theme :) I am trying to merge @gmag11 repo with a bootstrap theme...
This is https://github.com/kiralikbeyin/ace-on-esp-local?files=1 ace files needed without internet connection maybe you can use for an example in ESPAsyncWebServer.

@gmag11 thanks i will also try to switch but its too hard for me...

@hallard i know you already merged @gmag11 repo with a bootstrap theme, we all see pictures above :)

[me-no-dev]

@kiralikbeyin if you did not understand what the Async Web server is for, better do not bother with it ;)

[kiralikbeyin]

@me-no-dev maybe everything is about only caching :)

https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache

CACHE MANIFEST
/css/main.css
/js/all.js
/img/favicon.ico
/img/evak.jpg
/f/fontawesome-webfont.woff
/f/g.woff
/css/font-awesome.min.css


NETWORK:
*

/f/g.woff is normally ; /fonts/glyphicons-halflings-regular.woff

I am starting with ESPAsyncWebServer now

[kiralikbeyin]

@me-no-dev really fast now i must convert all my shit :) thank you

[ozett]

@hallard
i searched your github repository, hoping to find some hints how you made the spiffs filebrowser with webui on the esp. 😞

like you showed here before:
https://github.com/esp8266/Arduino/issues/1942#issuecomment-214698254
👍

i would be glad, if you got notification from here and maybe it is anywhere to see?

thanks.tozett

[usmanshahid001]

hiii...
i am implementing webserver on esp32 i am not using bootstrap online as my device will be use on local ap of esp32.my problem is that i need to upload bootstrap from SPIFFS to cache of browser at the first hit so that page load time could decrease next time but i am unable to do so....i dont know how to send explicit file,,,,i tried a method where i gave this link http://192.168.4.1/boot.min.css in html header and it worked but is there any proper way to do this please help me

[kiralikbeyin]

@usmanshahid001
gzip, make your html file .gz
embed .css or .js directly to your html file
about cache :https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache

[mbta009]

@hallard
Hello and respect
Thanks for the library WifiInfo
In this post, your WifiInfo text entries are in English. But in your repositories, this version is in French. Is the English version available for download?
thank you