react-vite

Use when building React SPAs with Vite — project setup, routing, bundling, or development server configuration. Also use when a project needs React without Next.js server-side features, or when building dashboards, admin panels, or embedded apps.

Model	Source
sonnet	pack: frontend

Full Reference

┏━ 🔧 react-vite ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ ┃ Use when building React SPAs with Vite — proje… ┃ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

React + Vite

Vite (v7.x, 2026) + React 19.x. Pairs with React Router v7 and Vitest — all sharing one config. Node.js 20.19+ required.

Quick Reference

Item	Value
React Router	v7 — import from react-router (no -dom suffix)
Vitest	4.x — shares vite.config.ts
Node.js	20.19+ or 22.12+
Docs	https://vite.dev/guide

Reference Index

Topic	File	When to use
Project creation, vite.config.ts, tsconfig, path aliases, structure	reference/setup.md	Starting a project or configuring aliases
React Router v7, layouts, loaders, protected routes, lazy loading	reference/routing.md	Setting up or extending routing
vite build, code splitting, manual chunks, assets, rolldown	reference/build.md	Optimizing bundles or configuring the build
VITE_ prefix, file priority, Zod validation, TypeScript types	reference/env.md	Working with environment variables
Dev proxy, production API config, apiFetch utility	reference/api-proxy.md	Connecting frontend to a backend
Tailwind v4, CSS Modules, styled-components	reference/styling.md	Choosing or configuring a styling approach
Vitest setup, component tests, MSW, router testing	reference/testing.md	Writing or debugging tests
Vercel, Netlify, Nginx, Docker, base URL, vs Next.js	reference/deployment.md	Deploying or choosing between Vite and Next.js

Usage: Read the reference file matching your current task from the index above. Each file is self-contained with code examples and inline gotchas.