pediatric-ai-scribe-v3/client/vite.config.ts
Daniel 3222dacc9a feat(client): day 6 — scaffold React 19 + Vite + Tailwind v4 + shadcn/ui
New client/ directory, standalone from the backend: Vite 8 + React
19.2 + TypeScript 6. Tailwind v4 via @tailwindcss/vite plugin (no
postcss config needed). shadcn/ui compatibility wired via
components.json + lib/utils.ts. @tanstack/react-query + react-router-dom
installed for server state + routing.

Vite config essentials:
  base: '/app/'     — Express mounts SPA at /app/*, vanilla JS stays at /
  outDir: '../public/app/' — build lands next to existing static assets
  @/*     → ./src/*      (client-local imports)
  @shared/* → ../shared/* (typed wire protocol shared with backend)
  server.proxy '/api' → localhost:3000 for `npm run dev`

tsconfig.app.json — added baseUrl + paths + include ../shared so the
shared/types.ts + schemas.ts are typechecked on the client side too.

src/index.css — Tailwind v4 @import, shadcn HSL design tokens (light +
dark schemes). Replaces the vite starter template's decorative styles.

No backend touched. Express route serving /app/* lands in Day 7.
2026-04-23 21:58:37 +02:00

36 lines
1.1 KiB
TypeScript

import path from 'node:path';
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tailwindcss from '@tailwindcss/vite';
// Vite config for the React client.
//
// Build output → ../public/app/ so Express can serve it as a static
// bundle. While migration is in-flight, the old vanilla JS still lives
// at /, and the React tree answers /app/*.
//
// Dev server proxies /api to the backend running on localhost:3000
// (or wherever the backend is) so React dev works against real data.
//
// @shared alias resolves to the repo-root shared/ directory — the
// typed wire-protocol + Zod schemas imported by server and client alike.
export default defineConfig({
plugins: [react(), tailwindcss()],
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
'@shared': path.resolve(__dirname, '../shared'),
},
},
server: {
proxy: {
'/api': { target: 'http://localhost:3000', changeOrigin: true },
},
},
build: {
outDir: path.resolve(__dirname, '../public/app'),
emptyOutDir: true,
assetsDir: 'assets',
},
base: '/app/',
});