Initial Docker deployment setup

.dockerignore

@@ -0,0 +1,8 @@
+.git
+.env
+upstream/HubFrontend/.git
+upstream/HubFrontend/node_modules
+upstream/HubFrontend/build
+upstream/HubFrontend/dist
+upstream/HubFrontend/build-electron/output
+npm-debug.log*

.env.example

@@ -0,0 +1,11 @@
+# Address and port on the Docker host.
+FRONTEND_BIND=127.0.0.1:18080
+
+# URL of the backend client configuration endpoint.
+VITE_CONFIG_URL=https://hub.example.com/api/client/config/global
+
+# Use an empty value when the frontend and its assets use the same origin.
+ASSETS_BASE=
+
+VITE_USE_MULTIHUB=false
+VITE_MULTIHUB_DISCOVERY=

.gitignore

@@ -0,0 +1,2 @@
+.env
+upstream/HubFrontend/

Dockerfile

@@ -0,0 +1,31 @@
+# syntax=docker/dockerfile:1
+
+FROM node:25-bookworm-slim AS builder
+
+WORKDIR /build
+
+ENV ELECTRON_SKIP_BINARY_DOWNLOAD=1
+
+COPY upstream/HubFrontend/package.json upstream/HubFrontend/package-lock.json upstream/HubFrontend/.npmrc ./
+RUN --mount=type=cache,target=/root/.npm npm ci
+
+COPY upstream/HubFrontend/ ./
+
+ARG ASSETS_BASE=""
+ARG VITE_USE_MULTIHUB=false
+ARG VITE_MULTIHUB_DISCOVERY=""
+ARG VITE_CONFIG_URL
+
+ENV ASSETS_BASE=${ASSETS_BASE} \
+    VITE_USE_MULTIHUB=${VITE_USE_MULTIHUB} \
+    VITE_MULTIHUB_DISCOVERY=${VITE_MULTIHUB_DISCOVERY} \
+    VITE_CONFIG_URL=${VITE_CONFIG_URL}
+
+RUN npm run build
+
+FROM nginx:alpine AS runtime
+
+COPY nginx/default.conf /etc/nginx/conf.d/default.conf
+COPY --from=builder /build/build/ /usr/share/nginx/html/
+
+EXPOSE 8080

README.md

