Vite Cheat Sheet

# Bikin project baru (interactive)
npm create vite@latest my-app
 
# Dengan template spesifik
npm create vite@latest my-app -- --template react-ts
npm create vite@latest my-app -- --template vue-ts
npm create vite@latest my-app -- --template vanilla-ts
npm create vite@latest my-app -- --template svelte-ts
 
# Templates yang tersedia:
#   vanilla, vanilla-ts
#   vue, vue-ts
#   react, react-ts
#   preact, preact-ts
#   lit, lit-ts
#   svelte, svelte-ts
#   solid, solid-ts
 
# Jalankan dev server
npm run dev
 
# Build untuk production
npm run build
 
# Preview build production
npm run preview

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';
 
export default defineConfig({
  plugins: [react()],
  root: '.',
  base: '/',
  publicDir: 'public',
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      '@components': path.resolve(__dirname, './src/components'),
      '@utils': path.resolve(__dirname, './src/utils'),
    },
  },
  server: {
    port: 3000,
    open: true,
    host: true,
    cors: true,
  },
  build: {
    outDir: 'dist',
    sourcemap: true,
    target: 'es2020',
    minify: 'esbuild',
    chunkSizeWarningLimit: 1000,
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
          utils: ['lodash-es', 'date-fns'],
        },
      },
    },
  },
});

import { defineConfig } from 'vite';
 
export default defineConfig(({ command, mode }) => {
  if (command === 'serve') {
    // Dev server config
    return {
      server: {
        port: 3000,
      },
    };
  } else {
    // Build config
    return {
      build: {
        outDir: 'dist',
      },
    };
  }
});

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import vue from '@vitejs/plugin-vue';
import { svelte } from '@sveltejs/vite-plugin-svelte';
import tailwindcss from '@tailwindcss/vite';
import { visualizer } from 'rollup-plugin-visualizer';
import { VitePWA } from 'vite-plugin-pwa';
import compression from 'vite-plugin-compression';
import mkcert from 'vite-plugin-mkcert';
 
export default defineConfig({
  plugins: [
    react(),
    // vue(),
    // svelte(),
    tailwindcss(),
    VitePWA({
      registerType: 'autoUpdate',
      manifest: {
        name: 'My App',
        short_name: 'MyApp',
      },
    }),
    compression({
      algorithm: 'gzip',
      ext: '.gz',
    }),
    visualizer({
      open: true,
      filename: 'stats.html',
    }),
    mkcert(), // HTTPS untuk localhost
  ],
});

// vite.config.ts
export default defineConfig({
  server: {
    port: 3000,
    open: true,
    host: '0.0.0.0', // expose ke network
    https: true,     // HTTPS di dev
    strictPort: true, // error kalau port dipakai
    // HMR config
    hmr: {
      protocol: 'ws',
      host: 'localhost',
      port: 3001,
      clientPort: 3000,
    },
    // Watch options
    watch: {
      ignored: ['**/node_modules/**', '**/dist/**'],
    },
  },
});

// React component dengan HMR (via @vitejs/plugin-react sudah otomatis)
import { useEffect } from 'react';
 
// Vanilla JS HMR
export function setupCounter(element: HTMLButtonElement) {
  let counter = 0;
  const setCounter = (count: number) => {
    counter = count;
    element.innerHTML = `count is ${counter}`;
  };
  element.addEventListener('click', () => setCounter(counter + 1));
  setCounter(0);
}
 
// HMR accept manual
if (import.meta.hot) {
  import.meta.hot.accept((newModule) => {
    console.log('Module updated', newModule);
  });
 
  // Cleanup sebelum dispose
  import.meta.hot.dispose(() => {
    console.log('Module disposed, cleanup resources');
  });
 
  // Persist state across HMR
  const data = import.meta.hot.data;
  data.count ??= 0;
}

