Runtime environment variable substitution

.github/workflows/ci-develop.yml

@@ -16,12 +16,12 @@ env:
   REGISTRY: ghcr.io
   ARTIFACT_NAME: shocklink-webui.zip
   IMAGE_NAME: ${{ github.repository_owner }}/webui
-  TARGET_ENV: development
+  TARGET_ENV: container
   NODE_ENV: development
 
 jobs:
 
-  build-ui:
+  build:
     runs-on: ubuntu-latest
 
     steps:
@@ -58,9 +58,9 @@ jobs:
           path: ${{ github.workspace }}/${{ env.ARTIFACT_NAME }}
           retention-days: 1
 
-  build-container:
+  containerize:
     runs-on: ubuntu-latest
-    needs: build-ui
+    needs: build
 
     steps:
       - uses: actions/checkout@v4

.github/workflows/ci-master.yml

@@ -16,12 +16,12 @@ env:
   REGISTRY: ghcr.io
   ARTIFACT_NAME: shocklink-webui.zip
   IMAGE_NAME: ${{ github.repository_owner }}/webui
-  TARGET_ENV: production
+  TARGET_ENV: container
   NODE_ENV: production
 
 jobs:
 
-  build-ui:
+  build:
     runs-on: ubuntu-latest
 
     steps:
@@ -61,9 +61,9 @@ jobs:
           path: ${{ github.workspace }}/${{ env.ARTIFACT_NAME }}
           retention-days: 1
 
-  build-container:
+  containerize:
     runs-on: ubuntu-latest
-    needs: build-ui
+    needs: build
 
     steps:
       - uses: actions/checkout@v4

.github/workflows/ci-tag.yml

@@ -11,12 +11,12 @@ env:
   REGISTRY: ghcr.io
   ARTIFACT_NAME: shocklink-webui.zip
   IMAGE_NAME: ${{ github.repository_owner }}/webui
-  TARGET_ENV: production
+  TARGET_ENV: container
   NODE_ENV: production
 
 jobs:
 
-  build-ui:
+  build:
     runs-on: ubuntu-latest
 
     steps:
@@ -55,27 +55,9 @@ jobs:
           path: ${{ github.workspace }}/${{ env.ARTIFACT_NAME }}
           retention-days: 1
 
-  publish-artifacts:
+  containerize:
     runs-on: ubuntu-latest
-    needs: build-ui
-
-    steps:
-      - name: Download internal artifacts
-        uses: actions/download-artifact@v3
-        with:
-          name: ${{ env.ARTIFACT_NAME }}
-
-      - name: Upload artifacts to tag
-        uses: svenstaro/upload-release-action@v2
-        with:
-          repo_token: ${{ secrets.GITHUB_TOKEN }}
-          file: ${{ env.ARTIFACT_NAME }}
-          asset_name: ${{ env.ARTIFACT_NAME }}
-          tag: ${{ github.ref }}
-
-  build-container:
-    runs-on: ubuntu-latest
-    needs: build-ui
+    needs: build
 
     steps:
       - uses: actions/checkout@v4
@@ -128,3 +110,21 @@ jobs:
           push: true
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}
+
+  publish:
+    runs-on: ubuntu-latest
+    needs: containerize
+
+    steps:
+      - name: Download internal artifacts
+        uses: actions/download-artifact@v3
+        with:
+          name: ${{ env.ARTIFACT_NAME }}
+
+      - name: Upload artifacts to tag
+        uses: svenstaro/upload-release-action@v2
+        with:
+          repo_token: ${{ secrets.GITHUB_TOKEN }}
+          file: ${{ env.ARTIFACT_NAME }}
+          asset_name: ${{ env.ARTIFACT_NAME }}
+          tag: ${{ github.ref }}

Dockerfile

@@ -1,2 +1,18 @@
 FROM nginx:1-alpine
+
+ENV SHOCKLINK_API_URL=https://api.shocklink.net
+ENV SHOCKLINK_WEBUI_URL=https://shocklink.net/#/
+ENV SHOCKLINK_SHARE_URL=https://shockl.ink/
+
+# Copy release artifacts (static JS and CSS bundles)
 COPY dist /usr/share/nginx/html
+
+# Copy custom startup script.
+# This script performs environment variable substitution!
+COPY startup.sh .
+RUN ["chmod", "+x", "/startup.sh"]
+
+# Start up nginx using the alternative entrypoint, but with the default CMD.
+# See: https://github.com/nginxinc/docker-nginx/blob/master/mainline/debian/Dockerfile#L113-L119
+ENTRYPOINT ["/startup.sh"]
+CMD ["nginx", "-g", "daemon off;"]

README.md

@@ -16,36 +16,34 @@ This is the ShockLink Web UI. It is a single-page application that communicates
 
 # Configuring
 
