How to Use Vite: The Beginner's Guide (First Project, Templates, HMR, and the Production Build)

CodexFuse Team · 2026-10-31T03:57:27.257Z · 12 min read

Install Vite free, scaffold your first project, pick the right template, master hot reload, and ship an optimized production build — a beginner's guide to the frontend build tool.

How to use Vite?

This guide teaches you how to use Vite from a completely empty folder: check your Node.js version, scaffold a project with the official wizard, start the dev server, and ship a production build. You use Vite by running npm create vite@latest, answering three prompts, installing dependencies, and developing against a dev server that updates your browser the instant you save. When the app is done, npm run build produces the optimized files you deploy.

1. Check Node.js. Run node -v in your terminal — Vite 8 needs version 20.19 or newer (or 22.12+ on the 22 line). Upgrade first if you are behind; a stale Node is the most common cause of a cryptic scaffold failure.
2. Scaffold. Run npm create vite@latest and answer the prompts: project name, framework, and JavaScript-or-TypeScript variant.
3. Install. Move into the new folder with cd and run npm install.
4. Develop. Run npm run dev and open the printed address, usually http://localhost:5173.
5. Edit and watch. Save any file — the browser updates in place without a reload, and your component state survives.
6. Ship. Run npm run build to generate the production dist/ folder, sanity-check it with npm run preview, then deploy the folder to any static host.

The six steps above are the whole workflow. The rest of this guide explains what each step is actually doing, so nothing feels like magic. If you are new to the JavaScript toolchain entirely, read the Node.js beginner guide first — everything here assumes Node is installed and working.

What is Vite, and why is it so fast?

Vite — pronounced "veet," French for "fast" — is a frontend build tool for modern web projects, created by Evan You, the creator of Vue.js. It does two jobs: it runs a dev server while you work, and it bundles your code for production when you are done.

Its speed comes from what it refuses to do in development: bundle. Traditional bundlers package your entire app into big files before the dev server can even start, so startup time grows with project size. Vite instead serves each source file to the browser as a native ES module, on demand, and lets the browser resolve the imports. Vite's own homepage describes this as "instant server start" through "on demand source file serving over native ESM."

The production side changed with the current major, Vite 8: a single Rust-written bundler called Rolldown now handles both the production bundle and dependency pre-bundling, while Oxc — another Rust tool — handles JavaScript and TypeScript transforms. Older Vite versions split the work between Rollup and esbuild; esbuild is no longer part of Vite at all. Those internals come from Flavio Copes' Vite tutorial, updated September 17, 2026, and the official Vite homepage confirms the production build is "powered by Rolldown."

Which Node.js version does Vite need?

Vite requires Node.js 20.19 or newer — or 22.12 or newer if you are on the 22 release line. Run node -v before you scaffold anything.

The official getting-started guide adds one caveat: some templates need a higher Node version than the floor, so upgrade if your package manager warns you during setup. Thirty seconds here saves a genuinely confusing error later.

How do you scaffold your first Vite project?

You scaffold with the official wizard by running npm create vite@latest in your terminal. It asks for a project name first — it becomes the folder name, and the wizard re-prompts if you type something invalid like a name with spaces — then a framework, then a variant.

The framework menu offers Vanilla, Vue, React, Preact, Lit, Svelte, and Others. The follow-up depends on your pick: Vanilla asks JavaScript or TypeScript; React offers JavaScript, TypeScript, and two "+ React Compiler" variants, then asks which linter you want, Oxlint or ESLint; Svelte offers JavaScript, TypeScript, or a link out to the SvelteKit starter. Those prompt details are from Flavio Copes' September 2026 walkthrough of create-vite 9, the scaffolder version that ships Vite 8.

Not an npm user? The wizard has direct equivalents: yarn create vite, pnpm create vite, bun create vite, and deno init --npm vite — all documented in the official getting-started guide. Open the finished folder in VS Code and move on to the dev server.

Can you skip the prompts?

Yes — pass the project name and template as flags: npm create vite@latest my-app -- --template react scaffolds a React project called "my-app" with no questions. The extra -- hands the flag to the scaffolder instead of npm itself (npm 7 and later need it), and react-ts selects the TypeScript variant. Web Coding Center's October 2026 React walkthrough uses exactly this one-shot form, and notes that npm create vite@latest always fetches the newest scaffolder — so your template may be slightly newer than any screenshot you see online.