// vite.config.ts
export default defineConfig({
  server: {
    proxy: {
      // String shorthand
      '/api': 'http://localhost:8080',
 
      // Dengan options
      '/api': {
        target: '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.url);
          });
        },
      },
 
      // WebSocket proxy
      '/socket.io': {
        target: 'ws://localhost:8080',
        ws: true,
      },
    },
  },
});

# .env
VITE_API_URL=https://api.example.com
VITE_APP_TITLE=My App
 
# .env.development
VITE_API_URL=http://localhost:8080
 
# .env.production
VITE_API_URL=https://api.example.com
 
# .env.staging
VITE_API_URL=https://staging-api.example.com

// Akses di code
console.log(import.meta.env.VITE_API_URL);
console.log(import.meta.env.VITE_APP_TITLE);
 
// TypeScript type safety
// src/vite-env.d.ts
/// <reference types="vite/client" />
 
interface ImportMetaEnv {
  readonly VITE_API_URL: string;
  readonly VITE_APP_TITLE: string;
  readonly VITE_DEBUG: string;
}
 
interface ImportMeta {
  readonly env: ImportMetaEnv;
}

// vite.config.ts
export default defineConfig({
  build: {
    target: 'es2020',        // Target browser JS
    outDir: 'dist',
    sourcemap: 'hidden',     // Source maps tersembunyi
    minify: 'esbuild',       // esbuild (cepat) atau terser (lebih kecil)
    cssCodeSplit: true,      // Split CSS per chunk
    assetsInlineLimit: 4096, // Inline asset < 4KB sebagai base64
    chunkSizeWarningLimit: 500,
    reportCompressedSize: true,
    rollupOptions: {
      input: {
        main: 'index.html',
        admin: 'admin.html',
      },
      output: {
        // Manual chunking
        manualChunks(id) {
          if (id.includes('node_modules')) {
            if (id.includes('react')) return 'react-vendor';
            if (id.includes('lodash')) return 'lodash-vendor';
            return 'vendor';
          }
        },
        // Asset naming
        chunkFileNames: 'assets/js/[name]-[hash].js',
        assetFileNames: 'assets/[ext]/[name]-[hash].[ext]',
        entryFileNames: 'assets/js/[name]-[hash].js',
      },
      // External dependencies (untuk library mode)
      external: ['react', 'react-dom'],
    },
  },
  // Performance hints
  esbuild: {
    drop: ['console', 'debugger'], // Hapus console.log di production
    legalComments: 'none',
  },
});

// Lazy load route
const AdminDashboard = lazy(() => import('./pages/AdminDashboard'));
 
// Prefetch saat idle
const button = document.querySelector('#load-chart');
button?.addEventListener('click', () => {
  import('./chart').then((module) => {
    module.renderChart();
  });
});
 
// Preload critical chunks
const link = document.createElement('link');
link.rel = 'modulepreload';
link.href = '/assets/critical.js';
document.head.appendChild(link);

// vite.config.ts
export default defineConfig({
  optimizeDeps: {
    include: ['lodash-es', 'date-fns'],
    exclude: ['my-local-package'],
    esbuildOptions: {
      target: 'es2020',
      define: {
        global: 'globalThis',
      },
    },
  },
});

// vite.config.ts
import { resolve } from 'path';
import { defineConfig } from 'vite';
import dts from 'vite-plugin-dts';
 
export default defineConfig({
  build: {
    lib: {
      entry: resolve(__dirname, 'src/index.ts'),
      name: 'MyLib',
      fileName: (format) => `my-lib.${format}.js`,
      formats: ['es', 'cjs', 'umd'],
    },
    rollupOptions: {
      external: ['react', 'react-dom'],
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM',
        },
      },
    },
  },
  plugins: [
    dts({
      insertTypesEntry: true,
    }),
  ],
});

