DEV Community

ANKUSH CHOUDHARY JOHAL
ANKUSH CHOUDHARY JOHAL

Posted on • Originally published at johal.in

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

#vite #react #build #single

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

Single Page Applications (SPAs) deliver seamless, app-like user experiences by loading a single HTML page and dynamically updating content as users interact with the app. Combining Vite 6 (the blazing-fast build tool) with React 19 (the latest iteration of the popular UI library) makes building performant SPAs faster and more efficient than ever.

Prerequisites

Before getting started, ensure you have the following installed:

  • Node.js 18.12.0 or later (Vite 6 requires this minimum version)
  • A package manager: npm, yarn, or pnpm
  • Basic knowledge of React and JavaScript ES6+

Step 1: Create a New Vite Project

Open your terminal and run the following command to scaffold a new Vite project with the React template:

npm create vite@latest my-react-spa -- --template react
Enter fullscreen mode Exit fullscreen mode

Navigate into the project directory and install dependencies:

cd my-react-spa
npm install
Enter fullscreen mode Exit fullscreen mode

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.

Step 2: Understand the Project Structure

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

Step 3: Set Up Client-Side Routing

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
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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

Step 4: Manage Application State

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.

Step 5: Style Your Application

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;
}
Enter fullscreen mode Exit fullscreen mode 
// App.jsx
import styles from './App.module.css';

function App() {
  return ...;
}
Enter fullscreen mode Exit fullscreen mode

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

Step 6: Build and Preview Your SPA

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

npm run build
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Step 7: Deploy Your SPA

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
Enter fullscreen mode Exit fullscreen mode

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.

Conclusion

Vite 6 and React 19 are a powerful combination for building modern SPAs. Vite's instant hot module replacement (HMR) speeds up development, while React 19's performance improvements and new features make for a better user experience. With this guide, you can get a production-ready SPA up and running in minutes.

Top comments (0)