Vite + TS: cwkPippa Frontend Pattern

"Vite is the bundler-and-dev-server cwkPippa's frontend runs on. Fast, simple, TypeScript-native."

What Vite is

Vite (vitejs.dev) is a build tool with two modes: dev (ESM-native, no bundling, instant HMR) and prod (Rollup-based bundle, optimized for shipping). For most React/Vue/Svelte projects that aren't using a full framework like Next.js, Vite is the canonical choice.

TypeScript support is first-class. Drop a .ts/.tsx file in src/, import it, and Vite handles transpilation via esbuild. Type checking is delegated — you run tsc --noEmit separately.

The cwkPippa frontend layout

cwkPippa's frontend/ uses Vite + React 19 + TypeScript:

frontend/
├── package.json
├── tsconfig.json           # strict: true, target ES2022
├── vite.config.ts          # Vite config — plugins, aliases
├── index.html              # entry point
└── src/
    ├── main.tsx            # React mount
    ├── App.tsx             # top-level component
    ├── components/         # UI components
    ├── hooks/              # custom hooks
    ├── lib/                # utilities, api
    └── types/              # shared types

npm run dev starts the Vite dev server with HMR. npm run build produces the production bundle. npm run typecheck runs tsc --noEmit.

Path aliases

Vite supports path aliases via tsconfig's paths option AND a matching alias in vite.config.ts. Common pattern: @ → ./src. Then import { Button } from '@/components/Button' instead of long relative paths.

For React frontend code that isn't Next.js, Vite is the default 2026 stack. It's fast, TypeScript-native, and the configuration surface is small enough to understand.

Code

vite.config.ts — typical setup·typescript

// vite.config.ts — minimal config for a React + TS app.
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'node:path';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
  server: {
    port: 5173,
  },
});

tsconfig.json — paired with Vite·json

// tsconfig.json — matching path aliases.
{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "jsx": "react-jsx",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src"]
}

Exercise

Scaffold a new Vite + React + TS project (npm create vite@latest my-app -- --template react-ts). Add a path alias @ → ./src. Import a component from @/components/.... Confirm both Vite dev and tsc --noEmit resolve the alias correctly.

Hint

Vite needs the alias in vite.config.ts; TypeScript needs it in tsconfig.json's paths. Both must agree for everything to work. The vite-tsconfig-paths plugin removes the duplication.

Vite + TS: cwkPippa Frontend Pattern

What Vite is

The cwkPippa frontend layout

Path aliases

Code

External links

Exercise

Progress

Comments 0