I created a post abut this a while back. search for some reason does not find it.
I managed to fully embed bootstrap into the ESP8266 and its running like a charm.
All I had to do is make use of SPIFFS. Compress bootstrap and the HTML pages using Gzip then pass the compressed version of all files to the browser. Most browsers support compressed pages.
I created a tutorial here if anyone is interested. --> http://www.techtinker.co.za/2018/08/28/fully-embed-bootstrap-into-an-esp8266-web-server/
But below is a full example of the code. The web server runs in station mode instead of AP mode.
The code.
I managed to fully embed bootstrap into the ESP8266 and its running like a charm.
All I had to do is make use of SPIFFS. Compress bootstrap and the HTML pages using Gzip then pass the compressed version of all files to the browser. Most browsers support compressed pages.
I created a tutorial here if anyone is interested. --> http://www.techtinker.co.za/2018/08/28/fully-embed-bootstrap-into-an-esp8266-web-server/
But below is a full example of the code. The web server runs in station mode instead of AP mode.
The code.
Code:
#include <FS.h>
#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
const char* ssid = "Your_Existing_AP";
const char* password = "password_of your_existing_wifi_network";
ESP8266WebServer server(80);
void setup() {
Serial.begin(250000);
WiFi.mode(WIFI_STA);
WiFi.begin(ssid,password);
// Wait for connection
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println(WiFi.localIP());
server.begin();
server.on("/", fileindex);
server.on("/index.html", fileindex);
server.on("/bootstrap.min.css", bootstrap);
server.on("bootstrap.min.css", bootstrap);
server.on("/popper.min.js", popper);
server.on("/bootstrap.min.js", bootstrapmin);
server.on("bootstrap.min.js", bootstrapmin);
//NEW
SPIFFS.begin();
}
void loop() {
server.handleClient();
}
void fileindex()
{
File file = SPIFFS.open("/index.html.gz", "r");
size_t sent = server.streamFile(file, "text/html");
}
void bootstrap()
{
File file = SPIFFS.open("/bootstrap.min.css.gz", "r");
size_t sent = server.streamFile(file, "text/css");
}
void popper()
{
File file = SPIFFS.open("/popper.min.js.gz", "r");
size_t sent = server.streamFile(file, "application/javascript");
}
void bootstrapmin()
{
File file = SPIFFS.open("/bootstrap.min.js.gz", "r");
size_t sent = server.streamFile(file, "application/javascript");
}