I am really new to web design. I have an ESP32 functioning as a web socket server.
I have a weird situation where my web pages work fine locally (i.e. double click on the file) but when I serve them off my ESP32 the css is ignored. I know the exact same files are being served up locally or off the ESP32 because I compared each of the html, css, and js against the originals and what appears in the browser in debug mode so the issue is almost certainly with the file contents. Also because this usually comes up, I have cleared caches, etc…
In development mode I get no errors from Opera, Chrome, or Edge, but Firefox says
The stylesheet http://192.168.1.232/styles.css was not loaded because its MIME type, “text/html”, is not “text/css”. 192.168.1.232
The script from “http://192.168.1.232/ESP-UI.js” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type. 192.168.1.2
I suspect this is a clue: perhaps the MIME type needs to be specified by the server but is known locally. The thing is, I have specified the type (see below). I pretty much cut and pasted these from various examples. (hence the commented out lines. What am I doing wrong?
*** and additional observation: If I start Firefox and load my page then invoke the debugger, the style sheets seem to work even though I have the same errors logged ****
My html file header is (sorry it doesn’t seem to work when I include my code
but these are the relevant lines
I’m shooting in the dark a little here, but the issue could be due to your ESP32 server not setting the correct MIME types for the files it serves.
I’m not talking about specifying a type="text/javascript" attribute on your script tag (this is more or less redundant nowadays), rather how the server is sending the files.
Using the ESP32 WebServer library, you can specifying the MIME type something like this (untested):
I thought I had actually replied to my post because late yesterday I discovered that was, indeed the issue. I am not using Arduino, but ESP-IDF and many of the examples are opaque to say the least.
I observed that favicon.ico was not being served and decided to solve that. I determined that serving an icon required setting the MIME type via the server, investigated further and figured out this was generally true.
I was misled because the error was telling me something was wrong even though I explicitly stated it (text/css) in my scripts. I also find it odd that Firefox pointed out the error while none of the other browsers did.
Note that this won’t work on filenames with multiple dots, like app.min.js.
Better to find the last dot in the filename instead. Although some files do have two extensions like .tar.gz.