Provide a file data.yaml with the page structure you want to offer, see example for reference.
This image can proxy-pass the Websocket connection from your MQTT broker, by setting the env variable WS_PROXY.
You have to enable Websockets on your broker. The Docker Image toke/mosquitto for e.g. has it already enabled by default on port 9001, where the official Docker Image eclipse-mosquitto need to be configured first.
docker run -d --restart=always \
-v $(pwd)/yourconfig.yaml:/www/data.yaml:ro \
-e "WS_PROXY=10.1.1.50:9001" \
-p 80:80 \
dersimn/mqtt-smarthome-webui
If you provide an SSL key/cert pair in /ssl, the Docker Image will also enable HTTPS:
/ssl/nginx.key/ssl/nginx.crt
Additionally you can enable client-authentification via SSL certificates, by providing:
/ssl/client.crt
In case you have revoked clients, also prodive a /ssl/client.crl file.
A nice tutorial on how to generate your own certificates, is located here.
docker run -d --restart=always \
-v $(pwd)/yourconfig.json:/www/data.json:ro \
-v $(pwd)/ssl:/ssl:ro \
-e "WS_PROXY=10.1.1.50:9001" \
-p 80:80 \
-p 443:443 \
dersimn/mqtt-smarthome-webui
HTTPS and client-auth are optional for clients connecting from a local IP, according to these IP ranges. If you don't want this behaviour, set -e WHITELIST_LOCAL_IP=false to force SSL and client-auth for everyone.
If you want to change the default ports, specify it like this: -p 8001:80 -p 8443:443 -e "HTTPS_REDIRECT_PORT=8443".
If you provide the file /nginx.log, nginx will enable a more detailed access log. This file can be a regular file or a FIFO, to further process the logged data with e.g. Telegraf.
npm i
npx grunt
You probably also need a MQTT Broker:
docker run -d --restart=always --name=mqtt -p 1883:1883 -p 9001:9001 -v "$(pwd)/contrib/mosquitto.conf":/mosquitto/config/mosquitto.conf:ro eclipse-mosquitto
With this project you can have the cake and eat it, both: Start a Docker container with the following command to simulate the later productive environment. To change files immediately without rebuilding the Docker Image everytime a change is made, the /www folder can simply be mounted into the Container:
docker build -t webui .
docker run --rm -v "$(pwd)/www":/www:ro -p 80:80 -e WS_PROXY=host.docker.internal:9001 webui
docker run --rm -v "$(pwd)/www":/www:ro -v $(pwd)/ssl:/ssl:ro -p 80:80 -p 443:443 -e WS_PROXY=host.docker.internal:9001 webui
For a simple simulation environment consider also running
docker run -d --restart=always --name=logic -e "TZ=Europe/Berlin" -v "$(pwd)/contrib/scripts":/scripts:ro dersimn/mqtt-scripts:1 --url mqtt://host.docker.internal --dir /scripts
in background.
docker buildx create --name mybuilder
docker buildx use mybuilder
docker buildx build \
--platform linux/amd64,linux/arm/v7 \
-t dersimn/mqtt-smarthome-webui \
-t dersimn/mqtt-smarthome-webui:1 \
-t dersimn/mqtt-smarthome-webui:1.x \
-t dersimn/mqtt-smarthome-webui:1.x.0 \
--push .
This project follows Oliver "owagner" Wagner's architectural proposal for an mqtt-smarthome. Set of basic icons freely provided by Roman "Minsk" Malashov.