Vite

Vite Skill

Bookkeep uses Vite 5.x with @vitejs/plugin-react-swc for fast HMR and transpilation. The frontend builds to dist/ and is served by the FastAPI backend in production. SWC replaces Babel for significantly faster development builds.

Quick Start

Development Server

npm run dev          # Starts on port 8080
npm run build        # Production build to dist/
npm run preview      # Preview production build locally

Current Configuration

// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import path from "path";

export default defineConfig(({ mode }) => ({
  server: {
    host: "::",           // Listen on all interfaces
    port: 8080,
  },
  plugins: [react()],     // SWC for fast transpilation
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
  build: {
    outDir: "dist",
  },
}));

Key Concepts

Environment Variables

// src/lib/api.ts - Environment-aware API URL
const API_BASE_URL = import.meta.env.VITE_API_URL || 
  (import.meta.env.PROD ? '' : 'http://localhost:8000');

Code Splitting Pattern

All pages except Login and NotFound are lazy-loaded:

// src/App.tsx
import { Suspense, lazy } from "react";

// Static imports for critical path
import Login from "@/pages/Login";
import NotFound from "@/pages/NotFound";

// Lazy-load everything else
const Settings = lazy(() => import("@/pages/Settings"));
const BookDetails = lazy(() => import("@/pages/BookDetails"));

// Wrap routes in Suspense
<Suspense fallback={<PageLoader />}>
  <Routes>
    <Route path="/settings" element={<Settings />} />
  </Routes>
</Suspense>

See Also

• config - Vite configuration patterns
• environment - Environment variable handling
• build - Production build optimization
• hmr - HMR debugging and patterns

Related Skills

• See the react skill for component patterns and lazy loading
• See the typescript skill for path alias TypeScript configuration
• See the tailwind skill for PostCSS integration