Vite Configuration

Create Vite project
npm create vite@latest
npm create vite@latest my-app -- --template react

Available templates
vanilla, vue, react, preact, lit, svelte

Install dependencies
cd my-app
npm install

Dev server
npm run dev

Build for production
npm run build

Preview production build
npm run preview

vite.config.js
import { defineConfig } from vite

export default defineConfig({
  root: ./src,
  base: /,
  publicDir: ../public,
  build: {
    outDir: ../dist,
    assetsDir: assets,
    sourcemap: true
  }
})

Server configuration
server: {
  port: 3000,
  open: true,
  proxy: {
    /api: http://localhost:8080
  }
}

Code splitting
build: {
  rollupOptions: {
    output: {
      manualChunks: {
        vendor: [react, react-dom],
        utils: [./src/utils]
      }
    }
  }
}

Minification
build: {
  minify: terser,
  terserOptions: {
    compress: {
      drop_console: true,
      drop_debugger: true
    }
  }
}

Asset size warning
build: {
  chunkSizeWarningLimit: 1000
}

Install React plugin
npm install @vitejs/plugin-react

Use plugin
import react from @vitejs/plugin-react

export default defineConfig({
  plugins: [react()]
})

Environment variables
.env file:
VITE_API_URL=https://api.example.com

Access in code:
import.meta.env.VITE_API_URL

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