Skip to main content

🖥️ Dashboard UI

This is the graphical user interface for the CONDOR project, built with React 19, Vite, and Microsoft Fluent UI.

Getting Started​

Prerequisites​

  • Node.js (v22+)
  • npm

Installation​

cd server/ui
npm install

Local Development (against a deployed environment)​

The UI can be run locally while pointing all API calls, authentication, and static assets to a deployed CONDOR backend. A Vite dev proxy handles routing and cookie rewriting so login works on http://localhost.

1. Generate the OpenAPI client​

The API client is auto-generated from the backend's OpenAPI spec. Fetch it from the deployed environment:

curl -o openapi.json https://<deployed-server-url>/openapi.json
note

This file is git-ignored. The predev script will regenerate the TypeScript client from it automatically when you run npm run dev.

2. Create .env.development​

Create a .env.development file in the server/ui/ directory (git-ignored):

VITE_OPENAPI_BASE=
VITE_NEARBY_CAMERAS_DISTANCE_KM=50
VITE_PROXY_TARGET=https://<deployed-server-url>
VariableDescription
VITE_OPENAPI_BASELeave empty for local dev — API calls go through the Vite proxy. In production this is set during the Docker build.
VITE_NEARBY_CAMERAS_DISTANCE_KMDistance in km for the nearby cameras feature.
VITE_PROXY_TARGETFull URL of the deployed CONDOR backend. The Vite dev server proxies /api, /static, /health, /openapi.json, and the login page to this target.

3. Start the dev server​

npm run dev

Open http://localhost:5173 — you'll see the login page served from the deployed environment. After logging in, the local React app is served with hot-module replacement.

How the dev proxy works​

  • /api/**, /health, /openapi.json, /docs — proxied to the deployed backend.
  • GET / (no session cookie) — proxied to the deployed backend, which returns the server-rendered login page.
  • GET / (with session cookie) — Vite serves the local React app.
  • /static/** — proxied to the deployed backend (login page CSS, images, video).
  • Set-Cookie rewriting — The proxy strips the Secure flag and adjusts SameSite so cookies work on http://localhost.
info

All proxy configuration is dev-only — guarded behind mode === 'development' and the presence of VITE_PROXY_TARGET. Nothing affects vite build.

Build​

npm run build

Outputs the production bundle to ../private/ (served by the FastAPI backend).

Production Dependencies​

PackageVersionPurpose
@fluentui/react-components^9.72.6Microsoft Fluent UI React components
@fluentui/react-datepicker-compat^0.6.19Fluent UI datepicker component
bootstrap^5.3.8CSS framework for responsive design
chart.js—Charting library (peer dependency of react-chartjs-2)
maplibre-gl^5.12.0Open-source mapping library
proj4^2.20.2Coordinate transformation library
react^19.2.0JavaScript library for building user interfaces
react-chartjs-2^5.3.1React wrapper for Chart.js
react-dom^19.2.0React DOM rendering
wgpu-matrix^3.4.0WebGPU matrix math library