Fix/beginner codespaces

.devcontainer/accessibility-nightmare_beginner/devcontainer.json

@@ -32,7 +32,7 @@
   "portsAttributes": {
     "5173": {
       "label": "ShopSmart",
-      "onAutoForward": "openBrowser"
+      "onAutoForward": "notify"
     }
   },
   "otherPortsAttributes": {

.devcontainer/accessibility-nightmare_beginner/post-start.sh

@@ -12,7 +12,11 @@ LOG_FILE="/tmp/accessibility-nightmare-vite.log"
 
 if ! pgrep -f "vite --host 0.0.0.0" >/dev/null 2>&1; then
   echo "✨ Starting ShopSmart on port 5173"
-  nohup npm run dev </dev/null >"$LOG_FILE" 2>&1 &
+  # setsid puts the server in its own session. A plain `nohup ... &` is killed
+  # when the Codespaces lifecycle command's process group is torn down, which
+  # leaves the port dead a moment after this script reports success.
+  setsid nohup npm run dev </dev/null >"$LOG_FILE" 2>&1 &
+  disown 2>/dev/null || true
 fi
 
 for _ in {1..30}; do

adventures/accessibility-nightmare/beginner/vite.config.js

@@ -0,0 +1,21 @@
+import { defineConfig } from 'vite';
+
+// In a Codespace the browser reaches the dev server through a forwarded
+// hostname, not localhost. Vite rejects unknown Host headers by default, so the
+// forwarded domain has to be allowed or the page never loads at all. The
+// websocket for hot reload needs the public port too, which only applies there.
+const inCodespace = Boolean(process.env.CODESPACES);
+
+export default defineConfig({
+    server: {
+        host: true,
+        allowedHosts: ['.app.github.dev'],
+        ...(inCodespace
+            ? { hmr: { clientPort: 443, protocol: 'wss' } }
+            : {}),
+    },
+    preview: {
+        host: true,
+        allowedHosts: ['.app.github.dev'],
+    },
+});

adventures/accessibility-nightmare/docs/beginner.yaml

@@ -96,20 +96,19 @@ toolbox:
 
 services:
   - name: "ShopSmart"
-    url: "http://localhost:5173"
+    port: 5173
     description: "The intentionally inaccessible React storefront."
 
 how_to_play:
   - id: start
     title: "Start ShopSmart"
     content: |
-      Start the application:
+      The storefront is already running. Open the **Ports** tab in the editor,
+      find **ShopSmart** on port 5173, and click the globe icon to open it in a
+      browser tab. Codespaces serves it from an address ending in
+      `.app.github.dev`, so there is no localhost to visit.
 
-      ```bash
-      make app
-      ```
-
-      Then open port 5173 in your browser.
+      If it is not running, start it from the level directory with `make app`.
 
   - id: explore
     title: "Explore the Broken Storefront"