ESP32 Thing Plus, Bootstrap, SPIFFs, and ESPAsync a learn.sparkfun.com tutorial

Available online at: http://sfe.io/t1000

Introduction

This tutorial details how to turn an ESP32 Thing Plus into a good looking and responsive Web Server that controls four relays via I²C. The web page's theme and its' scalability from desktop to mobile phone will be made possible with Bootstrap - a toolkit for HTML, JS, and CSS. The Arduino Sketch is modified from the the ESPAsync File System Browser example code from the ESPAsync library and is used in conjunction with SPIFFS (SPI Flash File System) which turns your ESP32 into a hard drive that can hold all the dependent files for Bootstrap and the functions for turning on and off relays. This tutorial is based off a series of blog posts that share the intent and pit falls of this project as it grew. The first two in the series can be found here: Infrared tripwires to automate light switching and The ESP32 Web Server. Even if you decide to not use this to automate your lights, you can still use the information to create a good looking web page for your ESP32 that does something awesome; just make sure to leave a comment.

This is an ongoing project and so expect this to build over time as more posts have been added. You can expect two week gaps between each update. Last update was 9/12/2019

What's next?

You can check back here to see what's next to be updated, this will be updated as the tutorial grows. If you have any questions or suggestions, place them in the comments below.

To Do

Update the Tutorial with the ESP32 Web Server section. Everything up to loading HTML, Bootstrap, and JS scripts onto ESP32 Thing Plus, this includes installing ESPAsync library and detailing what is needed in Bootstrap, resources for installing various requirements.
Update tutorial with the Infrared tripwires Arduino Sketch and fill in details on the hardware hookup.
Return to the ESP32 Web Server and introduce AJAX requests in place of straight GET requests.
Implement I²C functions for relays.
Add JSON files to store data related to WiFi settings and the state of each individual relay.
Add a separate login web page when default WiFi settings don't connect to WiFi.
Add trouble-shooting section to tutorial.