[Feature] Base setup for Frontend Docker image (#279)

* feat: Add files needed to build a Docker image

* docs: Add setup instructions for the frontend

* feat: Add workflow to automatically build a docker image

* fix(docker): Use the `--no-cache` switch
to avoid the need to use `--update` and remove `/var/cache/apk/*`
From https://www.codefactor.io/repository/github/ree6-applications/webinterface/pull/279

* fix(CI/CD): obsolete name for workflow job

* feat(docker): Support environment variables was added, new image name
There's no longer a need for the `start.sh` script
Names for the docker images were changed to use the project's name

---------

Co-authored-by: Presti <dxssucuk@hotmail.com>

.github/workflows/dockerPush.yml

@@ -15,8 +15,8 @@ on:
   workflow_dispatch: {}
 
 jobs:
-  push_to_registry:
-    name: Push Docker image to Docker Hub
+  backend:
+    name: Build and push Backend image
     runs-on: ubuntu-latest
     steps:
       - name: Check out the repo
@@ -41,3 +41,39 @@ jobs:
           push: true
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}
+
+  frontend:
+    name: Build and push Frontend image
+      - name: Check out the repo
+        uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v2
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v1
+        with:
+          driver-opts: network=host
+          platforms: linux/amd64,linux/arm64
+
+      - name: Log in to Docker Hub
+        uses: docker/login-action@v3.0.0
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+
+      - name: Extract metadata (tags, labels) for Docker
+        id: meta
+        uses: docker/metadata-action@v5.5.0
+        with:
+          images: ree6/frontend
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v5.1.0
+        with:
+          platforms: linux/amd64,linux/arm64
+          context: Frontend/docker
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+

Frontend/README.md

@@ -1,3 +1,35 @@
+# Ree6 Frontend
+
+## Netlify
+
+If you don't have your own hosting you'd like to use we recommend using [Netlify](https://www.netlify.com/).
+It's free, fast and easy to setup.
+
+To use it [follow the instructions in our Wiki](https://wiki.ree6.de/webinterface/self-hosting).
+
+## Docker
+
+If you'd like to use your own hosting `Docker` + `Docker Compose` is the second best choice.
+To familiarize yourself with `Docker Compose` you can look read through Docker's
+[Try Docker Compose](https://docs.docker.com/compose/gettingstarted/)
+manual.
+
+We provide a [basic `docker-compose.yml` file](https://github.com/Ree6-Applications/Webinterface/tree/master/Frontend/docker/docker-compose.yml)
+for easier setup.
+
+Don't forget to change `BACKEND_URL` and `INVITE_URL` to your values. 
+
+## Manual build
+
+This web app is built using [Swelte](https://svelte.dev/).
+
+Please keep in mind that Swelte can sometimes be hader to build so we recommend using one of the above options.
+
+Below is a README for Swelte applications:
+
+<details>
+<summary>Swelte README</summary>
+
 # create-svelte
 
 Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
@@ -36,3 +68,5 @@ npm run build
 You can preview the production build with `npm run preview`.
 
 > To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
+
+</details>

Frontend/docker/Dockerfile

@@ -0,0 +1,28 @@
+# Created by "Jiří Štefka <jiri@stefka.eu>"
+# This code is under the GPLv3 license.
+FROM node:18-alpine
+
+LABEL developer="Jiří Štefka <jiri@stefka.eu>"
+LABEL maintainer="Jiří Štefka <jiri@stefka.eu>"
+
+# Install git (needed to download the Frontend)
+RUN apk add --no-cache git
+
+# Clone Ree6 frontend
+RUN git clone https://github.com/Ree6-Applications/Webinterface /Webinterface
+
+# Setup the files and permissions
+RUN chown -R node:node /Webinterface
+USER node:node
+WORKDIR /Webinterface/Frontend
+
+# Install the needed modules
+RUN npm install vite && npm install && npm i -D @sveltejs/adapter-node --force
+
+# Patch the config to use the node adapter
+RUN sed -i "s@import adapter from '\@sveltejs/adapter-auto';@import adapter from '\@sveltejs/adapter-node';@g" svelte.config.js
+
+RUN npm run build
+RUN rm -rf src/ static/
+
+CMD ["node", "build/index.js"]

Frontend/docker/docker-compose.yml

@@ -0,0 +1,38 @@
+version: "3"
+# Created by "Jiří Štefka <jiri@stefka.eu>"
+# This code is under the GPLv3 license.
+
+services:
+  ree6_frontend:
+    container_name: ree6_frontend
+    image: ree6/frontend
+
+    environment:
+      - BACKEND_URL="https://api.ree6.de" # Change this to use your backend url
+      - INVITE_URL="https://invite.ree6.de" # Change this to your bot's invite link
+
+      - HOST=0.0.0.0 # IP address to listen to
+
+      - TZ=Europe/Prague # Set your timezone
+      - NODE_ENV=production # Internal server error messages will not send stacktrace to the browser in production
+
+    # Uncomment the lines below to enable Traefik
+    # Don't forget to uncomment the bottom of the file as well
+    # Don't forget to comment out the `ports` section
+    # labels:
+    #   - traefik.http.routers.ree6_frontend.rule=Host(`ree6.example.com`) # Set to your domain (+subdomain)
+    #   - traefik.http.routers.ree6_frontend.entrypoints=websecure
+    #   - traefik.http.routers.ree6_frontend.tls.certresolver=lets-encrypt
+    #   - traefik.http.routers.ree6_frontend.service=ree6_frontend
+    #   - traefik.http.services.ree6_frontend.loadBalancer.server.port=3000 # Must be same as `PORT` variable
+    # networks:
+    #   - traefik
+    ports: # Comment this out if using traefik
+      - 3000:3000 # Comment this out if using traefik
+
+    restart: unless-stopped
+
+# Uncomment this for Traefik
+# networks:
+#   traefik:
+#     external: true