search

esphome / feature-requests

ESPHome Feature Request Tracker
https://esphome.io/
411 stars 26 forks source link

How to serve CSS files for web_server? #1183

Closed alve89 closed 3 years ago

alve89 commented 3 years ago

Describe the problem you have/What new integration you would like

Usually I'm on Home Assistant so I configured my device (an ESP8266) for my current project in ESPHome in HA. I want to add a webserver, so I added 

web_server:
    port: 80

following this guide: https://esphome.io/components/web_server.html

What I'm missing is a clear explanation of how to include / serve CSS/JS files for an no-internet-access device.

Please describe your use case for this integration and alternatives you've tried:

That's what's written on the web_server documentation page:

Example web_server configuration with CSS and JS included from esphome-docs. CSS and JS URL’s are set to empty value, so no internet access is needed for this device to show it’s web interface.

# Example configuration entry
web_server:
    port: 80
    css_include: "../../../esphome-docs/_static/webserver-v1.min.css"

So - where and how can I serve the webserver-v1.min.css file (or any other custom file)? Googling for esphome-docs css doesn't give me a result on how to bring my CSS file onto the ESP8266.

Additional context

I'd appreciate first to get an explanation how I can bring a CSS file onto my device and second an update of the provided EPSHome-site (after an explanation I could do this there by myself as contribution if it is wished).

Thank you!

glmnet commented 3 years ago

Well that "../../../esphome-docs/_static/webserver-v1.min.css" might be confusing...

You have to copy the webserver-v1.min.css in your local folder right where the yaml is, then you can include the contents of the file in the esp device memory with just 

web_server:
    port: 80
    css_include: "webserver-v1.min.css"

you can rename the css file if you want, it really doesn't matter. And you can get the file from https://esphome.io/_static/webserver-v1.min.css

alve89 commented 3 years ago

Thanks for the quick reply! Just for information if someone has the same problem:

The correct path (using home assistant) is:

web_server:
    port: 80
    css_url: ""
    css_include: "/config/esphome/webserver-v1.min.css"

Perhaps you could also update the documentation-page...