@@ -0,0 +1,188 @@
+# Drivers Hub: Frontend Docker Deployment
+
+```text
+    ____       _                         __  __      __
+   / __ \_____(_)   _____  __________   / / / /_  __/ /_
+  / / / / ___/ / | / / _ \/ ___/ ___/  / /_/ / / / / __ \
+ / /_/ / /  / /| |/ /  __/ /  (__  )  / __  / /_/ / /_/ /
+/_____/_/  /_/ |___/\___/_/  /____/  /_/ /_/\__,_/_.___/
+```
+
+Docker deployment for [Drivers Hub: Frontend](https://github.com/CharlesWithC/HubFrontend).
+The container serves the static frontend with Nginx.
+
+## Configure the deployment
+
+Get the frontend source code. Then, create the deployment configuration:
+
+```bash
+git clone https://github.com/CharlesWithC/HubFrontend.git upstream/HubFrontend
+cp .env.example .env
+```
+
+Set `VITE_CONFIG_URL` to the client configuration endpoint of your Drivers Hub
+backend. The URL usually has this format:
+
+```text
+https://hub.example.com/api/client/config/global
+```
+
+The frontend uses the Vite values during the image build. Rebuild the image after
+you change `.env`.
+
+## Start the deployment
+
+```bash
+docker compose build
+docker compose up -d
+docker compose ps
+```
+
+By default, the frontend is available at `http://127.0.0.1:18080`. The default
+bind address is suitable for a reverse proxy on the Docker host.
+
+## Configure a reverse proxy
+
+The following examples assume that the reverse proxy runs on the Docker host.
+Replace `hub.example.com` with the public frontend domain. Keep
+`FRONTEND_BIND=127.0.0.1:18080` in the frontend `.env`. The examples also assume
+that Drivers Hub: Backend listens on `127.0.0.1:17777` and uses the `/api` prefix.
+
+### Standalone Nginx
+
+Create an Nginx virtual host:
+
+```nginx
+server {
+    listen 80;
+    listen [::]:80;
+    server_name hub.example.com;
+
+    return 301 https://$host$request_uri;
+}
+
+server {
+    listen 443 ssl http2;
+    listen [::]:443 ssl http2;
+    server_name hub.example.com;
+
+    ssl_certificate /etc/letsencrypt/live/hub.example.com/fullchain.pem;
+    ssl_certificate_key /etc/letsencrypt/live/hub.example.com/privkey.pem;
+
+    location ^~ /api/ {
+        proxy_pass http://127.0.0.1:17777;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+
+    location / {
+        proxy_pass http://127.0.0.1:18080;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+}
+```
+
+Set the certificate paths for your system. Test and reload Nginx:
+
+```bash
+sudo nginx -t
+sudo systemctl reload nginx
+```
+
+See the [Nginx proxy module documentation](https://nginx.org/en/docs/http/ngx_http_proxy_module.html)
+for more information.
+
+### Standalone Caddy
+
+Add this site block to the Caddyfile:
+
+```caddyfile
+hub.example.com {
+    handle /api/* {
+        reverse_proxy 127.0.0.1:17777
+    }
+
+    handle {
+        reverse_proxy 127.0.0.1:18080
+    }
+}
+```
+
+Caddy obtains and renews the TLS certificate when the domain points to the
+server and ports 80 and 443 are available. Validate and reload Caddy:
+
+```bash
+sudo caddy validate --config /etc/caddy/Caddyfile
+sudo systemctl reload caddy
+```
+
+See the [Caddy reverse proxy documentation](https://caddyserver.com/docs/caddyfile/directives/reverse_proxy)
+for more information.
+
+### Plesk Nginx drop-in
+
+Use a domain or subdomain that has a valid TLS certificate in Plesk.
+
+1. Open **Domains > hub.example.com > Dashboard > PHP**.
+2. Disable **PHP Support** and apply the change.
+3. Open **Hosting & DNS > Apache & nginx Settings**.
+4. Disable **Proxy mode** and apply the change.
+5. Add this block to **Additional nginx directives**:
+
+```nginx
+location ^~ /api/ {
+    proxy_pass http://127.0.0.1:17777;
+    proxy_set_header Host $host;
+    proxy_set_header X-Real-IP $remote_addr;
+    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+    proxy_set_header X-Forwarded-Proto $scheme;
+}
+
+location / {
+    proxy_pass http://127.0.0.1:18080;
+    proxy_set_header Host $host;
+    proxy_set_header X-Real-IP $remote_addr;
+    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+    proxy_set_header X-Forwarded-Proto $scheme;
+}
+```
+
+Apply the configuration. Do not add a `server` block in this field. Plesk
+creates the `server` block and manages TLS. Proxy mode must be disabled before
+you add `location /`. Otherwise, Plesk creates a duplicate location.
+
+See the [Plesk reverse proxy instructions](https://support.plesk.com/hc/en-us/articles/12388464421143-How-to-pass-requests-from-a-Plesk-hosted-domain-to-the-application-listening-on-a-local-port)
+for more information.
+
+## Update the frontend
+
+Update the frontend source code. Then, rebuild the container:
+
+```bash
+git -C upstream/HubFrontend pull --ff-only
+docker compose build
+docker compose up -d
+```
+
+## Operate the deployment
+
+```bash
+# Show the frontend logs.
+docker compose logs -f frontend
+
+# Rebuild the image after a configuration change.
+docker compose build frontend
+docker compose up -d frontend
+```
+
+## Attribution
+
+[Drivers Hub: Frontend](https://github.com/CharlesWithC/HubFrontend) is developed
+by [CharlesWithC](https://charlws.com) and is licensed under the GNU Affero
+General Public License v3.0. This repository provides an independent Docker
+deployment for that project.

compose.yaml

@@ -0,0 +1,20 @@
+# Use the frontend source code in upstream/HubFrontend.
+name: drivershub-frontend
+
+services:
+  frontend:
+    build:
+      context: .
+      args:
+        ASSETS_BASE: ${ASSETS_BASE:-}
+        VITE_USE_MULTIHUB: ${VITE_USE_MULTIHUB:-false}
+        VITE_MULTIHUB_DISCOVERY: ${VITE_MULTIHUB_DISCOVERY:-}
+        VITE_CONFIG_URL: ${VITE_CONFIG_URL:?Set VITE_CONFIG_URL in .env}
+    restart: unless-stopped
+    ports:
+      - "${FRONTEND_BIND:-127.0.0.1:18080}:8080"
+    healthcheck:
+      test: ["CMD", "wget", "--quiet", "--tries=1", "--spider", "http://127.0.0.1:8080/"]
+      interval: 10s
+      timeout: 3s
+      retries: 10

nginx/default.conf

@@ -0,0 +1,18 @@
+server {
+    listen 8080;
+    listen [::]:8080;
+    server_name _;
+
+    root /usr/share/nginx/html;
+    index index.html;
+
+    location /assets/ {
+        try_files $uri =404;
+        add_header Cache-Control "public, max-age=31536000, immutable";
+    }
+
+    location / {
+        try_files $uri $uri/ /index.html;
+        add_header Cache-Control "no-cache";
+    }
+}