docker setup

apps/api/src/main.ts

@@ -14,6 +14,18 @@ import { FeatureAvailabilityGuard } from './domain/policy/FeatureAvailabilityGua
 async function bootstrap() {
   const app = await NestFactory.create(AppModule, process.env.GENERATE_OPENAPI ? { logger: false } : undefined);
 
+  // Website runs on a different origin in dev/docker (e.g. http://localhost:3000 -> http://localhost:3001),
+  // and our website HTTP client uses `credentials: 'include'`, so we must support CORS with credentials.
+  app.enableCors({
+    credentials: true,
+    origin: (origin, callback) => {
+      if (!origin) {
+        return callback(null, false);
+      }
+      return callback(null, origin);
+    },
+  });
+
   app.useGlobalPipes(
     new ValidationPipe({
       whitelist: true,

apps/website/app/leagues/page.tsx

@@ -378,13 +378,10 @@ export default function LeaguesPage() {
   const [activeCategory, setActiveCategory] = useState<CategoryId>('all');
   const [showFilters, setShowFilters] = useState(false);
 
-  useEffect(() => {
-    void loadLeagues();
-  }, []);
+  const { leagueService } = useServices();
 
-  const loadLeagues = async () => {
+  const loadLeagues = useCallback(async () => {
     try {
-      const { leagueService } = useServices();
       const leagues = await leagueService.getAllLeagues();
       setRealLeagues(leagues);
     } catch (error) {
@@ -392,7 +389,11 @@ export default function LeaguesPage() {
     } finally {
       setLoading(false);
     }
-  };
+  }, [leagueService]);
+
+  useEffect(() => {
+    void loadLeagues();
+  }, [loadLeagues]);
 
   const leagues = realLeagues;
 

apps/website/app/page.tsx

@@ -14,13 +14,11 @@ import SimPlatformMockup from '@/components/mockups/SimPlatformMockup';
 import MockupStack from '@/components/ui/MockupStack';
 import Card from '@/components/ui/Card';
 import Button from '@/components/ui/Button';
+import { getWebsiteApiBaseUrl } from '@/lib/config/apiBaseUrl';
 import { ServiceFactory } from '@/lib/services/ServiceFactory';
 
 export default async function HomePage() {
-  const baseUrl =
-    process.env.API_BASE_URL ??
-    process.env.NEXT_PUBLIC_API_BASE_URL ??
-    'http://api:3000';
+  const baseUrl = getWebsiteApiBaseUrl();
   const serviceFactory = new ServiceFactory(baseUrl);
   const sessionService = serviceFactory.createSessionService();
   const landingService = serviceFactory.createLandingService();

apps/website/lib/apiClient.ts

@@ -1,5 +1,4 @@
 import { ApiClient } from './api/index';
+import { getWebsiteApiBaseUrl } from './config/apiBaseUrl';
 
-const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3001';
-
-export const apiClient = new ApiClient(API_BASE_URL);
+export const apiClient = new ApiClient(getWebsiteApiBaseUrl());

apps/website/lib/config/apiBaseUrl.ts

@@ -0,0 +1,36 @@
+function normalizeBaseUrl(raw: string): string {
+  const trimmed = raw.trim();
+  return trimmed.endsWith('/') ? trimmed.slice(0, -1) : trimmed;
+}
+
+export function getWebsiteApiBaseUrl(): string {
+  const isBrowser = typeof window !== 'undefined';
+
+  const configured = isBrowser
+    ? process.env.NEXT_PUBLIC_API_BASE_URL
+    : process.env.API_BASE_URL ?? process.env.NEXT_PUBLIC_API_BASE_URL;
+
+  if (configured && configured.trim()) {
+    return normalizeBaseUrl(configured);
+  }
+
+  const isTestLike =
+    process.env.NODE_ENV === 'test' ||
+    process.env.CI === 'true' ||
+    process.env.DOCKER === 'true';
+
+  if (isTestLike) {
+    throw new Error(
+      isBrowser
+        ? 'Missing NEXT_PUBLIC_API_BASE_URL. In Docker/CI/test we do not allow falling back to localhost.'
+        : 'Missing API_BASE_URL. In Docker/CI/test we do not allow falling back to localhost.',
+    );
+  }
+
+  const fallback =
+    process.env.NODE_ENV === 'development'
+      ? 'http://localhost:3001'
+      : 'http://api:3000';
+
+  return normalizeBaseUrl(fallback);
+}

apps/website/lib/services/ServiceFactory.ts

@@ -12,6 +12,7 @@ import { DashboardApiClient } from '../api/dashboard/DashboardApiClient';
 import { PolicyApiClient } from '../api/policy/PolicyApiClient';
 import { ProtestsApiClient } from '../api/protests/ProtestsApiClient';
 import { PenaltiesApiClient } from '../api/penalties/PenaltiesApiClient';
+import { getWebsiteApiBaseUrl } from '../config/apiBaseUrl';
 import { PenaltyService } from './penalties/PenaltyService';
 import { ConsoleErrorReporter } from '../infrastructure/logging/ConsoleErrorReporter';
 import { ConsoleLogger } from '../infrastructure/logging/ConsoleLogger';
@@ -102,7 +103,7 @@ export class ServiceFactory {
 
   private static getDefaultInstance(): ServiceFactory {
     if (!this.defaultInstance) {
-      this.defaultInstance = new ServiceFactory(process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3001');
+      this.defaultInstance = new ServiceFactory(getWebsiteApiBaseUrl());
     }
     return this.defaultInstance;
   }

apps/website/lib/services/ServiceProvider.tsx

@@ -2,6 +2,7 @@
 
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { createContext, ReactNode, useContext, useMemo } from 'react';
+import { getWebsiteApiBaseUrl } from '../config/apiBaseUrl';
 import { ServiceFactory } from './ServiceFactory';
 
 // Import all service types
@@ -82,7 +83,7 @@ interface ServiceProviderProps {
 
 export function ServiceProvider({ children }: ServiceProviderProps) {
   const services = useMemo(() => {
-    const serviceFactory = new ServiceFactory(process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3001');
+    const serviceFactory = new ServiceFactory(getWebsiteApiBaseUrl());
 
     return {
       raceService: serviceFactory.createRaceService(),

docker-compose.test.yml

@@ -0,0 +1,89 @@
+services:
+  deps:
+    image: node:20-alpine
+    working_dir: /app
+    environment:
+      - NODE_ENV=development
+      - NPM_CONFIG_FUND=false
+      - NPM_CONFIG_AUDIT=false
+      - NPM_CONFIG_UPDATE_NOTIFIER=false
+    volumes:
+      - ./:/app
+      - test_node_modules:/app/node_modules
+      - test_npm_cache:/root/.npm
+    command:
+      [
+        "sh",
+        "-lc",
+        "set -e; LOCK_HASH=\"$$(sha1sum package-lock.json | awk '{print $$1}')\"; MARKER=\"node_modules/.gridpilot_lock_hash_test\"; if [ -f \"$$MARKER\" ] && [ \"$$(cat \"$$MARKER\")\" = \"$$LOCK_HASH\" ]; then echo \"[deps] node_modules up-to-date\"; else echo \"[deps] installing api+website deps\"; npm install --no-package-lock --workspace=./apps/api --workspace=./apps/website --include-workspace-root --no-audit --fund=false --prefer-offline; echo \"$$LOCK_HASH\" > \"$$MARKER\"; fi",
+      ]
+    networks:
+      - gridpilot-test-network
+    restart: "no"
+
+  api:
+    image: node:20-alpine
+    environment:
+      - NODE_ENV=test
+    ports:
+      - "3001:3000"
+    command:
+      [
+        "sh",
+        "-lc",
+        "node -e \"const http=require('http'); const baseCors={ 'Access-Control-Allow-Credentials':'true','Access-Control-Allow-Headers':'Content-Type','Access-Control-Allow-Methods':'GET,POST,PUT,PATCH,DELETE,OPTIONS' }; const server=http.createServer((req,res)=>{ const origin=req.headers.origin||'http://localhost:3000'; res.setHeader('Access-Control-Allow-Origin', origin); res.setHeader('Vary','Origin'); for(const [k,v] of Object.entries(baseCors)){ res.setHeader(k,v); } if(req.method==='OPTIONS'){ res.statusCode=204; return res.end(); } const url=new URL(req.url,'http://localhost'); const send=(code,obj)=>{ res.statusCode=code; res.setHeader('content-type','application/json'); res.end(JSON.stringify(obj)); }; if(url.pathname==='/health'){ return send(200,{status:'ok'});} if(url.pathname==='/auth/session'){ res.statusCode=200; res.setHeader('content-type','application/json'); return res.end('null'); } if(url.pathname==='/races/page-data'){ return send(200,{races:[]}); } if(url.pathname==='/leagues/all-with-capacity'){ return send(200,{leagues:[], totalCount:0}); } if(url.pathname==='/teams/all'){ return send(200,{teams:[], totalCount:0}); } return send(404,{message:'Not Found', path:url.pathname}); }); server.listen(3000,()=>console.log('[api-mock] listening on 3000'));\"",
+      ]
+    networks:
+      - gridpilot-test-network
+    restart: unless-stopped
+    healthcheck:
+      test:
+        [
+          "CMD",
+          "node",
+          "-e",
+          "fetch('http://localhost:3000/health').then(r=>process.exit(r.ok?0:1)).catch(()=>process.exit(1))",
+        ]
+      interval: 2s
+      timeout: 2s
+      retries: 30
+
+  website:
+    image: gridpilot-website-test
+    build:
+      context: .
+      dockerfile: apps/website/Dockerfile.dev
+    environment:
+      - NEXT_TELEMETRY_DISABLED=1
+      - NODE_ENV=development
+      - DOCKER=true
+      - NEXT_PUBLIC_GRIDPILOT_MODE=alpha
+      - API_BASE_URL=http://api:3000
+      - NEXT_PUBLIC_API_BASE_URL=http://localhost:3001
+    ports:
+      - "3000:3000"
+    volumes:
+      - ./:/app
+      - test_node_modules:/app/node_modules
+      - test_npm_cache:/root/.npm
+    command: ["sh", "-lc", "npm run dev --workspace=@gridpilot/website"]
+    depends_on:
+      api:
+        condition: service_healthy
+    networks:
+      - gridpilot-test-network
+    restart: unless-stopped
+    healthcheck:
+      test:
+        ["CMD", "node", "-e", "fetch('http://localhost:3000').then(r=>process.exit(r.ok?0:1)).catch(()=>process.exit(1))"]
+      interval: 5s
+      timeout: 5s
+      retries: 20
+
+networks:
+  gridpilot-test-network:
+    driver: bridge
+
+volumes:
+  test_node_modules:
+  test_npm_cache:

package.json

@@ -89,6 +89,12 @@
     "docker:prod:clean": "docker-compose -p gridpilot-prod -f docker-compose.prod.yml down -v",
     "docker:prod:down": "docker-compose -p gridpilot-prod -f docker-compose.prod.yml down",
     "docker:prod:logs": "docker-compose -p gridpilot-prod -f docker-compose.prod.yml logs -f",
+    "docker:test:deps": "COMPOSE_PARALLEL_LIMIT=1 docker-compose -p gridpilot-test -f docker-compose.test.yml run --rm deps",
+    "docker:test:up": "COMPOSE_PARALLEL_LIMIT=1 docker-compose -p gridpilot-test -f docker-compose.test.yml up -d --build api website",
+    "docker:test:down": "docker-compose -p gridpilot-test -f docker-compose.test.yml down -v",
+    "docker:test:wait": "node -e \"const sleep=(ms)=>new Promise(r=>setTimeout(r,ms)); const wait=async(url,label)=>{for(let i=0;i<90;i++){try{const r=await fetch(url); if(r.ok){console.log('[wait] '+label+' ready'); return;} }catch{} await sleep(1000);} console.error('[wait] '+label+' not ready: '+url); process.exit(1);}; (async()=>{await wait('http://localhost:3001/health','api'); await wait('http://localhost:3000','website');})();\"",
+    "smoke:website:docker": "DOCKER_SMOKE=true npx playwright test -c playwright.website.config.ts",
+    "test:docker:website": "sh -lc \"set -e; trap 'npm run docker:test:down' EXIT; npm run docker:test:deps; npm run docker:test:up; npm run docker:test:wait; npm run smoke:website:docker\"",
     "dom:process": "npx tsx scripts/dom-export/processWorkflows.ts",
     "env:website:merge": "node scripts/merge-website-env.js",
     "generate-templates": "npx tsx scripts/generate-templates/index.ts",

playwright.website.config.ts

@@ -14,7 +14,7 @@ import { defineConfig, devices } from '@playwright/test';
  */
 export default defineConfig({
   testDir: './tests/smoke',
-  testMatch: ['**/website-pages.spec.ts'],
+  testMatch: ['**/website-pages.test.ts'],
   testIgnore: ['**/electron-build.smoke.test.ts'],
   
   // Serial execution for consistent results
@@ -45,12 +45,16 @@ export default defineConfig({
   retries: 0,
   
   // Web server configuration
-  webServer: {
-    command: 'npm run dev -w @gridpilot/website',
-    url: 'http://localhost:3000',
-    timeout: 120_000,
-    reuseExistingServer: !process.env.CI,
-  },
+  // - Default: start Next dev server locally
+  // - Docker smoke: website is started via docker-compose, so skip webServer
+  webServer: process.env.DOCKER_SMOKE
+    ? undefined
+    : {
+        command: 'npm run dev -w @gridpilot/website',
+        url: 'http://localhost:3000',
+        timeout: 120_000,
+        reuseExistingServer: !process.env.CI,
+      },
   
   // Browser projects
   projects: [

tests/smoke/website-pages.test.ts

@@ -1,14 +1,20 @@
 import { test, expect } from '@playwright/test';
 
 test.describe('Website smoke - core pages render', () => {
-  const routes = [
-    { path: '/', name: 'landing' },
-    { path: '/dashboard', name: 'dashboard' },
-    { path: '/drivers', name: 'drivers list' },
-    { path: '/leagues', name: 'leagues list' },
-    { path: '/profile', name: 'profile' },
-    { path: '/teams', name: 'teams list' },
-  ];
+  const routes = process.env.DOCKER_SMOKE
+    ? [
+        { path: '/', name: 'landing' },
+        { path: '/leagues', name: 'leagues list' },
+        { path: '/teams', name: 'teams list' },
+      ]
+    : [
+        { path: '/', name: 'landing' },
+        { path: '/dashboard', name: 'dashboard' },
+        { path: '/drivers', name: 'drivers list' },
+        { path: '/leagues', name: 'leagues list' },
+        { path: '/profile', name: 'profile' },
+        { path: '/teams', name: 'teams list' },
+      ];
 
   for (const route of routes) {
     test(`renders ${route.name} page without console errors (${route.path})`, async ({ page }) => {
@@ -21,8 +27,23 @@ test.describe('Website smoke - core pages render', () => {
         }
       });
 
+      const apiCallPromise =
+        route.path === '/leagues'
+          ? page.waitForResponse((resp) => {
+              return resp.url().includes('/leagues/all-with-capacity') && resp.status() === 200;
+            })
+          : route.path === '/teams'
+            ? page.waitForResponse((resp) => {
+                return resp.url().includes('/teams/all') && resp.status() === 200;
+              })
+            : null;
+
       await page.goto(route.path, { waitUntil: 'networkidle' });
 
+      if (apiCallPromise) {
+        await apiCallPromise;
+      }
+
       await expect(page).toHaveTitle(/GridPilot/i);
 
       expect(