Use SPIFFS filesystem
You can use the SPI flash on your ESP8266 as a filesystem to store the HTML and Javascript files. The SPIFFS component is used for this purpose ( https://arduino-esp8266.readthedocs.io/en/latest/filesystem.html#spiffs-and-littlefs ).
The Chart.js file is relatively large - approx. 180 kB even when minified - so this might only be feasible when using an ESP8266 board with at least 4 MB flash memory.
You don't specify which ESP8266 platform you are using, but my NodeMCU variant has 4 MB Flash. I allocate a fraction of this - typically 1 MB - for the filesystem.
Preparing to use the SPIFFS filesystem with Arduino is a 3-step process:
- Firstly download the SPIFFS upload tool from https://github.com/esp8266/arduino-esp8266fs-plugin (go to the 'Releases' page)
- follow the instructions there to install it alongside your Arduino installation
- Create a
data
sub-folder in your Sketch folder with your HTML and CSS files
- /data -
- /index.html
- /Chart.min.js
- Upload the filesystem contents using the Arduino IDE
Tools
-> ESP8266 Sketch Data Upload
Once you've done that you can use the filesystem more-or-less in the following manner ...
#include "FS.h"
// snip
if (!SPIFFS.begin()) {
Serial.println("Failed to mount filesystem!\n");
}
File file = SPIFFS.open("/index.html", "r");
file.close();
Particularly relevant to your application is the inclusion of an overloaded streamFile()
method in the ESP8266WebServer
class which accepts a File
object as argument. Assuming you have
static ESP8266WebServer server(80);
somewhere in your code, you can use this method as follows ...
static void handleRoot() {
File file = SPIFFS.open("/index.html", "r");
if (!file) {
server.send(500, "text/plain", "Problem with filesystem!\n");
return;
}
server.streamFile(file, "text/html");
file.close();
}
As you probably know already, the handleRoot()
function is intended as a server callback - which should be installed using server.on("/", handleRoot);
.
Map URIs in HTTP request to filesystem paths
Now for the most useful part ...
You can use the server.onNotFound();
method to send arbitrary files to a web client. First of all create the relevant callback:
static void handleNotFound() {
String path = server.uri(); // Important!
if (!SPIFFS.exists(path)) {
server.send(404, "text/plain", "Path " + path + " not found. Please double-check the URL");
return;
}
String contentType = "text/plain";
if (path.endsWith(".css")) {
contentType = "text/css";
}
else if (path.endsWith(".html")) {
contentType = "text/html";
}
else if (path.endsWith(".js")) {
contentType = "application/javascript";
}
File file = SPIFFS.open(path, "r");
server.streamFile(file, contentType);
file.close();
}
Then install it in your setup()
function:
server.onNotFound(handleNotFound);
HTML and CSS files
If you then update your index.html
- changing
<script src="./node_modules/chart.js/dist/Chart.min.js"></script>
to simply
<script src="Chart.min.js"></script>
and upload the contents of your data
folder using the method outlined above, your application should work as expected.
Screenshot of web page served by my own ESP8266 shown below.
