ESP Web server implementing guest book

Used technologies 

In this post, I will show how the ESP-8266 works as a Web server and DNS server over a WiFi access point.

It uses ESP's internal SPIFFS file system to store static files and user comments on web servers.

For this project you don't need any extra hardware, so plain ESP board is enough. I used Wemos D1 mini. Like Here

To upload static JavaScript files and libraries to the ESP file system, you need to install a special tool for Arduino IDE.You can get it from Here. ( Arduino ESP8266 filesystem uploader )


On client side project uses JQuery, Bootstrap, and Vue.js
https://jquery.com/
https://getbootstrap.com/
https://vuejs.org/

Because this is not JavaScript blog, I won't go through the client side so much.

Whole project can be found from my git HERE

Setup

Copy files from GIT or clone it to your hard disk.
"Data" folder has files that filesystem uploader will copy to ESP, this folder has to be in same folder as "Vieraskirja1.ino".

Install "Arduino ESP8266 filesystem uploader" if you do not yet have it. Remember to restart Arduino IDE after installing it.

Server code

- -

Client code

Client code is in one file, to enable easy OTA (over-the-air) updates to client code.
Used JavaScript libraries are minified and gzipped to save bandwidth.
ESP is not so powerful as a normal web server, and Wifi APN allows only 4 user to connect at the same time.
--

Using GuestBook

When you have uploaded codes to ESP, it's time to fire it up.

There should now be new Wifi Access point called "MyIoT", connect to it.

You may see this kind of notification, saying "Wifi is not connceted to internet, should we keep connection" (Sorry, picture is in Finnish)

Answer yes to it, so connection is not closed after while.
Then go with your browser to "www.iot.com", do not forget www from front of it!
Now you should be able to see guest book, and be able to send messages.

OTA update

This is only for advanced users, and I might do separate post about this.

Update is not done as good as it could, it's only rest service where you need to send new file. You can use chrome extension called POSTMAN.