Vite (French for "quick", pronounced "veet") is a tool developers use to run a website on their own computer while building it and then package it into the files that go live. Evan You, who also created Vue, released it in 2020. It became popular because changes appear in the browser almost instantly, even on large projects.
How Vite works during development
Older tools such as webpack bundled the entire app before showing anything, so start-up slowed down as projects grew. Vite's development server instead relies on native ES modules, which modern browsers can load directly. It serves each file on request from localhost, converting TypeScript and JSX on the fly, and pre-bundles third-party packages from npm once using the fast esbuild tool.
When you save a file, hot module replacement swaps only that module in the open page. A form you were halfway through filling in keeps its state while the styling updates.
How Vite builds for production
For launch, vite build creates an optimised bundle: code is split into chunks, minified, and given hashed file names so browsers can cache them safely for a long time. The output is a folder of static HTML, CSS and JavaScript that any host or CDN can serve. Recent versions are moving their bundling to Rolldown, a Rust-based bundler, for speed.
An example: editing a landing page live
A developer is adjusting the headline on a dog groomer's React landing page. They run npm run dev, open the local address, and every save shows the new text in under a second without reloading. When the owner approves it, npm run build produces a dist folder that is uploaded during deployment.
Does an owner need to know about Vite?
Visitors never see it, so in daily terms you can ignore it. It becomes relevant if you export your site's code or hire a developer: the project's package.json will list commands like dev and build, and knowing that Vite turns the source into the live files explains what those commands do. Projects generated by We.Inc use Vite alongside React, TypeScript and Tailwind CSS.
Common Vite mistakes
- Uploading the source folder instead of
dist. Hosts need the built files, not the raw project. - Exposing secrets through environment variables. Variables prefixed
VITE_are baked into public code that anyone can read. - Wrong base path. Serving from a subfolder without setting
basebreaks every asset link. - Testing only in dev mode. Always preview the production build, since bundling can surface issues dev mode hides.
Related terms
- npm: installs Vite and runs its commands.
- Node.js: the runtime Vite itself runs on.
- TypeScript: compiled by Vite on the fly.
- Deployment: where the built output goes next.