Which Vite template should you pick?

Pick the template that matches the app you are actually building, not the one that sounds most impressive. The wrong choice costs an afternoon of deleting code you never needed.

The table above is CodexFuse's own synthesis of the official template list and the September 2026 prompt walkthrough — the official guide lists every template pair (vanilla, vue, react, preact, lit, svelte, solid, qwik, each with a -ts twin) but does not tell you which one to pick. When in doubt, choose react-ts: it is the most documented path on the internet, which matters more to a beginner than any technical edge.

How do you start the dev server, and what is HMR?

Run npm run dev inside your project folder. The terminal answers with something like VITE v8.3.0 ready in 277 ms and a local address — normally http://localhost:5173. Web Coding Center's recorded October 2026 run shows port 5177 instead, because 5173 was already taken on that machine; Vite simply steps to the next free port, so don't panic if your number differs.

Open the address and you get the starter page with a counter button. Now edit src/App.jsx and save: the change appears in the browser with no reload. That is hot module replacement (HMR) — Vite swaps the updated module in place, and your component state survives the update. The official homepage promises HMR "no matter how big your app is," because nothing is re-bundled; only the file you touched is re-served.

If a save ever does wipe your state, you almost certainly edited something outside a component — a module-level variable, for instance. That diagnostic comes from Web Coding Center's walkthrough, and it resolves the most common "HMR ate my state" confusion in seconds.

How is Vite different from Webpack?

The difference is when bundling happens. Webpack bundles your entire app before the dev server starts, so every edit triggers a re-bundle and startup time grows with the project. Vite never bundles during development — it serves native ES modules file by file — and bundles only when you run vite build.

The KritimYantra beginner guide (updated October 16, 2026) puts the trade-off in a table: Webpack's dev speed is slow and its hot reload often laggy with usually-complex config, while Vite is ESM-fast with instant, reliable hot reload and minimal, optional configuration. For most new apps, that comparison now favors Vite — though an existing Webpack project that works is rarely worth migrating for speed alone.

What changed in Vite 8?

Vite 8 replaced the production pipeline while keeping the dev model untouched. The summary below is CodexFuse's synthesis of Flavio Copes' September 2026 tutorial and the official Vite homepage:

The practical upshot for beginners: one bundler to understand instead of two, and faster production builds. The official homepage now describes the optimized build as offering "advanced tree-shaking, built-in minification, fine-grained chunking control powered by Rolldown."

When do you actually need a vite.config.js file?

Almost never at first — and that is the point. Vite's defaults suit most projects, so treat the config file as a "later" topic, not a prerequisite. The official guide calls Vite "opinionated with sensible defaults out of the box."

When you do need it, the shape is small:

import { defineConfig } from 'vite'

export default defineConfig({
  server: { port: 3000 },
  resolve: { alias: { '@': '/src' } },
})

You will reach for config for three reasons: pinning the dev port, adding an import alias such as @ for /src (the KritimYantra guide lists aliases among its pro tips), or registering a plugin. Everything else can wait until the project asks for it.

How do you add images, CSS, and environment variables?

Vite keeps assets in two places with different rules. Files in public/ are copied to the output untouched — use it for robots.txt, favicons, and anything referenced by absolute path. Images your code imports belong in src/assets/: import logo from './assets/logo.png' hands you a hashed URL that Vite rewrites at build time. That split mirrors the project structure Flavio Copes documents: index.html and package.json at the root, a public/ folder, and src/ holding your code.

CSS needs no setup at all: create src/style.css, import it from your entry file, and it works — the KritimYantra guide demonstrates exactly that, and notes that SCSS only needs npm install -D sass plus renaming the file. Your HTML entry is index.html at the project root, not buried in src/, loading your code with <script type="module" src="/src/main.js"> — the first surprise for newcomers, and the official guide calls it intentional.

Per-environment values live in .env files — the KritimYantra guide lists them among its pro tips — but only variables following the documented naming rule are exposed to browser code, so check the current official docs for the exact prefix before trusting a value client-side. When your Vite app calls a backend API, test the endpoints with an API tester before wiring their URLs into your components.

How do you build and preview for production?

