I try to host an HTML file on an esp8266 access point. I can properly show an .html file. Unfortunately, when accessing the html page, my browser cannot display javascript content. Strangely, when I work locally on my machine - it works perfectly fine. When I access the page on the esp8266 I receive the error

"Not found: dygraph.min.js."

Obviously, the browser does not find the javascript source. I wonder why. I have tried out several ways of naming and referencing, but I was not lucky until now.

I upload the files with the ESP8266 Sketch Data Upload tool to the SPIFFS. In the html file I reference the js as <script type="text/javascript" src="dygraph.min.js"></script>.

Did anybody experience anything like this before? The whole code can be found here:

I am looking forward for your input!

Thanks and best!

I try to host an HTML file on an esp8266 access point. I can properly show an .html file. Unfortunately, when accessing the html page, my browser cannot display javascript content. Strangely, when I work locally on my machine - it works perfectly fine. When I access the page on the esp8266 I receive the error

"Not found: dygraph.min.js."

Obviously, the browser does not find the javascript source. I wonder why. I have tried out several ways of naming and referencing, but I was not lucky until now.

I upload the files with the ESP8266 Sketch Data Upload tool to the SPIFFS. In the html file I reference the js as <script type="text/javascript" src="dygraph.min.js"></script>.

Did anybody experience anything like this before? The whole code can be found here: https://github./JohnnyMoonlight/esp8266-AccessPoint-Logger-OfflineVisualisation

I am looking forward for your input!

Thanks and best!

• javascript
• html
• esp8266
• nodemcu

• When you directly request JavaScript file from esp8266 it loads correctly? – Stranger in the Q Commented Jul 29, 2018 at 14:18

1 Answer 1

Take a read through your code, and imagine the requests that will be made of your web server.

Your code is written to handle requests for two URLs: / and /temp.csv - that's it.

When /temp.csv is accessed, you serve the contents of index.html. When the browser interprets that file it will try to load /dygraph.min.js from your ESP. You don't have a handler for that file. So the load fails.

You need to add a handler for it and then serve the file. So you'll need to add a line like:

server.on("/dygraph.min.js", handleJS);

and define function void handleJS() that does what handleFile() does.

You'll need to do the same thing for the /dygraph.css; you don't have a handler for it either.

I would do it this way:

void handleHTML() {
  handleFile("index.html");
}

void handleJS() {
  handleFile("dygraph.min.js");
}

void handleCSS() {
  handleFile("dygraph.css");
}

void handleFile(char *filename) {
  File f = SPIFFS.open(filename, "r");
  // the rest of your handleFile() code here
}

and in your setup():

  server.on("/", handleRoot);
  server.on("/temp.csv", handleHTML);
  server.on("/dygraph.css", handleCSS);
  server.on("/dygraph.min.js", handleJS);

Separately:

Your URL to file mappings are messed up. The code I shared above is consistent with what you have now, but normally you'd want / to serve index.html; you have it serving a fragment of HTML.

Normally /temp.csv would serve a ma-separated value file. I see you have one, in the repo and you have code to add data to it; you're just not serving it. Right now you have that serving index.html. Once you start successfully loading the Javascript you'll have problems with that.

You'll need to sort those out to get this working right.

Also, in loop() you should move server.handleClient(); to be the first thing in the loop. The way you have it written you're only checking to see if there's a web request if it's time to take another temperature reading. You should always check to see if there's a web request, otherwise you're unnecessarily slowing down web service.

One last thing, pletely separate from the web server code, and I wouldn't worry about this till you get the rest of your code working: your code is writing to SPIFFS roughly every 5 seconds. SPIFFS is stored in flash memory on the ESP8266. ESP8266 boards use cheap flash memory that doesn't last a long time - it wears out after maybe 10,000 to 100,000 write cycles (this is a little plicated; it's broken into "pages" and the individual cells in the pages wear out, but you have to write the entire page at the same time).

It's hard to say for sure what its lifetime will be; it depends on the specific ESP8266 boards and flash chips involved. 10,000 write cycles means the flash memory on your board might start failing after 50,000 seconds - 100,0000 write cycles would give you about 500,000 writes -- if you keep writing to the same spot. It depends on how often the same place in flash is getting written to. If that's a problem for you, you might want to increase the delay between writes or do something else with your data.

You might not run into this because you're appending to a file - you'll still rewrite the same blocks of flash memory many times, but not 10,000 times - unless you often remove the CSV file and start over. So this might be a problem for you long term or might not.

You can read more about these problems at https://design.goeszen./mitigating-flash-wear-on-the-esp8266-or-any-other-microcontroller-with-flash.html

Good luck!