Bootstrap Live Dev Server for React Vite example

.codepress/dev-server/Dockerfile.react-vite

@@ -0,0 +1,27 @@
+# Generated by CodePress bootstrap-dev-server.
+# Dev-mode image for the "react-vite" frontend (Live Dev Server).
+# Edits are preserved, but running /codepress-bootstrap-dev-server again may overwrite them.
+FROM public.ecr.aws/docker/library/node:26-bookworm
+
+RUN apt-get update \
+    && apt-get install -y --no-install-recommends procps \
+    && rm -rf /var/lib/apt/lists/*
+
+RUN npm install -g --force pnpm@10.28.2
+ENV PNPM_CONFIG_VIRTUAL_STORE_TYPE=project
+WORKDIR /app
+
+# The Live Dev Server hydrates app dependencies onto the mounted checkout.
+ENV HOSTNAME=0.0.0.0 \
+    CODEPRESS_BIND_HOST=0.0.0.0 \
+    PORT=5173 \
+    CODEPRESS_HMR_CLIENT_PORT=443 \
+    CODEPRESS_HMR_PROTOCOL=wss \
+    CODEPRESS_BASE_PATH=/
+
+WORKDIR /app/examples/react-vite
+EXPOSE 5173
+
+ENV PATH="/app/examples/react-vite/node_modules/.bin:/app/node_modules/.bin:${PATH}"
+
+CMD ["sh", "-c", "pnpm exec vite --host \"$CODEPRESS_BIND_HOST\" --port \"$PORT\" --strictPort"]

.codepress/dev-server/recipe.json

@@ -0,0 +1,39 @@
+{
+  "schema_version": 1,
+  "bootstrapped_at": "2026-11-05T11:12:23Z",
+  "discovery_branch": "codepress/bootstrap/dev-server/aa03cab1378046d1",
+  "frontends": [
+    {
+      "label": "react-vite",
+      "description": "Example pricing page that records browser interaction evidence and UI findings locally.",
+      "working_dir": "examples/react-vite",
+      "dockerfile_path": ".codepress/dev-server/Dockerfile.react-vite",
+      "dev_command": "pnpm exec vite --host \"$CODEPRESS_BIND_HOST\" --port \"$PORT\" --strictPort",
+      "prebuild_command": "pnpm --filter @codepress/interactions-browser run build && pnpm --filter @codepress/interactions-react run build",
+      "prebuild_inputs": [
+        "package.json",
+        "pnpm-workspace.yaml",
+        "tsconfig.json",
+        "packages/browser/package.json",
+        "packages/browser/src",
+        "packages/browser/tsconfig.json",
+        "packages/browser/tsup.config.ts",
+        "packages/browser/scripts/build-page-script.mjs",
+        "packages/react/package.json",
+        "packages/react/src",
+        "packages/react/tsconfig.json"
+      ],
+      "framework": "vite",
+      "package_manager": "pnpm",
+      "install_command": "pnpm install --frozen-lockfile",
+      "dependency_manifests": [
+        "pnpm-lock.yaml"
+      ],
+      "dev_port": 5173,
+      "system_packages": [
+        "procps"
+      ],
+      "size": "small"
+    }
+  ]
+}

.github/workflows/ci.yml

@@ -33,10 +33,10 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
-      # The React adapter and the Playwright helpers type-check against the
-      # browser package's built types.
-      - name: Build browser package
-        run: pnpm --filter @codepress/interactions-browser build
+      # Workspace packages and the React/Vite example type-check against the
+      # local packages' built declarations.
+      - name: Build workspace packages for typecheck
+        run: pnpm --filter @codepress/interactions-browser build && pnpm --filter @codepress/interactions-react build && pnpm --filter @codepress/interactions-playwright build
 
       - name: Typecheck
         run: pnpm typecheck
@@ -57,11 +57,11 @@ jobs:
 
       - name: Check the packed files (Playwright helpers)
         working-directory: packages/playwright
-        run: pnpm run build && pnpm run pack:check
+        run: pnpm run pack:check
 
       - name: Check the packed files (React adapter)
         working-directory: packages/react
-        run: pnpm run build && pnpm run pack:check
+        run: pnpm run pack:check
 
   python:
     name: Python tests and lint

examples/react-vite/README.md

@@ -12,11 +12,12 @@ coding agent, and prove the fix.
 
 ## Run it
 
-You need Node.js 20.19+ (or 22.12+) and npm.
+You need Node.js 20.19+ (or 22.12+) and pnpm 10.28.2.
 
 ```sh
-npm install
-npm run dev
+# From the repository root
+pnpm install
+pnpm --filter interactions-example-react-vite dev
 ```
 
 Open http://localhost:5173 in a desktop browser and wait a few seconds: the SDK
@@ -37,7 +38,7 @@ evidence, fingerprint, viewport, route template), each with `last_seen`, the
 time it was last reported. In a second terminal:
 
 ```sh
-npm run findings
+pnpm --filter interactions-example-react-vite findings
 ```
 
 prints one line per finding, most urgent first. The schemas are in
@@ -50,15 +51,16 @@ recreated on the next batch) and reload the page.
 ## Test it
 
 ```sh
-npx playwright install chromium
-npm test
+pnpm --filter interactions-example-react-vite exec playwright install chromium
+pnpm --filter interactions-example-react-vite test
 ```
 
 `tests/ui.spec.ts` opens the page at 1280x720 and calls `expectNoFindings(page)`.
 It fails, with a message that starts `Error: 1 UI finding on /.` and lists the
 finding line and its fingerprint.
 
-Playwright starts the dev server itself, or reuses the one from `npm run dev`
+Playwright starts the dev server itself, or reuses the one from
+`pnpm --filter interactions-example-react-vite dev`
 if it is running. The test closes the page before the SDK's first flush, so it
 adds nothing to `.interactions/`; load the page in a browser for that.
 
@@ -76,11 +78,11 @@ or copy that folder into your agent's skills directory. The agent reads
 proves it. Then:
 
 ```sh
-npm test
+pnpm --filter interactions-example-react-vite test
 ```
 
 passes. Delete `.interactions`, reload the page, wait a few seconds and run
-`npm run findings` again: the fingerprint is gone.
+`pnpm --filter interactions-example-react-vite findings` again: the fingerprint is gone.
 
 ## How it works
 

examples/react-vite/package.json

@@ -11,13 +11,13 @@
     "test": "playwright test"
   },
   "dependencies": {
-    "@codepress/interactions-browser": "^1.0.0",
-    "@codepress/interactions-react": "^1.0.0",
-    "react": "^19.3.0",
-    "react-dom": "^19.3.0"
+    "@codepress/interactions-browser": "workspace:^",
+    "@codepress/interactions-react": "workspace:^",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1"
   },
   "devDependencies": {
-    "@codepress/interactions-playwright": "^1.0.0",
+    "@codepress/interactions-playwright": "workspace:^",
     "@playwright/test": "^1.64.0",
     "@types/node": "^24.0.0",
     "@types/react": "^19.3.0",

examples/react-vite/vite.config.ts

@@ -2,11 +2,30 @@ import react from "@vitejs/plugin-react";
 import { defineConfig } from "vite";
 import { localSink } from "./local-sink.ts";
 
+// CodePress-managed: map Live Dev Server preview URL settings into Vite.
+const normalizeBasePath = (value: string | undefined) => {
+  if (!value || value === "/") return "/";
+  return `/${value.split("/").filter(Boolean).join("/")}/`;
+};
+
+const previewHmrProtocol = process.env.CODEPRESS_HMR_PROTOCOL;
+const previewHmrClientPort = process.env.CODEPRESS_HMR_CLIENT_PORT;
+const previewHmr =
+  (previewHmrProtocol === "ws" || previewHmrProtocol === "wss") && previewHmrClientPort
+    ? {
+        protocol: previewHmrProtocol,
+        clientPort: Number(previewHmrClientPort),
+      }
+    : undefined;
+
 export default defineConfig({
+  base: normalizeBasePath(process.env.CODEPRESS_BASE_PATH),
   plugins: [react(), localSink(".interactions")],
   server: {
     port: 5173,
     strictPort: true,
+    ...(previewHmr ? { hmr: previewHmr } : {}),
+    allowedHosts: true,
     // Files written by the sink are output, not source: don't reload on them.
     watch: { ignored: ["**/.interactions/**"] },
   },