Skip to main content

Demo mode

The frontend can run without a backend. Every REST call, WebSocket message and camera snapshot is answered by Mock Service Worker, reusing the same handlers as the unit tests. This is what the public demo site serves.

Running it locally​

Set VITE_MOCK_API=true and start the frontend as usual from the frontend directory:

VITE_MOCK_API=true npm run start

To try the production build instead:

VITE_MOCK_API=true npm run build && npm run serve

A banner is pinned to the bottom of the screen whenever the flag is set.

How it works​

src/index.tsx awaits src/demo/bootstrap.ts before rendering, so the very first requests the app makes are already intercepted. The bootstrap:

  • Seeds a user cookie and the camera store in localStorage, so a visitor lands logged in with cameras selected.
  • Starts the worker with the REST handlers from tests/mocks/handlers.ts and the WebSocket handlers from tests/mocks/wsHandlers.ts.
  • Serves camera snapshots from the JPEG fixtures in tests/mocks/fixtures/, via src/demo/snapshotLoader.ts.

Unhandled requests are bypassed, so fonts, chunks and hashed assets still load from the network.

info

REST calls and snapshots are intercepted by the service worker, while the WebSocket API is intercepted in the page itself by patching the global WebSocket.

The service worker script​

demo-public/mockServiceWorker.js is generated by MSW and deliberately lives outside public/. A service worker hosted on the app origin can install a permanent, origin wide request interceptor, so it must only ever ship in the demo build.

The vite-plugins/mockServiceWorker.ts plugin emits it into dist/ only when VITE_MOCK_API=true, and serves it from the dev server under the same condition.

warning

CI fails the regular frontend build if dist/mockServiceWorker.js shows up in it. Do not move the script into public/.

Regenerate it after upgrading msw:

npx msw init demo-public

Tests​

e2e/tests/demo.spec.ts smoke tests the built demo and runs in CI as the Demo build smoke test job:

npx playwright test -c e2e/playwright.demo.config.ts