Embed bootstrap into ESP8266

SBSP

Senior Member
Joined
Sep 7, 2007
Messages
663
Reaction score
15
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.
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");
}
 
This is pretty awesome! Will def use this ... thanks for sharing
 
Very interesting. What do you use this for, a mini webserver?

The ESP8266 is quite capable it seems for the low price
 
Very interesting. What do you use this for, a mini webserver?

The ESP8266 is quite capable it seems for the low price
This allows you to create an internet connected 'thing' but then also create a nice UI for it. The ESP can run a little webserver on it and then server the pages.
 
This allows you to create an internet connected 'thing' but then also create a nice UI for it. The ESP can run a little webserver on it and then server the pages.

Great project. Makes me want to experiment with the ESP8266 again. I tend to stick to the Raspberry PI
 
This allows you to create an internet connected 'thing' but then also create a nice UI for it. The ESP can run a little webserver on it and then server the pages.
Yup... did that for a client of mine last year.. it even had a REST API
 
I would have just got an ESP32, yes I'm that lazy! :D
 
Very interesting. What do you use this for, a mini webserver?

The ESP8266 is quite capable it seems for the low price

I used it to create a web interface for a wireless project I have related to 3d Printing.

It monitors the status and progress of the printer sitting in the garage.

login.jpg

Temp.jpg

And the above SSID and password configuration takes place via putty.

console.jpg
 
I would have just got an ESP32, yes I'm that lazy! :D

I assume you mean just host the HTML code directly from the Arduino code ?

Even when using a ESP32 and serving HTML js/css data directly from code is a bad idea. It will or rather should suffer from the same issue. Because you basically have to cramp the whole page including bootstrap into a single string.

Quickly checking bootstrap is about 142 000 characters.
The moment things take a little to long the internal watchdog will trigger a force reset because it thinks something is stuck.

Also serving them directly from code is more work because you have to escape quotes everytime you copy it over to the Arduino IDE and then there will also be no syntax highlighting. Your code will end up being very long and confusing.

SPIFFS <FS.h> will stream the file in chunks instead of trying to load everything into RAM at once.
 
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.
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");
}

Awesome sauce!
 
Interesting. I have a couple of 12F and nodemcu's that I should really unpack. Need a mini webserver to take over daily from our IIS webserver that we pull offline outside office hours.
 
Top
Sign up to the MyBroadband newsletter