-The [shocklink-webui](https://github.com/Shock-Link/WebUI/pkgs/container/shocklink-webui) container unfortunately does not support any configuration beyond nginx configuration, as it is currently based on `nginx:alpine`. 
+The [webui](https://github.com/Shock-Link/WebUI/pkgs/container/webui) container supports configuration via environment variables.
 
-If you wish to change the API that the WebUI communicates with, locally modify the [configuration file](src/globals/config/config.production.js) and build the container manually.
+|Variable|Default|Description|
+|-|-|-|
+|`SHOCKLINK_API_URL`|`https://api.shocklink.net/`| URL of the API. |
+|`SHOCKLINK_WEBUI_URL`|`https://shocklink.net/#/`| URL of the ShockLink WebUI. |
+|`SHOCKLINK_SHARE_URL`|`https://shockl.ink/s/`| URL to prefix share links with. When visited, should redirect to `${SHOCKLINK_WEBUI_URL}/public/proxy/shares/links/{ID}`. |
 
 # Deployment
 
 This documentation describes how to self-host the WebUI container. This might not be of interest to you if you are content using [ShockLink.net](https://shocklink.net).
 
 ## Using Docker
+Assuming you are running on `localhost`, with [the API](https://github.com/Shock-Link/API) running on port `5001`:
 
 ```bash
 $ docker run \
-    -p 80:80/tcp \
+    -p 5002:80/tcp \
+    -e SHOCKLINK_API_URL=http://localhost:5001/ \
+    -e SHOCKLINK_WEBUI_URL=http://localhost:5002/#/ \
+    -e SHOCKLINK_SHARE_URL=http://localhost:5002/#/public/proxy/shares/links/ \
     --name shocklink-webui \
     ghcr.io/shocklink/webui:latest
 ```
 
 ## Using `docker-compose`
-At the time of writing, the [ShockLink API](https://github.com/Shock-Link/API) is not yet readily available. This example contains **only** the WebUI.
 
-```yml
-version: '3.9'
-
-services:
-  webui:
-    image: ghcr.io/shock-link/webui:latest
-    container_name: shocklink-webui
-    ports:
-      - "80:80/tcp"
-```
+See [docker-compose.yml](docker-compose.yml).
 
 # Development
 Contributions are welcome! We're eager to see what you come up with. Make sure to [join us on Discord](https://discord.gg/AHcCbXbEcF).

docker-compose.yml

@@ -0,0 +1,43 @@
+version: '3.9'
+
+services:
+
+  # Database. Only Postgres is currently supported.
+  db:
+    image: postgres:16
+    ports:
+      - "5432:5432/tcp"
+    environment:
+      - POSTGRES_PASSWORD=postgres
+
+  # Redis with Redisearch.
+  redis:
+    image: redis/redis-stack-server:latest
+    volumes:
+      - /opt/docker/shocklink/redis/redis-stack.conf:/redis-stack.conf
+
+  # The API.
+  # Check https://github.com/Shock-Link/API for the latest configuration settings.
+  api:
+    image: ghcr.io/shock-link/api:latest
+    depends_on:
+      - db
+      - redis
+    ports:
+      - "5001:80/tcp"
+    environment:
+      - SHOCKLINK__DB=Host=db;Port=5432;Database=postgres;Username=postgres;Password=postgres;Search Path=ShockLink
+      - SHOCKLINK__REDIS__HOST=redis
+      - SHOCKLINK__FRONTENDBASEURL=http://local:5002
+
+  # The Web UI (this repository).
+  webui:
+    image: ghcr.io/redmushie/webui:master
+    depends_on:
+      - api
+    ports:
+      - "5002:80/tcp"
+    environment:
+      - SHOCKLINK_API_URL=http://local:5001/
+      - SHOCKLINK_WEBUI_URL=http://local:5002/#/
+      - SHOCKLINK_SHARE_URL=http://local:5002/#/public/proxy/shares/links/

redis-stack.conf

@@ -0,0 +1 @@
+notify-keyspace-events KEA

src/globals/config/config.container.js

@@ -0,0 +1,7 @@
+const config = {
+	apiUrl: "SHOCKLINK_API_URL",
+	webUiUrl: "SHOCKLINK_WEBUI_URL",
+	shortUrl: "SHOCKLINK_SHARE_URL"
+}
+
+global.config = config;

startup.sh

@@ -0,0 +1,36 @@
+#!/bin/sh
+
+# Variables for startup script
+SERVE_PATH=/usr/share/nginx/html
+NAME=ShockLink
+
+require() {
+    if [ -z "$1" ]; then
+        echo "Env var '$1' is required. Specify it and restart the container."
+        exit 1
+    fi
+}
+
+# Method that accepts one argument, the name of the environment variable to inject.
+# Will substitute said variable as a literal string 
+inject() {
+    if [ -z "$1" ] && [ -z "$2" ]; then
+        echo "[$NAME] Usage: inject <variable> <value>"
+    fi
+
+    # Ensure the environment variable has a value specified.
+    require $1
+
+    echo "[$NAME] Injecting variable: $1 = $2"
+    find $SERVE_PATH -name "*.js" -exec sed -i "s|$1|$2|g" {} +
+}
+
+# Inject our variables.
+inject SHOCKLINK_API_URL $SHOCKLINK_API_URL
+inject SHOCKLINK_WEBUI_URL $SHOCKLINK_WEBUI_URL
+inject SHOCKLINK_SHARE_URL $SHOCKLINK_SHARE_URL
+
+# Start nginx as normal.
+# If something breaks, see: https://github.com/nginxinc/docker-nginx/blob/master/mainline/debian/Dockerfile
+echo "[$NAME] Starting nginx"
+./docker-entrypoint.sh "$@"