Skip to main content

Concern

Build tool and dev server (bundling, HMR).

Technology

Vite

Documentation​

Version

v7

Configuration

Dev server port default 5173; override with server.port in vite.config.ts if needed (e.g. worktrees). When started via root pnpm dev, the desktop dev server port is set by VITE_PORT (script sets FRONTEND_DESKTOP_PORT, which maps to VITE_PORT); see stack rule development. Only variables prefixed with VITE_ are exposed to client code via import.meta.env; they are inlined at build time.

Environment variables​

  • VITE_BACKEND_URL — API base URL for the frontend. Build-time (inlined into bundle). Dev: derived from BACKEND_PORT only when unset (http://localhost:BACKEND_PORT); deployed: set at build (e.g. /api for same-origin)—config does not override when already set. See pattern configuration.
  • VITE_PORT — Dev server port (server.port). FRONTEND_DESKTOP_PORT in root .env maps automatically to VITE_PORT via the FRONTEND_DESKTOP_* → VITE_* mapping; default 5173. Root dev script sets FRONTEND_DESKTOP_PORT when using pnpm dev.

Dev uses root .env (desktop vars with FRONTEND_DESKTOP_ prefix, mapped to VITE_* in vite.config; FRONTEND_DESKTOP_PORT → VITE_PORT automatically); deployed build runs with platform env; no run-time env for static assets.

Implementation

The desktop app is created with the Vite template via shadcn create (step that scaffolds the frontend). frontends/desktop/vite.config.ts sets envDir to the monorepo root and, at config load time, loads the root .env with dotenv, maps FRONTEND_DESKTOP_* to VITE_* (so FRONTEND_DESKTOP_PORT → VITE_PORT), and sets VITE_BACKEND_URL to http://localhost:${BACKEND_PORT || '3000'} only when VITE_BACKEND_URL is undefined (dev default; deployed sets it at build time). The config branches resolve alias on command: in dev (command === 'serve') aliases point frontends-shared and shared to the packages’ src so the dev server uses source without relying on dist; in build, aliases use regex subpaths so frontends-shared/* and shared/* resolve to the packages’ dist for production. server.fs.allow; server.port is set from VITE_PORT (default 5173). Add dotenv to desktop devDependencies (see stack rule env-loading). When run via root pnpm dev, the dev script sets FRONTEND_DESKTOP_PORT, which maps to VITE_PORT. Build-time env such as VITE_BACKEND_URL is inlined via import.meta.env.

Integration

React​

React via @vitejs/plugin-react. Styling via @tailwindcss/vite when using styling (Tailwind). Build output consumed by capacitor for mobile. TypeScript via project tsconfig.