New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to use ESP8266WebServer library and RequestHandler to serve SPIFFS files ? #1942

Closed
hallard opened this Issue Apr 19, 2016 · 18 comments

Comments

Projects
None yet
8 participants
@hallard
Copy link
Contributor

hallard commented Apr 19, 2016

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

This comment has been minimized.

Copy link

liquidfalcon commented Apr 19, 2016

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

This comment has been minimized.

Copy link
Contributor

gmag11 commented Apr 20, 2016

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

@hallard

This comment has been minimized.

Copy link
Contributor Author

hallard commented Apr 20, 2016

@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

This comment has been minimized.

Copy link
Contributor

gmag11 commented Apr 21, 2016

@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

This comment has been minimized.

Copy link
Contributor Author

hallard commented Apr 26, 2016

@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 ;-)
image
image
image
image
image

@hallard hallard closed this Apr 26, 2016

@gmag11

This comment has been minimized.

Copy link
Contributor

gmag11 commented Apr 26, 2016

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

@kiralikbeyin

This comment has been minimized.

Copy link

kiralikbeyin commented Jul 24, 2016

@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"

fff

@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

This comment has been minimized.

Copy link

kiralikbeyin commented Jul 26, 2016

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

This comment has been minimized.

Copy link
Collaborator

me-no-dev commented Jul 26, 2016

@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

This comment has been minimized.

Copy link
Contributor

gmag11 commented Jul 27, 2016

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

@kiralikbeyin

This comment has been minimized.

Copy link

kiralikbeyin commented Jul 27, 2016

@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

This comment has been minimized.

Copy link
Collaborator

me-no-dev commented Jul 27, 2016

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

@kiralikbeyin

This comment has been minimized.

Copy link

kiralikbeyin commented Jul 27, 2016

@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

This comment has been minimized.

Copy link

kiralikbeyin commented Jul 28, 2016

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

@ozett

This comment has been minimized.

Copy link

ozett commented Sep 29, 2016

@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:
#1942 (comment)
👍

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

thanks.tozett

@usmanshahid001

This comment has been minimized.

Copy link

usmanshahid001 commented Mar 22, 2018

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

This comment has been minimized.

Copy link

kiralikbeyin commented Mar 22, 2018

@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

This comment has been minimized.

Copy link

mbta009 commented Nov 9, 2018

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment