Vite Configuration & Features

Why Vite?

• Dev server uses native ES modules — instant server start (no bundling needed)

• HMR (Hot Module Replacement) is blazing fast — updates only changed module

• Production build uses Rollup — optimized, tree-shaken output

• Pre-bundles dependencies with esbuild (100x faster than JS-based bundlers)

vite.config.ts

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

export default defineConfig({
  plugins: [
    react(),                        // React fast refresh
    // @vitejs/plugin-vue for Vue
    // @vitejs/plugin-svelte for Svelte
  ],

  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      '@components': path.resolve(__dirname, './src/components'),
    },
  },

  server: {
    port: 3000,
    open: true,                     // auto-open browser
    proxy: {
      '/api': {
        target: 'http://localhost:8000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },

  build: {
    outDir: 'dist',
    sourcemap: true,
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
          router: ['react-router-dom'],
        },
      },
    },
    chunkSizeWarningLimit: 1000,    // KB
  },

  css: {
    modules: {
      localsConvention: 'camelCase',
    },
    preprocessorOptions: {
      scss: {
        additionalData: '@import "@/styles/variables.scss";',
      },
    },
  },

  test: {                           // Vitest config (co-located)
    globals: true,
    environment: 'jsdom',
    setupFiles: ['./src/test/setup.ts'],
    coverage: {
      reporter: ['text', 'lcov'],
    },
  },
});

Environment Variables

# .env files (loaded in priority order)
.env              # all modes
.env.local        # all modes, gitignored
.env.development  # dev mode only
.env.production   # prod mode only

# Variables must be prefixed VITE_ to be exposed to client
VITE_API_URL=https://api.example.com
VITE_APP_TITLE=My App
SECRET_KEY=server-only  # NOT prefixed, NOT exposed

# Access in code
const apiUrl = import.meta.env.VITE_API_URL;
const isProd = import.meta.env.PROD;    // boolean
const isDev = import.meta.env.DEV;      // boolean
const mode = import.meta.env.MODE;     // 'development' or 'production'

Vitest

// Vitest — Jest-compatible test runner built on Vite
// Same API as Jest: describe, it, test, expect, vi (replaces jest)
import { describe, it, expect, vi } from 'vitest';

describe('utils', () => {
  it('should add numbers', () => {
    expect(add(1, 2)).toBe(3);
  });

  it('should mock module', async () => {
    vi.mock('./api', () => ({
      fetchUser: vi.fn().mockResolvedValue({ id: 1, name: 'Alice' }),
    }));
    const user = await fetchUser(1);
    expect(user.name).toBe('Alice');
  });
});

// Run
// vitest          — watch mode
// vitest run      — single run (CI)
// vitest --ui     — browser UI
// vitest --coverage

CLI Commands

npm create vite@latest my-app -- --template react-ts

vite                    # start dev server
vite build              # production build
vite preview            # preview production build locally
vite --port 4000        # custom port
vite build --watch      # watch for changes