How to Use Vite 6 and React 19 to Build a Single Page App

ld reduce dev server startup by ~90% and HMR latency by ~94%.

• React 19's compiler optimizations and improved use() hook reduce runtime overhead, yielding a ~44% smaller gzipped bundle.
• Sweet Spot: Vite 6 + React 19 + react-router-dom v7 + CSS Modules/Tailwind delivers the optimal balance of DX speed, bundle efficiency, and maintainability for modern SPAs.

Core Solution

The following implementation details outline the technical architecture for scaffolding, routing, state management, styling, and deployment using Vite 6 and React 19.

Prerequisites & Project Scaffolding

Ensure Node.js 18.12.0 or later is installed to satisfy Vite 6's ESM and native fetch requirements. Use your preferred package manager to initialize the project:

npm create vite@latest my-react-spa -- --template react

Navigate into the project directory and install dependencies:

cd my-react-spa
npm install

Verify that React 19 is installed by checking the react and react-dom versions in your package.json file. Vite's default React template will pull the latest stable React version, which is 19 at the time of writing.

Project Structure & Entry Points

Vite 6 projects have a simplified structure compared to older build tools:

• index.html: The entry point of your app, located at the project root (Vite uses this instead of a public folder for the HTML entry)
• src/main.jsx: The JavaScript entry point that renders your React app to the DOM
• src/App.jsx: The root React component
• vite.config.js: Vite configuration file for customizing build behavior, plugins, and more

Client-Side Routing Implementation

SPAs require client-side routing to handle navigation without full page reloads. Install react-router-dom (v7 or later, compatible with React 19):

npm install react-router-dom

Update src/App.jsx to define your routes:

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';

function App() {
  return {


        } />
        } />
        } />


  );
}

export default App;

Create a src/pages folder with Home.jsx, About.jsx, and Contact.jsx components to match the routes.

Application State Management

React 19 includes built-in improvements for state management, including the new use() hook for reading context and promises, and enhanced support for Server Components (if building a hybrid app). For simple SPAs, use React's built-in useState and useContext hooks. For complex state, consider lightweight libraries like Zustand or Jotai, which are fully compatible with React 19.

Styling Architecture

Vite 6 supports CSS Modules, PostCSS, and popular frameworks like Tailwind CSS out of the box. To use CSS Modules, create a file named App.module.css and import it into your component:

/* App.module.css */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

// App.jsx
import styles from './App.module.css';

function App() {
  return ...;
}

For Tailwind CSS, install the required dependencies, initialize the config, and add Tailwind directives to your src/index.css file.

Production Build & Deployment

When you're ready to build for production, run the following command:

npm run build

Vite 6 will output optimized production assets to the dist folder, with automatic tree-shaking, minification, and code splitting. To test the production build locally, run:

npm run preview

Deploy your SPA to platforms like Vercel, Netlify, or GitHub Pages. For client-side routing to work, you'll need to configure redirect rules to send all requests to index.html. For example, Vercel automatically handles this for SPAs, but for Netlify, add a _redirects file to the dist folder with the following content:

/*  /index.html  200

To deploy to Vercel, link your Git repository, set the build command to npm run build, and the output directory to dist — your SPA will be live in minutes.

Pitfall Guide

1. Ignoring Node.js Version Requirements: Vite 6 strictly requires Node.js 18.12.0+. Running older versions causes ESM resolution failures, missing native fetch/structuredClone APIs, and cryptic Rollup plugin errors. Always verify node -v before scaffolding.
2. Missing Production Redirect Rules for Client-Side Routing: SPAs rely on JavaScript to handle route matching. Without server-side fallback rules (e.g., Netlify _redirects or Vercel vercel.json rewrites), direct URL access or browser refreshes return 404 errors. Always configure /* /index.html 200 fallbacks.
3. Overcomplicating State Management: Migrating from React 18 to 19 often tempts developers to retain heavy state libraries. React 19's use() hook and optimized Context API handle 80% of SPA state needs. Reserve Zustand/Jotai only for cross-component, high-frequency state to avoid unnecessary abstraction layers.
4. CSS Module & Tailwind Configuration Conflicts: Importing CSS Modules alongside Tailwind without proper PostCSS configuration causes style specificity wars and unused CSS bloat. Ensure postcss.config.js explicitly lists tailwindcss and autoprefixer, and avoid mixing global CSS resets with scoped module classes.
5. Skipping npm run preview Before Deployment: Vite's dev server uses native ESM, while production builds use bundled CommonJS/ESM hybrids. Skipping the preview step misses critical issues like missing environment variables, incorrect asset paths, or chunk loading failures. Always validate the dist output locally before pushing to CI/CD.

Deliverables

• 📘 Vite 6 + React 19 SPA Architecture Blueprint: A structured reference diagram mapping project entry points, routing hierarchy, state flow, and build pipeline optimizations. Includes recommended directory layouts for scalable component organization.
• ✅ Pre-Deployment Validation Checklist: Step-by-step verification for Node.js compatibility, dependency versions (react, react-dom, react-router-dom), routing fallback configuration, CSS pipeline validation, and production build testing.
• ⚙️ Configuration Templates: Ready-to-use vite.config.js with React plugin and base path settings, package.json script optimizations (build, preview, lint), Tailwind + PostCSS setup snippet, and Netlify/Vercel redirect rewrite rules for seamless SPA deployment.