Vite

What is Vite?

For Beginners
Why We Use It

Vite (pronounced “veet”, French for “fast”) is a build tool that helps you develop web applications quickly. Here’s what it does:

Development Server: Starts your app instantly (no waiting!) and updates immediately when you save changes
Build Tool: Bundles your code for production, making it fast and optimized for users
Modern Approach: Uses native ES modules in development for lightning-fast hot reloading

Think of it this way:

Traditional tools (like Webpack) rebuild your entire app on every change → slow
Vite only rebuilds what changed → instant updates

Key benefits for learners:

Starts in milliseconds, not seconds
Works with React, Vue, or vanilla JavaScript
Simple configuration (or none at all!)
Great for learning because you see changes instantly

Instant Server

Starts dev server in milliseconds with native ESM

Hot Module Replacement

Lightning-fast updates without losing app state

Optimized Builds

Production builds with Rollup for optimal performance

When to Use

Perfect For
Use Next.js Instead

Single-page applications (SPAs)
Client-side only apps
Prototypes and MVPs
Component libraries
Static web apps
Learning React/Vue

Project Setup

Create New Project

# With React
pnpm create vite@latest my-app -- --template react-ts

# With Vue
pnpm create vite@latest my-app -- --template vue-ts

# Vanilla TypeScript
pnpm create vite@latest my-app -- --template vanilla-ts

Install Dependencies

cd my-app
pnpm install

Start Development

pnpm dev

Best Practices

File Structure

src/
├── assets/
│   └── images/
├── components/
│   ├── ui/
│   └── features/
├── hooks/
├── lib/
│   └── utils.ts
├── styles/
│   └── main.css
├── App.tsx
└── main.tsx

Configuration

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

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  },
  server: {
    port: 3000,
    open: true
  },
  build: {
    outDir: 'dist',
    sourcemap: true
  }
})

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "jsx": "react-jsx",
    "strict": true,
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "noEmit": true,
    "noUncheckedIndexedAccess": true,
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src"]
}

Essential Packages

# UI Framework
pnpm add react react-dom
pnpm add -D @types/react @types/react-dom

# Routing
pnpm add react-router-dom

# Data Fetching
pnpm add @tanstack/react-query axios

# State Management
pnpm add zustand

# Styling
pnpm add tailwindcss postcss autoprefixer
pnpm add -D @tailwindcss/forms @tailwindcss/typography

Common Patterns

React Router Setup

// main.tsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom'
import App from './App'
import './index.css'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StrictMode>
)

// App.tsx
import { Routes, Route } from 'react-router-dom'
import HomePage from './pages/Home'
import AboutPage from './pages/About'

export default function App() {
  return (
    <Routes>
      <Route path="/" element={<HomePage />} />
      <Route path="/about" element={<AboutPage />} />
    </Routes>
  )
}

Environment Variables

VITE_API_URL=https://api.example.com
VITE_APP_TITLE=My App

const apiUrl = import.meta.env.VITE_API_URL
const appTitle = import.meta.env.VITE_APP_TITLE

// Type-safe env variables
interface ImportMetaEnv {
  readonly VITE_API_URL: string
  readonly VITE_APP_TITLE: string
}

Environment variables in Vite must be prefixed with VITE_ to be exposed to client code. Never expose sensitive secrets in client-side code!

Code Splitting

import { lazy, Suspense } from 'react'

// Lazy load components
const Dashboard = lazy(() => import('./pages/Dashboard'))
const Settings = lazy(() => import('./pages/Settings'))

export default function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/settings" element={<Settings />} />
      </Routes>
    </Suspense>
  )
}

Performance Optimization

Asset Optimization

// Import images as URLs
import logoUrl from './assets/logo.png'

// Import images as modules
import logo from './assets/logo.png?url'

// Import as raw string
import svg from './assets/icon.svg?raw'

// Explicit URL with query
<img src={logoUrl} alt="Logo" />

Build Optimization

// vite.config.ts
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          'react-vendor': ['react', 'react-dom'],
          'router': ['react-router-dom'],
          'query': ['@tanstack/react-query']
        }
      }
    },
    chunkSizeWarningLimit: 1000
  }
})

Preview Production Build

# Build for production
pnpm build

# Preview production build locally
pnpm preview

Deployment

Vercel

# Auto-detected, zero config
vercel

Netlify

# netlify.toml
[build]
  command = "pnpm build"
  publish = "dist"

GitHub Pages

// vite.config.ts
export default defineConfig({
  base: '/repo-name/'
})

Railway

# Build and serve static files
railway up

Vite vs Next.js

Feature	Vite	Next.js
Dev Speed	⚡ Instant	Fast
SSR/SSG	❌ No	✅ Yes
API Routes	❌ No	✅ Yes
File Routing	❌ No	✅ Yes
Build Tool	✅ Rollup	Webpack/Turbopack
Best For	SPAs, Prototypes	Full-stack apps

Start with Vite for learning and prototypes. Graduate to Next.js when you need SSR, API routes, or SEO optimization.

Frontend

Backend

What is Vite?

Instant Server

Hot Module Replacement

Optimized Builds

When to Use

Project Setup

Best Practices

File Structure

Configuration

Essential Packages

Common Patterns

React Router Setup

Environment Variables

Code Splitting

Performance Optimization

Deployment

Vercel

Netlify

GitHub Pages

Railway

Vite vs Next.js

​What is Vite?

Instant Server

Hot Module Replacement

Optimized Builds

​When to Use

​Project Setup

​Best Practices

​File Structure

​Configuration

​Essential Packages

​Common Patterns

​React Router Setup

​Environment Variables

​Code Splitting

​Performance Optimization

​Deployment

Vercel

Netlify

GitHub Pages

Railway

​Vite vs Next.js

What is Vite?

When to Use

Project Setup

Best Practices

File Structure

Configuration

Essential Packages

Common Patterns

React Router Setup

Environment Variables

Code Splitting

Performance Optimization

Deployment

Vite vs Next.js