Our review

Provides patterns for configuring Vite build tool including import aliases, environment variables, and build optimization.

Strengths

Enforces consistent import aliases to avoid relative path complexity
Covers essential Vite configuration for development server proxy and build splitting
Includes type-safe environment variable handling with VITE_ prefix

Limitations

Primarily focused on React projects
Does not cover advanced Vite plugin development
Assumes a specific folder structure (src directory)

When to use it

When setting up a new Vite project or refactoring configuration for better maintainability.

When not to use it

When using a different build tool like Webpack or Parcel, or when project structure deviates significantly from standard conventions.

Examples

Set up Vite import alias and proxy

Configure Vite with '@' alias for './src' and proxy '/api' to http://localhost:3000.

Configure build chunk splitting

Split Vite build output into separate vendor chunks for react, react-dom, react-router-dom, and @tanstack/react-query.

Set up environment variables

Add VITE_API_URL and VITE_SOCKET_URL as environment variables with type safety in Vite.

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 Build Tool Configuration

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