Update README.md

README.md

@@ -69,3 +69,147 @@ The following environment variables allow configuration of the `balena-downloade
 | `LIVE_FOLDER`        | String(foldername)     | update_live                  | Name of the folder to store the production data. This folder should be mounted and shared to other applications |
 | `BASE_URL`           | URL                    | N/A                          | The URL to get the download config file.                                                                        |
 | `ISDEBUG`            | bool                   | false                        | Enable debug logging. Should be disabled in production                                                          |
+
+### Full Player
+
+Example of a full web player using [next.js](https://nextjs.org/), balena-browser[https://github.com/wirewirewirewire/browser|, [balena-xserver](https://github.com/wirewirewirewire/xserver) and [balena-control](https://github.com/wirewirewirewire/balena-control).
+
+Create a folder with your next.js application and make sure it is running.
+
+#### docker-compose.yml
+
+The `docker-compose.yml` is the main entry point and will organize all containers.
+
+Important: Replace `aarch64` with your actual architecture! Can be `amd64` or `aarch64`
+
+`<YOUR_PROJECT>/docker-compose.yml`
+
+```yaml
+version: "2"
+volumes:
+  workdir:
+  settings:
+  xserver:
+services:
+  balena-control:
+    image: bh.cr/gh_smarthomeagentur/control-aarch64
+    restart: always
+    privileged: true
+    devices:
+      - /dev/dri
+    group_add:
+      - video
+    ports:
+      - "3009"
+      - "3005"
+      - "80"
+    volumes:
+      - "xserver:/tmp/.X11-unix"
+    labels:
+      io.resin.features.dbus: "1"
+      io.resin.features.kernel-modules: "1"
+      io.resin.features.firmware: "1"
+      io.balena.features.supervisor-api: "1"
+  browser:
+    image: bh.cr/gh_smarthomeagentur/browser-rpi
+    # network_mode: host
+    ports:
+      - "5011" # management API (optional)
+      - "35173" # Chromium debugging port (optional)
+    devices:
+      - /dev/dri
+    group_add:
+      - video
+    volumes:
+      - "settings:/data" # Only required if using PERSISTENT flag (see below)
+      - "xserver:/tmp/.X11-unix" # external xserver needed
+    labels:
+      io.resin.features.dbus: "1"
+      io.resin.features.kernel-modules: "1"
+      io.resin.features.firmware: "1"
+      io.balena.features.supervisor-api: "1"
+  downloader:
+    image: bh.cr/gh_smarthomeagentur/downloader-aarch64
+    privileged: true
+    ports:
+      - 3000:3000
+    volumes:
+      - "workdir:/usr/src/app/update_live" # shared workdir for other services
+    labels:
+      io.resin.features.dbus: "1"
+      io.resin.features.kernel-modules: "1"
+      io.resin.features.firmware: "1"
+      io.balena.features.supervisor-api: "1"
+  xserver:
+    image: bh.cr/gh_smarthomeagentur/xserver-aarch64
+    restart: always
+    privileged: true
+    volumes:
+      - "xserver:/tmp/.X11-unix"
+  next-pwa:
+    build: .
+```
+
+#### Dockerfile.template
+
+Create a `Dockerfile.template` as the installation script to copy your next.js application, install all dependencies and `run build`.
+
+`<YOUR_PROJECT>/Dockerfile.template`
+
+```bash
+ARG NODEJS_VERSION="16.19.1"
+FROM balenalib/%%BALENA_MACHINE_NAME%%-debian-node:${NODEJS_VERSION}-bullseye-run
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    build-essential \
+#    rsync \
+#    ddcutil \
+#    x11-xserver-utils \
+    dbus && \
+    apt-get clean && rm -rf /var/lib/apt/lists/*
+# Defines our working directory in container
+WORKDIR /usr/src/app
+COPY package.json package.json
+COPY .npmrc .npmrc
+RUN JOBS=MAX npm install --production --unsafe-perm && npm cache verify && rm -rf /tmp/*
+ENV UDEV=1
+COPY . ./
+RUN rm -rf middleware.js
+RUN rm -rf .env.local
+# CMD sysctl -w fs.inotify.max_user_instances=1024
+RUN npm run build
+RUN sed -i -e 's/\r$//' /usr/src/app/init
+# server.js will run when container starts up on the device
+CMD ["bash", "/usr/src/app/init"]
+```
+
+#### init
+
+Create an `init` file inside your project directory. This will start your next.js application via `npm run start`.
+
+`<YOUR_PROJECT>/init`
+
+```bash
+#!/bin/bash
+
+export DBUS_SYSTEM_BUS_ADDRESS=unix:path=/host/run/dbus/system_bus_socket
+
+sleep 1
+
+while true; do    
+    echo "Running"
+    npm run start
+    sleep 60
+done
+```
+
+#### Variables
+
+In your balena device variables the `LAUNCH_URL` so it can point to the actual website running via `npm run start`.
+
+```bash
+LAUNCH_URL=next-pwa/?preview=live
+```
+
+That's it!
+
+You can now deploy your application via `balena push <APP_NAME or DEVICE_IP>`.