Embed bootstrap into an ESP8266 Web server with SPIFFS

The ESP8266 is a pretty neat micro-controller. As you probably already know it can run as a web server for both AP and Station modes.

In case you don’t know.
AP mode is when the ESP8266 behaves like an access point on its own. Allowing other devices to connect to it using the ESP8266 SSID and password.
Station mode is when the ESP8266 connects to an existing wireless network using the SSID and password of the 3rd party Access point such as a Dlink access point.

There are two ways for the ESP8266 to host a web server serving web pages.

1. Directly from code. Not recommended especially when using a CSS framework such as bootstrap. Because you will have to serve the HTML and CSS using arduino code which will result in a very long and confusing sketch. I have tried this before. when the page becomes to lengthy the ESP will sometimes randomly stop serving HTML somewhere in the middle of the page which results in a half rendered HTML page. Also Bootstrap is way to big to do it this way.

2. Using SPIFFS. Part of the flash rom becomes storage space on the ESP8266 where you can place files. These files may also be compressed in to .gz zip format because most modern browsers support compression. This makes things much faster and way more reliable.

This is how we do it. In the below example we will make use of station mode. You can alter the code to run in AP mode if you like.(Not covered in this article)

Off coarse this can also be done from and SD card but that requires extra hardware and code. I’m not covering it in this article.
The code explained.
1. You will need to include the built in <FS.h> library which manages the files in the flash rom.

2. To upload files to the ESP8266 flash rom you need an extra add-in for the Arduino IDE. Here is a guide on how to install it. But in a nut shell you have to extract the contents of the plugin in to the tool directory of your Arduino IDE installation. (home_dir]\Arduino\tools\ESP8266FS\tool\esp8266fs.jar) download the plugin zip file from here. If you set it up correctly. In the Tools menu of the Arduino IDE you will have an extra option Tools–>ESP8266 Data Sketch Upload. In the same directory where your .ino sketch file lives you have to create a folder called data and then you simply place all of your files into that folder and hit the ESP8266 Data Sketch Upload from the tools menu and it will upload.

Remember to always make use of compressed files it will save you lots of space and it will also speed it up by quite a bit. I use 7-Zip to zip files in .gz format. See below screenshots.

 

 

You have to specify the page paths that will be called I.E / & /index.html will directed to the fileindex void and void fileindex() will serve the index.html.gz compressed file. And in turn your browser will automatically decompress it. The bootstrap CSS files called from with in index.html will point it to the compressed bootstarp js and css files accordingly.

Important note!: You must specify the file type that will be served other wise the browser will not render I.E the CSS files correctly if at all.

See the below code.
Index.html is just a text file so it can be specified as text with not issue.
But bootstarp.min.css and bootstrap.min.js has to be specified correctly.

Example:

server.streamFile(file, "text/html");
server.streamFile(file, "text/css");
server.streamFile(file, "application/javascript");

Full Code Example:

#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");
}

The result should look like this.

Using bootstrap on your ESP8266 will give it much better and professional look.

For your conveniance I shared the project on Google Drive

Enjoy!

Leave a comment below!.

You May Also Like

About the Author: Martin Viljoen

5 Comments

    1. Hi. jquery is not needed. If not included it will however remove some functionality.
      But the code as per this tutorial works without jquery.

      Thanks for visiting 🙂

    1. I have not yet tried using ajax. I see no reason for it not to work though.

      For small ESP8266 projects js should work just fine instead of using AJAX.

Leave a Reply

Your email address will not be published. Required fields are marked *