Run npm run build. Vite bundles, minifies, and tree-shakes your app into dist/, with hashed filenames so browsers can cache assets indefinitely and invalidate them by hash. Web Coding Center's recorded October 2026 build of a fresh React template transformed 20 modules in 302 ms and emitted a 0.45 kB index.html, 4.10 kB of CSS, and 222.52 kB of JavaScript — most of it React itself, roughly 69 kB over the wire after gzip.

Before you deploy, verify the real thing locally: npm run preview serves the dist/ folder exactly as a static host would. Then deploy a website to Netlify, Vercel, or your own server — dist/ is plain files, so any static host works. Push the project to GitHub first, so every deployed version traces back to a commit.

Sources

Every fact in this article was verified against the pages below on 2026-10-30. Version numbers, timings, and file sizes are the sources' own recorded measurements, not CodexFuse's. The template-chooser and Vite 8 comparison tables are CodexFuse's original synthesis of these sources.

• Flavio Copes — "Vite Tutorial" (updated Sep 17, 2026): Vite 8 is the current major; Node.js 20.19+ / 22.12+ requirement; Rolldown (Rust) replaces Rollup + esbuild; Oxc handles JS/TS transforms; create-vite 9 prompt flow (project name → framework → variant; React +React Compiler variants, Oxlint/ESLint linter choice); project structure (root index.html, public/, src/); dev server at localhost:5173; index.html loads src/main.js via script type=module. https://flaviocopes.com/vite-tutorial/
• Vite official getting-started guide (via docs mirror, fetched Oct 30, 2026): Node.js 20.19+, 22.12+ requirement with the template caveat; scaffold commands for npm/yarn/pnpm/bun/deno; full template list (vanilla, vue, react, preact, lit, svelte, solid, qwik, each with -ts twin); one-shot --template flag syntax; default dev/build/preview npm scripts; default dev URL http://localhost:5173; index.html at project root as the intentional entry point; MIT license. https://vite.dev/guide/
• Vite official homepage — vite.dev (fetched Oct 30, 2026): production build "powered by Rolldown" with "advanced tree-shaking, built-in minification, fine-grained chunking control"; "instant server start" via native ESM; "lightning fast HMR"; 80k+ GitHub stars; 80m+ weekly npm downloads; free and open source. https://vite.dev/
• Web Coding Center — "Creating a Project with Vite" (fetched Oct 30, 2026): Vite v8.3.0; dev server ready in 277 ms; port 5177 when 5173 is taken; one-shot scaffold form; 24 packages installed for the React template; production build of 20 modules in 302 ms (dist/index.html 0.45 kB, CSS 4.10 kB, JS 222.52 kB, gzip 69.26 kB); HMR preserves component state; npm run preview serves dist/; React template linter switched from ESLint to oxlint. https://www.webcodingcenter.com/react/getting-started-with-react--creating-a-project-with-vite.html
• KritimYantra — "The Complete Beginner's Guide to Vite" (updated Oct 16, 2026): React step-by-step example; instant HMR; CSS-out-of-the-box pattern (import style.css, SCSS via npm install -D sass); .env environment variables; @/ alias pro tip; npm run build to dist/ with Netlify/Vercel/static-host deploy targets; npm run preview. https://kritimyantra.com/blogs/the-complete-beginners-guide-to-vite-build-fast-modern-frontends

Frequently Asked Questions

Is Vite better than Webpack?

For new projects, usually yes: Vite starts its dev server without bundling, so startup stays fast no matter how large the app grows, and its hot reload is effectively instant. Webpack remains a fine choice for an existing project that already works — migrating a healthy build purely for speed rarely pays off.

Does Vite work with React?

Yes — React is a first-class template with JavaScript, TypeScript, and "+ React Compiler" variants, plus a choice of Oxlint or ESLint. Flavio Copes describes using Vite as "the new create-react-app," which matches how the ecosystem actually starts React projects in 2026.

What is Vite's default dev port?

Port 5173. If something already occupies it, Vite quietly moves to the next free port — Web Coding Center's recorded run landed on 5177 — so always read the address the terminal prints rather than assuming.

Can I use Vite without a framework?

Yes. The vanilla template gives you plain HTML, CSS, and JavaScript with the same instant dev server and optimized production build. It is the best choice for learning the tool itself or for small widgets embedded in server-rendered pages.

Is Vite free?

Yes. Vite is MIT-licensed and free and open source, maintained by VoidZero with its contributors — the official homepage lists 80k+ GitHub stars and 80m+ weekly npm downloads as of the October 30, 2026 fetch.