Cheatsheet Vite

npm create vite@latest my-app
npm create vite@latest -- --template react
npm create vite@latest -- --template vue
npm create vite@latest -- --template svelte
cd my-app && npm install

Initialize a Vite project.

vanilla     # plain JS
react       # React
vue         # Vue 3
svelte      # Svelte
solid       # SolidJS
preact, lit, qwik...

Templates with TS variants.

index.html    # entry point
src/
  main.js    # main JS
  App.vue    # root component
public/      # static assets
vite.config.js
package.json

Default structure.

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

export default defineConfig({
  plugins: [react()],
  server: { port: 3000 },
  base: '/',
})

Basic configuration.

resolve: {
  alias: {
    '@': '/src',
    '~': '/src/components',
  },
}

Import shortcuts.

// .env / .env.production
VITE_API_URL=https://api.example.com

// In the code:
import.meta.env.VITE_API_URL
import.meta.env.MODE
import.meta.env.PROD // true/false

Env vars with the VITE_ prefix.

// Native support for:
// .css, .scss, .sass, .less, .styl
npm i -D sass  # for SASS

css: {
  modules: { localsConvention: 'camelCase' },
  preprocessorOptions: {
    scss: { additionalData: `@import "vars";` }
  }
}

CSS processing.

@vitejs/plugin-react
@vitejs/plugin-vue
@vitejs/plugin-legacy

plugins: [
  react(),
  legacy({ targets: ['defaults'] }),
]

Plugins from the Vite team.

vite-plugin-pwa    # PWA
vite-plugin-svgr   # SVG the component
vite-plugin-inspect # debug
unplugin-auto-import # auto imports
unplugin-vue-components

Plugin ecosystem.

function myPlugin() {
  return {
    name: 'my-plugin',
    transform(code, id) {
      if (id.endsWith('.special')) {
        return { code: transform(code) }
      }
    },
  }
}

Create your own plugin.

npm run dev   # or vite

server: {
  port: 3000,
  open: true,
  host: true,  // expose on the network
  https: true,
}

Development server.

server: {
  proxy: {
    '/api': {
      target: 'http://localhost:8080',
      changeOrigin: true,
      rewrite: (p) => p.replace(/^\/api/, ''),
    },
  }
}

Proxy to the backend.

// Automatic HMR (no config)
// import.meta.hot for manual control:
if (import.meta.hot) {
  import.meta.hot.accept((mod) => {
    console.log('Updated!')
  })
}

Hot Module Replacement.

npm run build  # or vite build

build: {
  outDir: 'dist',
  sourcemap: true,
  minify: 'terser',
  target: 'es2020',
}

Generate an optimized build.

build: {
  rollupOptions: {
    output: {
      manualChunks: {
        vendor: ['react', 'react-dom'],
      },
    },
  }
}

Split into chunks.

npm run preview  # serve dist/

// Bundle analysis:
npm i -D rollup-plugin-visualizer
import { visualizer } from 'rollup-plugin-visualizer'
plugins: [visualizer({ open: true })]

Preview and analyze the build.

build: {
  lib: {
    entry: 'src/index.js',
    name: 'MyLib',
    formats: ['es', 'cjs', 'umd'],
  },
  rollupOptions: {
    external: ['react'],
  }
}

Build the a library.

npx vite           # dev server
npx vite build     # production build
npx vite preview   # serve dist
npx vite optimize  # pre-bundling

Main commands.

--port 3000
--host 0.0.0.0
--open
--mode staging
--config vite.custom.js
--debug

CLI options.

# Vite advantages:
# • Instant dev server (ESM)
# • Ultra-fast HMR
# • Build with Rollup (optimized)
# • Minimal config
# • Native TS/JSX support

Why choose Vite.