I've since moved away from LiteDB and created the backend using SQLite and Python

Hosting a Local Website on Raspberry Pi with Flask

Let's jump straight in. I wanted to keep things simple, so I decided to use a basic html, css and javascript setup with Python Flask. I used ChatGPT to generate a html file with the form that I wanted, some basic css and a javascript file. I refined them myself until I was happy with the look and functionality. My target is a tablet, so I didn't bother too much with the desktop experience.

You can find the repository for the page here.

The page works by adding an event listener to each input. An event listener is used to do something when a certain action is taken. For my use case it updates the actual pet value next to the input value when the input value is updated. The actual value is the difference between the base value and the input value. The base value could be removed or set to zero, if you have a proper scale for the pets. Pressing "Submit" sends a list of json entities to the ip and port defined in the script.js file "raspIp" variable.

Creating the deployment

For the deployment of the page I chose a nohup bash script with logging. This seemed like the simplest solution as it required no separate tools. I found the following explanation and an example command from StackOverflow:

# Starts the application on the background and gathers the logs to a log.txt file
sudo nohup python app.py > log.txt 2>&1 &

# nohup allows to run command/process or shell script that can continue running in the background after you log out from a shell.
# > log.txt: it forwards the output to this file.
# 2>&1: move all the stderr to stdout.
# The final & allows you to run a command/process in background on the current shell.

Additions to the HttpServer

I had to make some changes to the HttpServer created on the previous article (article/repository). First I had to change the json handling from a single PetWeight entity to a list. After that, I ran into an issue with the HTTP calls, when trying to add a new entries to the LiteDB the first HTTP request with type OPTIONS was failing as this was not handled on the listener. So I had to add a handler for the OPTIONS method and return correct headers with the response and remove the output response handling from OPTIONS at the end.

With these changes I could run the HttpServer and the web page and insert new entries to the LiteDB database through the page.

Closing thoughts

Please remember that this is not in any capacity usable in anywhere else than a LAN setup. The OPTIONS method is fully open and the flask deployment is not suitable for production use.

Some improvement ideas that I thought about while writing this:

- The pets list could be used to generate the input fields based on the amount of the pets, or even pull the pets from the LiteDB database.

- The submit button should give some feedback when pressed and could clear the values from the inputs.

- Create a deployment for the HttpListener.

- If the base value is zero, it could be omitted from the request json

Up next

I will try to take on an Azure project next, but will continue with this project either on the side or after a little while.