Vite quickstart: 5-minute local dev environment
The shortest path to getting Vite running — a minimal starting point for first-time users.
Quick answer
How do I keep Vite and Rollup versions aligned?
Vite bundles a specific Rollup major version. Do not bump Rollup independently when upgrading Vite, or manualChunks behavior and the resulting split will drift.
Machine-readable page data: /data/vite-quickstart.json
In-depth analysis
Vite's native-ESM dev server and Rollup-based production bundling set the baseline for modern frontend build performance and developer experience. The fastest path to a win is one command to scaffold, start dev, edit a line, and see hot reload.
// vite.config.ts — production build, deep optimization
import { defineConfig } from 'vite';
export default defineConfig({
build: {
target: 'es2022',
cssCodeSplit: true,
rollupOptions: {
output: { manualChunks: { vendor: ['vue', 'react'] } },
},
},
});Vite Quickstart · Key takeaways
- Node ≥ 20.19 and pnpm ready
- Official scaffold initialized
- Dev hot reload works
- First local page reached
FAQ & pitfalls
What breaks when Vite manualChunks is misconfigured?
Misconfiguration can pull CSS into JS or create circular dependencies, growing the first-paint bundle. Start with a coarse vendor split, then refine.
Explore the hub
See all 5 guides in ArchitectureSame category as this article, sorted across the codebase.
AI Search quickstart: 5-minute local dev environment
The shortest path to getting AI Search running — a minimal starting point for first-time users.
Astro pSEO at scale: architecture and hands-on guide
From zero to a self-generating long-tail landing page architecture using Astro plus structured data.
Astro quickstart: 5-minute local dev environment
The shortest path to getting Astro running — a minimal starting point for first-time users.
Cloudflare Pages quickstart: 5-minute local dev environment
The shortest path to getting Cloudflare Pages running — a minimal starting point for first-time users.
Share & save
What readers are asking
Questions that keep coming back in reader feedback, already answered.
- 01
What goes wrong when Vite manualChunks is misconfigured?
A wrong split pushes styles into the JS bundle or creates circular dependencies, and first-paint size goes up instead of down. Start with a coarse vendor split, then refine it.
See the full guide → - 02
Why is my Astro component's interactivity not working?
Components ship as zero-JS HTML by default, so an interactive one needs a client:* directive (client:load, client:visible, …). Without it the script is never bundled into the page.
See the full guide → - 03
Why is my custom Tailwind v4 brand colour not applied?
Colours must be declared in @theme (for example --color-brand). A missing @tailwindcss/vite plugin, or a leftover v3 config, makes bg-brand silently render nothing.
See the full guide →