watch-party/frontend

Frontend (Vite + React + TS)

Single-page app served by Nginx in production. Uses Vite for build/dev, React Router, and debug-gated logging/overlay.

Prerequisites

• Node.js 20+
• npm (uses package-lock.json)

Commands

npm ci                # install deps
npm run dev           # start Vite dev server (http://localhost:5173)
npm run build         # type-check + production build
npm run lint          # eslint
npm test              # vitest unit tests (config, parsers, API helpers)

Env/config

• PUBLIC_BASE_PATH (build arg) → Vite base/Router basename (default /watch-party/, use / for local dev).
• FRONTEND_MODE → VITE_APP_MODE (debug enables logging/overlay; production disables).
• VITE_BACKEND_ORIGIN (default /api) — relative path preferred so Nginx proxy works; avoid baking hosts.
• Optional polling overrides:
  • VITE_INTERVAL_TIME_SYNC_MS (default 60000)
  • VITE_INTERVAL_TIME_SKEW_MS (default 300000)
  • VITE_INTERVAL_SCHEDULE_POLL_MS (default 60000)

Running locally

cd frontend
npm ci
VITE_APP_MODE=debug npm run dev   # enables debug overlay/logging

The dev server proxies /api to http://localhost:8082 (see vite.config.ts). Adjust if your backend runs elsewhere.

Docker build

docker build -t watchparty-frontend \
  --build-arg PUBLIC_BASE_PATH=/watch-party/ \
  --build-arg FRONTEND_MODE=production \
  --build-arg VITE_BACKEND_ORIGIN=/api \
  .

The runtime Nginx proxy target is controlled separately via BACKEND_ORIGIN in the root .env/compose.