What Is Vite? The Build Tool Behind Lovable and Bolt Apps, Explained

If you exported an app from Lovable or Bolt, or created a React project recently, you'll find a file called vite.config.ts and commands like npm run dev. That's Vite (pronounced "veet", French for "quick"). You rarely touch it directly, but understanding what it does explains a lot of deployment confusion.

The short version

Vite is a build tool for websites. It does two jobs:

1. During development (npm run dev), it runs a local server that shows your app and updates the page instantly when you save a file.
2. For production (npm run build), it bundles all your code into a small set of optimised files ready to put on the internet.

It's not a framework like React — it's the machinery that runs and packages a React (or Vue, Svelte, plain JavaScript) app. (What's a framework?)

Why a build tool is needed at all

Modern apps are written in a form browsers can't use directly: TypeScript, JSX, hundreds of separate files, packages from node_modules. A build tool translates all that into plain JavaScript, CSS and HTML a browser understands — and compresses it so it downloads fast.

npm run dev: the development server

npm run dev

Vite starts a server, usually at http://localhost:5173. (What is localhost?) Edit a file and the change appears in the browser in a fraction of a second, often without losing what's on screen. That's called hot module replacement.

The dev server is for you, on your machine. It's not meant to serve real visitors.

npm run build: the production bundle

npm run build

Vite produces a folder called dist/ containing:

• an index.html,
• JavaScript and CSS files with hashed names like index-3f9a2c.js,
• your images and other assets.

That folder is the entire app as far as the browser is concerned. You can preview it locally with npm run preview.

Since Vite 8 (released March 2026), production builds use Rolldown, a new bundler written in Rust, which made large builds dramatically faster. Older projects on Vite 5–7 work the same way from your point of view.

Deploying a Vite app

Because dist/ is just static files, a plain Vite + React app can be hosted on any static host or behind any web server. Two classic gotchas:

1. Refreshing a page gives a 404

A single-page app has one real file, index.html. If a visitor refreshes /settings, the server looks for a file called settings, finds nothing, and returns 404. The fix is to tell the server to serve index.html for unknown paths. See 404 on page refresh.

2. A blank page after deploy

Often caused by wrong asset paths (the base setting) or a JavaScript error. See why your React app shows a blank page after deploying.

VITE_ environment variables are public

This catches many people out. In a Vite app, environment variables starting with VITE_ are copied into the JavaScript bundle at build time:

VITE_SUPABASE_URL=https://xyz.supabase.co      # fine — public by design
VITE_OPENAI_API_KEY=sk-...                      # leaked to every visitor

Anything in the bundle can be read by anyone who opens your site. Secret keys must stay on a server. Variables without the VITE_ prefix aren't exposed to your frontend code at all. See how to keep API keys out of an AI-built app.

Also note: because they're baked in at build time, changing a VITE_ variable on your host does nothing until you rebuild.

Vite vs Next.js

Vite builds the frontend. A Vite + React app has no server of its own — if it needs a database or secret keys, it talks to a separate backend (Supabase, an API you run). Next.js is a framework that includes both a frontend and a server. If your app needs server-side logic, that difference matters for where and how you deploy it.

The summary

• Vite runs your app during development and bundles it for production.
• npm run dev is for you; npm run build produces a dist/ folder of static files.
• Single-page apps need the server to fall back to index.html.
• VITE_ variables are public and baked in at build time — never put secrets in them.

---

EasySpawn serves your built app on your own domain with automatic SSL, and runs a backend and database beside it for the parts that must stay secret — so a Vite app can grow a real server when it needs one. See how it works or join the waitlist.

Related: How to Deploy a Bolt.new App · What Is React? · What Are npm and package.json? · Static vs Dynamic Websites · React State Management