vite-configuration

name	Vite Configuration
description	This skill should be used when the user asks to "setup Vite", "Vite config", "configure Vite", "Vite React", "Vite proxy", "Vite build", "optimize Vite", or works with Vite build tool configuration.
version	0.1.0

Vite Configuration

Vite is a next-generation frontend build tool that provides instant server start and lightning-fast HMR.

Core Concepts

Why Vite

• Instant Server Start - Native ESM, no bundling needed
• Lightning Fast HMR - Module-level hot replacement
• Optimized Builds - Uses Rollup for production
• TypeScript Support - Out of the box
• Rich Plugin Ecosystem - Compatible with Rollup plugins

Project Setup

Create React + TypeScript project:

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

Templates available:

• react - React with JavaScript
• react-ts - React with TypeScript
• vue / vue-ts - Vue
• preact / preact-ts - Preact
• lit / lit-ts - Lit
• svelte / svelte-ts - Svelte
• vanilla / vanilla-ts - Vanilla JS

Configuration File

vite.config.ts:

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

export default defineConfig(({ command, mode }) => {
  // Load env variables based on mode
  const env = loadEnv(mode, process.cwd(), '')

  return {
    plugins: [react()],

    // Root directory
    root: './src',

    // Base public path
    base: '/',

    // Path resolution
    resolve: {
      alias: {
        '@': resolve(__dirname, './src'),
        '@components': resolve(__dirname, './src/components'),
        '@hooks': resolve(__dirname, './src/hooks'),
        '@utils': resolve(__dirname, './src/utils'),
        '@api': resolve(__dirname, './src/api'),
      },
    },

    // CSS configuration
    css: {
      devSourcemap: true,
      modules: {
        localsConvention: 'camelCaseOnly',
      },
      preprocessorOptions: {
        scss: {
          additionalData: `@import "./src/styles/variables.scss";`,
        },
      },
    },

    // Development server
    server: {
      port: 3000,
      strictPort: false,
      open: true,
      cors: true,
      host: true,

      // Proxy configuration
      proxy: {
        '/api': {
          target: env.VITE_API_URL || 'http://localhost:8080',
          changeOrigin: true,
          secure: false,
          rewrite: (path) => path.replace(/^\/api/, ''),
          configure: (proxy, options) => {
            proxy.on('proxyReq', (proxyReq, req, res) => {
              console.log('Proxying:', req.method, req.url)
            })
          },
        },
        '/ws': {
          target: 'ws://localhost:8080',
          ws: true,
          changeOrigin: true,
        },
      },
    },

    // Build configuration
    build: {
      outDir: '../dist',
      emptyOutDir: true,
      sourcemap: mode === 'development',
      minify: 'esbuild',
      target: 'es2020',

      // Rollup options
      rollupOptions: {
        input: {
          main: resolve(__dirname, 'src/main.tsx'),
        },
        output: {
          entryFileNames: 'assets/[name]-[hash].js',
          chunkFileNames: 'assets/[name]-[hash].js',
          assetFileNames: (assetInfo) => {
            const info = assetInfo.name.split('.')
            const ext = info[info.length - 1]
            if (/\.(png|jpe?g|gif|svg|webp|ico)$/i.test(assetInfo.name)) {
              return 'assets/images/[name]-[hash][extname]'
            }
            if (/\.(woff2?|ttf|otf|eot)$/i.test(assetInfo.name)) {
              return 'assets/fonts/[name]-[hash][extname]'
            }
            return 'assets/[name]-[hash][extname]'
          },
        },
      },

      // Chunk size warning
      chunkSizeWarningLimit: 500,

      // Code splitting
      dynamicImportVarsOptions: {
        warnOnError: true,
        exclude: [/node_modules/],
      },
    },

    // Preview server (for production build)
    preview: {
      port: 4173,
      strictPort: false,
      open: true,
      proxy: {
        '/api': {
          target: 'http://localhost:8080',
          changeOrigin: true,
        },
      },
    },

    // Define global constants
    define: {
      __APP_VERSION__: JSON.stringify(process.env.npm_package_version),
      __BUILD_TIME__: JSON.stringify(new Date().toISOString()),
    },

    // Environment variables
    envPrefix: 'VITE_',

    // Optimize dependencies
    optimizeDeps: {
      include: ['react', 'react-dom', 'react-router-dom'],
      exclude: ['@your-org/internal-lib'],
    },

    // esbuild options
    esbuild: {
      jsxInject: `import React from 'react'`,
      drop: mode === 'production' ? ['console', 'debugger'] : [],
    },
  }
})

Environment Variables

.env:

# Available in all modes
VITE_APP_TITLE=My App
VITE_API_BASE_URL=/api

# Private (not exposed to client)
SECRET_KEY=hidden

.env.development:

VITE_API_URL=http://localhost:8080
VITE_DEBUG=true

.env.production:

VITE_API_URL=https://api.production.com
VITE_DEBUG=false

Access in code:

const apiUrl = import.meta.env.VITE_API_URL
const isDev = import.meta.env.DEV
const isProd = import.meta.env.PROD

TypeScript Configuration

tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"],
      "@hooks/*": ["src/hooks/*"],
      "@utils/*": ["src/utils/*"]
    }
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

tsconfig.node.json:

{
  "compilerOptions": {
    "composite": true,
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
}

Common Plugins

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { visualizer } from 'rollup-plugin-visualizer'
import compression from 'vite-plugin-compression'

export default defineConfig({
  plugins: [
    react(),

    // Bundle visualizer
    visualizer({
      open: true,
      gzipSize: true,
      brotliSize: true,
    }),

    // Gzip compression
    compression({
      algorithm: 'gzip',
      ext: '.gz',
    }),

    // Brotli compression
    compression({
      algorithm: 'brotliCompress',
      ext: '.br',
    }),

    // Environment check
    {
      name: 'configure-response-headers',
      configureServer: (server) => {
        server.middlewares.use((_req, res, next) => {
          res.setHeader('X-Frame-Options', 'DENY')
          res.setHeader('X-Content-Type-Options', 'nosniff')
          next()
        })
      },
    },
  ],
})

Build Scripts

package.json:

{
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "build:prod": "tsc && vite build --mode production",
    "preview": "vite preview",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "type-check": "tsc --noEmit"
  }
}

Module Federation

import { defineConfig } from 'vite'
import federation from '@originjs/vite-plugin-federation'

export default defineConfig({
  plugins: [
    federation({
      name: 'host-app',
      remotes: {
        remote_app: 'http://localhost:5001/assets/remoteEntry.js',
      },
      shared: ['react', 'react-dom'],
    }),
  ],
  build: {
    target: 'esnext',
  },
})

Best Practices

1. Use path aliases - Simplify imports with @/ prefix
2. Separate dev/prod configs - Use mode-dependent logic
3. Optimize deps explicitly - Pre-bundle large dependencies
4. Configure proxy for API - Seamless dev experience
5. Use environment types - Add env.d.ts for type safety
6. Enable source maps in dev - Better debugging experience

Additional Resources

• references/vite-plugins.md - Recommended plugins list
• examples/vite-configs/ - Complete configuration examples