Vite React Setup

Vite is the recommended way to start a new React single-page application. This lesson covers scaffolding with npm create vite, project structure, npm scripts, environment variables, and production builds.

Scaffolding with Vite

Vite uses native ES modules during development for instant server start and lightning-fast hot module replacement (HMR). Production builds use Rollup for tree-shaken, optimized output.

The official template includes React 18+ with JSX support out of the box. Choose the TypeScript template if you want typed props and state from day one.

npm create vite@latest my-react-app -- --template react
# or with TypeScript:
npm create vite@latest my-react-app -- --template react-ts

cd my-react-app
npm install
npm run dev

Vite serves on http://localhost:5173 by default. Changes appear instantly without full page reloads.

Key Vite + React Files

index.html          # entry HTML (script type="module" → src/main.jsx)
src/main.jsx        # createRoot(document.getElementById('root')).render(...)
src/App.jsx         # root component
vite.config.js      # plugins, aliases, proxy
.env                # VITE_* environment variables

Unlike CRA, index.html lives at the project root and references /src/main.jsx.
Install @vitejs/plugin-react (included in template) for Fast Refresh.
Only variables prefixed with VITE_ are exposed to client code via import.meta.env.
npm run build outputs static files to dist/ for deployment.

Vite React Commands

The npm scripts you will use every day.

Command	Action
`npm run dev`	Start dev server with HMR
`npm run build`	Production build to `dist/`
`npm run preview`	Preview production build locally
`npm create vite@latest`	Scaffold new project
`import.meta.env.VITE_API_URL`	Read env variable in code
`vite.config.js` → `server.proxy`	Proxy API during development

Basic vite.config.js

Add path aliases and a dev proxy for API calls:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  resolve: { alias: { '@': '/src' } },
  server: { proxy: { '/api': 'http://localhost:3000' } },
});

Deploying a Vite React App

Run npm run build and deploy the dist/ folder to Netlify, Vercel, Cloudflare Pages, or any static host. Set the SPA fallback to index.html so client-side routing works. For SSR or RSC, consider Next.js instead of a plain Vite SPA.

Common Mistakes

Using process.env.REACT_APP_* instead of import.meta.env.VITE_* in Vite.
Putting secrets in VITE_ variables — they are embedded in the client bundle.
Forgetting to configure SPA fallback on static hosts when using React Router.
Editing dist/ directly instead of rebuilding from source.

Key Takeaways

Use npm create vite@latest with the react or react-ts template for new apps.
Vite offers fast HMR and simple configuration via vite.config.js.
Client env vars must use the VITE_ prefix and import.meta.env.
Deploy the dist/ folder after npm run build.

Pro Tip

Add "type": "module" in package.json (Vite default) and use .jsx or .tsx extensions consistently so your editor and ESLint recognize React files.