Our review

Configures Vite build tool with import aliases, proxy, and optimized build chunks.

Strengths

Simplifies imports using @ alias
Provides proxy configuration for development
Enables manual chunk splitting for vendor libraries
Handles environment variables with VITE_ prefix

Limitations

Requires both vite.config.ts and tsconfig.json alias settings
Environment variables must be prefixed with VITE_
May require webpack knowledge for migration

When to use it

When setting up a new Vite project or configuring an existing one for efficient development and builds.

When not to use it

When using a different build tool (Webpack, Parcel) or for simple static sites without complex configuration.

Examples

Set up import alias

Configure Vite with @ alias pointing to ./src in both vite.config.ts and tsconfig.json.

Add development proxy

Set up a Vite proxy to forward /api requests to http://localhost:3000.

Optimize bundle chunks

Configure Vite build to split vendor libraries (react, react-dom, react-router-dom, @tanstack/react-query, recharts) into separate chunks.

name: vite description: > Vite build tool patterns and configuration. Trigger: When configuring Vite, setting up aliases, or resolving build issues. license: MIT metadata: author: migestion version: '1.0' scope: [web] auto_invoke: 'Working with Vite configuration' allowed-tools: Read, Edit, Write, Glob, Grep, Bash, WebFetch, WebSearch, Task

Import Aliases (REQUIRED)

// vite.config.ts
export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
});

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Usage

// ✅ ALWAYS: Use @ alias
import { Button } from '@/components/ui/Button';
import { useClientsStore } from '@/stores/clients.store';

// ❌ NEVER: Relative imports
import { Button } from '../../../components/ui/Button';

Configuration

// vite.config.ts
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: 5173,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
      },
    },
  },
  build: {
    outDir: 'dist',
    sourcemap: true,
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
          vendor-router: ['react-router-dom'],
          vendor-query: ['@tanstack/react-query'],
          vendor-charts: ['recharts'],
        },
      },
    },
  },
});

Environment Variables

// ✅ Client-side variables (VITE_ prefix)
const apiUrl = import.meta.env.VITE_API_URL;

// ✅ With fallback
const apiUrl = import.meta.env.VITE_API_URL || 'http://localhost:3000';

// ✅ Type-safe
interface ImportMetaEnv {
  readonly VITE_API_URL: string;
  readonly VITE_SOCKET_URL: string;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

Commands

npm run dev:web              # Start dev server (port 5173)
npm run build:web            # Build for production
npm run preview              # Preview production build

Asset Imports

// ✅ Images
import logo from '@/assets/logo.png';
<img src={logo} alt="Logo" />

// ✅ CSS
import './styles.css';

// ✅ JSON
import data from './data.json';

Related Skills

migestion-web - MiGestion Web patterns
react-18 - React component patterns

Vite Configuration and Patterns

Recommended for

Our review

Strengths

Limitations

Security analysis

Examples

Import Aliases (REQUIRED)

Usage

Configuration

Environment Variables

Commands

Asset Imports

Related Skills

Next.js App Router Expert

README Generator

API Documentation Writer