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.
36 lines
1.1 KiB
TypeScript
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/',
|
|
});
|