{"post":{"slug":"how-to-configure-vite-2026","title":"How to configure Vite in 2026","excerpt":"Vite 6 is the build tool of choice for modern JavaScript projects. This guide covers the configuration options that matter — aliases, env vars, proxies, plugins, and production tuning.","category":"code","date":"April 14, 2026","author":"ByteLedger Team","content":"<span class=\"dropcap\">V</span>ite 6 ships with sensible defaults that cover most projects with near-zero config. But the real power comes from knowing which knobs exist and which ones are actually worth turning. This guide covers the configuration options you will reach for on real projects — not a dump of every option, but the ones that matter.\n\n## What changed in 2026\n\n- **Vite 6** introduced the Environment API, giving first-class support for multiple render environments (client, SSR, Edge) in a single config.\n- **Rollup 4** (the default bundler) brought faster native builds via the `@rollup/wasm-node` package — no Node.js plugin compilation step.\n- **`optimizeDeps`** is now smarter about pre-bundling — false positives in dev are rare, and you rarely need to override it manually.\n- **`@vitejs/plugin-react`** switched to the automatic JSX runtime by default; you no longer import React in every file.\n- **Lightning CSS** became the recommended CSS transformer, replacing PostCSS for most projects.\n\n## Basic structure\n\n```ts\n// vite.config.ts\nimport { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\nimport { resolve } from 'path'\n\nexport default defineConfig({\n  plugins: [react()],\n  resolve: {\n    alias: { '@': resolve(__dirname, 'src') },\n  },\n})\n```\n\n## Path aliases\n\nThe most common config addition. Once set, import from `@/components/Button` instead of `../../components/Button`.\n\n```ts\nresolve: {\n  alias: {\n    '@': resolve(__dirname, 'src'),\n    '@assets': resolve(__dirname, 'src/assets'),\n    '@lib': resolve(__dirname, 'src/lib'),\n  },\n},\n```\n\nAlso update `tsconfig.json` so TypeScript agrees:\n\n```json\n{\n  \"compilerOptions\": {\n    \"paths\": {\n      \"@/*\": [\"./src/*\"],\n      \"@assets/*\": [\"./src/assets/*\"]\n    }\n  }\n}\n```\n\n## Environment variables\n\n```ts\n// .env.local\nVITE_API_URL=http://localhost:3000\nDATABASE_URL=postgres://...   # NOT exposed to the browser\n```\n\nAccess in code:\n\n```ts\nconst apiUrl = import.meta.env.VITE_API_URL\nconst isProd = import.meta.env.PROD\n```\n\nUse `envPrefix` in config to change the prefix from `VITE_`:\n\n```ts\nenvPrefix: 'APP_', // now APP_API_URL is exposed, not VITE_API_URL\n```\n\n## Dev server proxy\n\nAvoids CORS issues during development by forwarding `/api` requests to your backend:\n\n```ts\nserver: {\n  port: 5173,\n  proxy: {\n    '/api': {\n      target: 'http://localhost:3000',\n      changeOrigin: true,\n      rewrite: path => path.replace(/^\\/api/, ''),\n    },\n  },\n},\n```\n\n## Build configuration\n\n```ts\nbuild: {\n  target: 'es2022',          // modern browsers only in 2026\n  sourcemap: true,\n  minify: 'esbuild',         // default, fast\n  rollupOptions: {\n    output: {\n      manualChunks: {\n        vendor: ['react', 'react-dom'],\n        router: ['react-router-dom'],\n      },\n    },\n  },\n},\n```\n\n## Common config options table\n\n| Option | Default | Change when |\n| --- | --- | --- |\n| `server.port` | 5173 | Port conflict |\n| `server.open` | false | Auto-open browser on dev start |\n| `build.target` | `modules` | Need specific browser compat |\n| `build.outDir` | `dist` | Different deploy convention |\n| `build.sourcemap` | false | Need production debugging |\n| `base` | `/` | Deploying to a sub-path |\n| `preview.port` | 4173 | Preview server port |\n\n## Useful plugins in 2026\n\n| Plugin | Purpose |\n| --- | --- |\n| `@vitejs/plugin-react` | React fast refresh + JSX |\n| `vite-plugin-svgr` | Import SVGs as React components |\n| `unplugin-icons` | On-demand icon imports |\n| `vite-bundle-visualizer` | Interactive bundle size chart |\n| `vite-plugin-pwa` | PWA manifest + service worker |\n\n## How to pick build targets\n\n| Audience | `build.target` |\n| --- | --- |\n| Modern evergreen only | `es2022` or `esnext` |\n| Enterprise with older Edge | `es2019` |\n| Need broad support | `['es2015', 'chrome58', 'safari11']` |\n\n## Common mistakes\n\n**Forgetting `tsconfig.json` `paths`** — you set the alias in Vite but TypeScript still complains. Both files need the alias entry.\n\n**Hard-coding `localhost` in code instead of env vars** — any URL that changes per environment belongs in `.env.*` files.\n\n**Over-splitting chunks** — `manualChunks` with too many entries creates too many HTTP requests. 2–4 chunks (vendor, router, app) is usually optimal.\n\n**Using `NODE_ENV` directly** — in Vite, use `import.meta.env.MODE` and `import.meta.env.PROD`/`DEV` instead of `process.env.NODE_ENV`.\n\n## What to skip\n\n- **Custom PostCSS pipeline** unless you have a specific plugin requirement — Lightning CSS handles nesting, prefixing, and minification faster.\n- **`vite-plugin-legacy`** for modern projects — the polyfill weight is not worth it if your users are on modern browsers (which most are in 2026).\n- **Ejecting to a custom Rollup config** — `build.rollupOptions` gives you all the control you need without leaving the Vite abstraction.\n\n## FAQ\n\n**Can Vite build library packages?**\nYes. Set `build.lib` with an entry point, and Vite outputs ESM and CJS with correct external declarations. Most component library authors use this.\n\n**How do I add absolute imports without TypeScript?**\nSet `resolve.alias` in the Vite config only. TypeScript `paths` is needed for type-checking, not for the actual build.\n\n**Does Vite support multi-page apps?**\nYes — set `build.rollupOptions.input` to an object mapping page names to HTML file paths, and Vite builds all of them.\n\n**What replaces `create-react-app` in 2026?**\n`npm create vite@latest` is the standard answer. It scaffolds React, Vue, Svelte, Solid, and Vanilla with TypeScript support in under a minute.\n\n## Where to go next\n\n- [How to set up Vitest in 2026](/blog/how-to-set-up-vitest-2026)\n- [How to set up Storybook in 2026](/blog/how-to-set-up-storybook-2026)\n- [How to optimize images for the web in 2026](/blog/how-to-optimize-images-for-web-2026)","hue":318,"metaTitle":"How to Configure Vite in 2026: A Practical Guide","metaDescription":"Practical 2026 Vite configuration guide. Path aliases, env vars, dev proxy, plugins, build optimisation, and common config patterns with real examples.","keywords":["how to configure vite 2026","vite configuration guide 2026","vite config typescript","vite path aliases","vite env variables","vite proxy setup","vite build optimisation 2026","vite plugins guide","vite rollup options","vite 6 setup"],"tldr":["**`vite.config.ts` is a TypeScript file** — you get full type safety and IDE autocomplete for every option.","**Path aliases** (`@/` → `src/`) clean up import paths and are the single most-used config option.","**`envPrefix`** controls which `VITE_` variables are exposed to the browser bundle — anything without the prefix stays server-only.","**`build.rollupOptions`** gives you fine-grained control over chunk splitting, externals, and output naming.","**Skip:** ejecting to Webpack for one missing plugin — almost everything Webpack does has a Vite or Rollup plugin equivalent in 2026."],"readTime":"4 min read","wordCount":840},"related":[{"slug":"how-to-set-up-eslint-2026","title":"How to set up ESLint in 2026: flat config, TypeScript, and team rules","excerpt":"ESLint moved to flat config in 2024 and it is now the universal standard. This is the 2026 guide to a fast, effective ESLint setup for TypeScript projects.","category":"code","date":"April 3, 2026","author":"ByteLedger Team","readTime":"4 min read","hue":322},{"slug":"how-to-set-up-storybook-2026","title":"How to set up Storybook in 2026","excerpt":"Storybook 8 is faster, Vite-native, and ships a built-in test runner. This guide covers installation, story writing, interaction testing, and plugging Storybook into CI.","category":"code","date":"April 3, 2026","author":"ByteLedger Team","readTime":"4 min read","hue":317},{"slug":"how-to-set-up-vitest-2026","title":"How to set up Vitest in 2026","excerpt":"Vitest is the default unit-test runner for Vite-based projects in 2026 — fast, zero-config, and Jest-compatible. This guide wires it up from scratch to CI-ready in minutes.","category":"code","date":"February 27, 2026","author":"ByteLedger Team","readTime":"4 min read","hue":315}],"sameCategory":[{"slug":"bazel-build-explained-2026","title":"Bazel Explained: What Hermetic Builds Actually Cost","excerpt":"Bazel delivers reproducible, precisely cached builds and demands that you describe everything. Here is what you get, what it costs, and who should say no.","category":"code","date":"August 19, 2026","author":"ByteLedger Team","readTime":"3 min read","hue":145},{"slug":"graphql-federation-2026","title":"GraphQL Federation: One Graph, Many Teams","excerpt":"Federation composes independently-owned subgraphs into a single API. Here is what it solves, the operational cost it adds, and when a simpler gateway is enough.","category":"code","date":"August 19, 2026","author":"ByteLedger Team","readTime":"3 min read","hue":300},{"slug":"hermetic-builds-explained-2026","title":"Hermetic Builds Explained: Same Inputs, Same Output","excerpt":"A hermetic build depends only on declared inputs. Here is what that property gives you, the common leaks that break it, and how to move toward it incrementally.","category":"code","date":"August 19, 2026","author":"ByteLedger Team","readTime":"3 min read","hue":130},{"slug":"monorepo-tooling-compared-2026","title":"Monorepo Tooling Compared: What You Actually Need","excerpt":"Monorepo tools solve task orchestration and caching, not repository layout. Here is what each tier provides and how to tell when you have outgrown the simple option.","category":"code","date":"August 19, 2026","author":"ByteLedger Team","readTime":"3 min read","hue":150}],"newer":{"slug":"how-to-clean-window-tracks-2026","title":"How to clean window tracks in 2026: remove grime, mould, and debris fast","excerpt":"Window tracks collect years of dust, dead insects, and mould silently. Here is the fastest way to clean them thoroughly in 2026 without removing the window.","category":"guides","date":"April 14, 2026","author":"ByteLedger Team","readTime":"4 min read","hue":110},"older":{"slug":"how-to-containerize-an-app-2026","title":"How to containerize an app in 2026: Docker, layers, and production-ready images","excerpt":"Containerizing an app is now a baseline skill for every backend developer. This guide covers Dockerfiles, multi-stage builds, and production best practices.","category":"code","date":"April 14, 2026","author":"ByteLedger Team","readTime":"4 min read","hue":310}}