// package.json untuk library
{
  "name": "my-lib",
  "version": "1.0.0",
  "type": "module",
  "main": "./dist/my-lib.cjs.js",
  "module": "./dist/my-lib.es.js",
  "types": "./dist/index.d.ts",
  "exports": {
    ".": {
      "import": "./dist/my-lib.es.js",
      "require": "./dist/my-lib.cjs.js",
      "types": "./dist/index.d.ts"
    }
  },
  "files": ["dist"]
}

// vite.config.ts
export default defineConfig({
  server: {
    ssr: {
      external: ['express'], // Pakai saat SSR
    },
  },
  ssr: {
    noExternal: ['my-component-lib'], // Bundle lib ini untuk SSR
  },
});
 
// SSR development dengan middleware
import { createServer } from 'vite';
import express from 'express';
 
async function createApp() {
  const app = express();
  const vite = await createServer({
    server: { middlewareMode: true },
    appType: 'custom',
  });
 
  app.use(vite.middlewares);
 
  app.use('*', async (req, res) => {
    const template = await vite.transformIndexHtml(
      req.originalUrl,
      fs.readFileSync('./index.html', 'utf-8')
    );
    const { render } = await vite.ssrLoadModule('/src/entry-server.tsx');
    const appHtml = await render(req.url);
    const html = template.replace('<!--app-html-->', appHtml);
    res.status(200).set({ 'Content-Type': 'text/html' }).end(html);
  });
 
  app.listen(3000);
}

import type { Plugin, PluginOption } from 'vite';
 
function myPlugin(options: { msg: string }): Plugin {
  return {
    name: 'my-plugin',
    // Hook lifecycle
    config(config, { command }) {
      console.log('Config resolved');
      return {
        // Merge config
      };
    },
    configResolved(resolvedConfig) {
      console.log('Final config', resolvedConfig);
    },
    options(rollupOptions) {
      console.log('Rollup options');
    },
    buildStart() {
      console.log('Build started', options.msg);
    },
    transform(code, id) {
      // Transform source code
      if (id.endsWith('.md')) {
        return convertMarkdownToJs(code);
      }
    },
    transformIndexHtml(html) {
      // Modify index.html
      return html.replace('</head>', '<script>injected</script></head>');
    },
    configureServer(server) {
      // Custom dev server middleware
      server.middlewares.use('/api/custom', (req, res) => {
        res.end(JSON.stringify({ hello: 'world' }));
      });
    },
    load(id) {
      // Virtual modules
      if (id === 'virtual:my-module') {
        return 'export default "hello"';
      }
    },
    buildEnd() {
      console.log('Build finished');
    },
  };
}
 
// Pakai plugin
export default defineConfig({
  plugins: [myPlugin({ msg: 'Hello' })],
});

// vite.config.ts
export default defineConfig({
  css: {
    modules: {
      // Generate class names
      generateScopedName: '[name]__[local]___[hash:base64:5]',
      localsConvention: 'camelCase',
    },
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/variables.scss";`,
      },
      less: {
        javascriptEnabled: true,
      },
    },
    postcss: {
      plugins: [
        // Atau pakai postcss.config.js
      ],
    },
    devSourcemap: true,
  },
});

// CSS Modules
import styles from './button.module.css';
 
export function Button() {
  return `<button class="${styles.btn}">Click</button>`;
}

// Import asset sebagai URL
import imgUrl from './assets/logo.png';
// imgUrl => '/assets/logo.2h3k4j.png'
 
// Import asset sebagai string
import svgString from './icon.svg?raw';
 
// Import sebagai Web Worker
import MyWorker from './worker?worker';
const worker = new MyWorker();
 
// Import dengan inline query
import logo from './logo.png?inline'; // Selalu inline sebagai base64
import wasmUrl from './module.wasm?url';

// package.json
{
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "typecheck": "tsc --noEmit"
  }
}

// tsconfig.json
{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "moduleResolution": "bundler",
    "jsx": "react-jsx",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "types": ["vite/client"]
  },
  "include": ["src"]
}