fix carplace page

.env.docker.dev

@@ -17,9 +17,10 @@ DASHBOARD_URL=http://localhost:3000/dashboard
 ADMIN_URL=http://localhost:3000/admin
 DASHBOARD_INTERNAL_URL=http://host.docker.internal:3001
 ADMIN_INTERNAL_URL=http://host.docker.internal:3002
-# Asset prefix for the dashboard/admin dev servers so browsers load JS chunks from the
+# Asset prefixes for apps served through the homepage dev proxy.
 DASHBOARD_ASSET_PREFIX=http://localhost:3001/dashboard
 ADMIN_ASSET_PREFIX=http://localhost:3002/admin
+CARPLACE_ASSET_PREFIX=http://localhost:3004/carplace
 JWT_SECRET=placeholder
 JWT_EXPIRY=8h
 RENTER_JWT_EXPIRY=7d

apps/carplace/next.config.js

@@ -3,8 +3,15 @@
 const { buildSecurityHeaders, normalizeAssetPrefix } = require('../../config/nextSecurityHeaders')
 
 const CARPLACE_ASSET_PREFIX = '/carplace'
+// In local development the homepage app serves /carplace from port 3000 while
+// the Carplace dev server runs on port 3004. Emit absolute chunk/HMR URLs so
+// the browser asks the Carplace server for its own assets instead of the
+// homepage server.
+const defaultCarplaceAssetPrefix = process.env.NODE_ENV !== 'production'
+  ? 'http://localhost:3004'
+  : CARPLACE_ASSET_PREFIX
 const carplaceAssetPrefix = normalizeAssetPrefix(
-  process.env.CARPLACE_ASSET_PREFIX ?? (process.env.NODE_ENV === 'production' ? CARPLACE_ASSET_PREFIX : undefined),
+  process.env.CARPLACE_ASSET_PREFIX ?? defaultCarplaceAssetPrefix,
   CARPLACE_ASSET_PREFIX,
 )
 const securityHeaders = buildSecurityHeaders({ assetSources: [carplaceAssetPrefix] })

docker-compose.dev.yml

@@ -160,6 +160,7 @@ services:
     env_file:
       - .env.docker.dev
     environment:
+      CARPLACE_ASSET_PREFIX: "http://localhost:3004"
       CHOKIDAR_USEPOLLING: "true"
       CHOKIDAR_INTERVAL: "1000"
       WATCHPACK_POLLING: "true"