Wire the spa-frontend service into compose, ctrl.sh, and settings

- Add a `spa-frontend` service to the compose template that bind-mounts
  the host sources and toggles between `vite dev` and `vite preview`
  via `HOT_RELOADING`.
- Publish the container port through `SPA_HOST_PORT` (default 5173)
  and teach `prepare.py` to render it into `settings.env`.
- Extend `--hot-reloading` help in `ctrl.sh` to mention the SPA Vite HMR.
- Ignore `spa-frontend/node_modules/` and `spa-frontend/dist/`.

Author: Nils Bars

.gitignore

@@ -29,6 +29,9 @@ tests/failure_logs/
 tests/.coverage
 
 ssh-reverse-proxy/target/
+
+spa-frontend/node_modules/
+spa-frontend/dist/
 docker-compose.ref_e2e_*.yml
 .docker-cache/
 todo.md

ctrl.sh

@@ -63,7 +63,8 @@ Commands:
         --debug-toolbar       Enable the debug toolbar (never use in production).
         --maintenance         Only allow admin users to login.
         --disable-telegram    Disable error reporting via telegram.
-        --hot-reloading       Enable hot reloading of the server (except .html, .js, .sh files).
+        --hot-reloading       Enable hot reloading of the web server (Python)
+                              and of the spa-frontend container (Vite HMR).
 
   down
       Stop and delete all services and networks. Disconnects all users and orphans running instances.

docker-compose.template.yml

@@ -113,6 +113,36 @@ services:
             - db
         cgroup_parent: "{{ cgroup_parent }}-core.slice"
 
+    # Vue 3 + Vuetify SPA that serves the student-facing pages under /v2/
+    # (registration, restore-key, scoreboard). In dev (HOT_RELOADING=true)
+    # runs `vite dev` with HMR against the host bind-mounted source;
+    # otherwise runs `vite build && vite preview`. Either way the
+    # container's port 5173 is mapped to SPA_HOST_PORT on the host, and
+    # Vite's proxy forwards /api, /student/download, and /static to the
+    # web container over the web-host network.
+    spa-frontend:
+        init: true
+        hostname: spa-frontend
+        build:
+            context: ./spa-frontend
+        environment:
+            - HOT_RELOADING=${HOT_RELOADING:-false}
+        volumes:
+            # Bind-mount the host source so Vite sees live edits. The
+            # anonymous volume below shields node_modules from the overlay
+            # so deps installed at build time remain available.
+            - ./spa-frontend/:/spa-frontend
+            - /spa-frontend/node_modules
+    {% if not testing %}
+        ports:
+            - "${SPA_HOST_PORT:-5173}:5173"
+    {% endif %}
+        networks:
+            - web-host
+        depends_on:
+            - web
+        cgroup_parent: "{{ cgroup_parent }}-core.slice"
+
     # Rust-based SSH reverse proxy
     ssh-reverse-proxy:
         init: true

prepare.py

@@ -52,6 +52,7 @@ def build_default_settings() -> Dict[str, Any]:
         "ports": {
             "ssh_host_port": 2222,
             "http_host_port": 8000,
+            "spa_host_port": 5173,
         },
         "paths": {
             "data": "./data",
@@ -151,6 +152,9 @@ def write_settings_yaml(settings: Dict[str, Any]) -> None:
 
 
 BACKFILL_DEFAULTS: Dict[str, Dict[str, Any]] = {
+    "ports": {
+        "spa_host_port": 5173,
+    },
     "paths": {
         "data": "./data",
         "exercises": "./exercises",
@@ -207,9 +211,11 @@ def render_settings_env(settings: Dict[str, Any]) -> None:
         "# the docker group on the host (getent group docker).",
         f"DOCKER_GROUP_ID={settings['docker_group_id']}",
         "",
-        "# Host ports published by the ssh-reverse-proxy and web services.",
+        "# Host ports published by the ssh-reverse-proxy, web, and spa-frontend",
+        "# services.",
         f"SSH_HOST_PORT={settings['ports']['ssh_host_port']}",
         f"HTTP_HOST_PORT={settings['ports']['http_host_port']}",
+        f"SPA_HOST_PORT={settings['ports']['spa_host_port']}",
         "",
         "# Flask session / CSRF signing key. Rotating invalidates all",
         "# existing user sessions.",