Guides / Concepts explained

What Is Vite? A Plain-English Guide for App Builders

Vite is the tool that runs a web app while you build it and packages it for launch. What it does, why AI builders use it, and what npm run dev and build mean.

Mythex Team · 2026-09-29 · 5 min read

Vite (pronounced "veet", French for "quick") is a build tool for websites and web apps. While you're building, it runs a development server that shows your changes in the browser almost instantly. When you're ready to launch, it packages your code into small, optimised files that any web host can serve. It's free, open source and the default tool behind many React, Vue and Svelte projects.

Why Vite matters when you build with AI

You may never type a Vite command, but if your app was built with an AI app builder, Vite is probably running it. Mythex starts new projects on Vite + React + TypeScript + Tailwind unless you ask for something else (how the tech is chosen).

Knowing what Vite does helps you:

• Understand the Preview. The live preview that updates as the AI edits files is typically a Vite development server.
• Understand deployment. A Vite app becomes a folder of static files — HTML, JavaScript, CSS and images — which is cheap and simple to host.
• Read error messages. When the preview shows a red error overlay or a blank page, it's often Vite reporting that a file failed to compile.
• Know its limits. Vite builds the frontend. If your app needs a backend — a database, secret API keys, payments — that runs somewhere else. See frontend vs backend.

An everyday analogy

Think of a restaurant kitchen.

• During service prep (development), the chef tastes and adjusts each dish as they go. Change the seasoning, taste it again a second later. That's Vite's dev server: you change a file, the page updates straight away, often without even losing what you'd typed into a form.
• For a catering order (production), everything is cooked, portioned, packed and labelled so it travels well and can be served anywhere. That's vite build: your code gets bundled, shrunk and fingerprinted into files ready for any host.

Same recipes, two very different ways of handling them — and Vite does both.

What Vite actually does

A modern web app is made of many files: components, styles, images and third-party libraries. Browsers can't use all of that as written. TypeScript has to become JavaScript, React's JSX has to be transformed, and Tailwind classes have to be turned into CSS.

Vite handles this in two modes:

Older tools bundled the whole app before showing anything, so starting and updating a large project could take a long time. Vite's trick is to skip that during development and let the browser load files as needed. For production, it still bundles — as of Vite 8, with a bundler called Rolldown — because many small files are slower for visitors than a few optimised ones.

A worked example: what's inside a Vite project

Here is roughly what a small Vite + React app looks like:

my-app/
  index.html          ← the one HTML page the app starts from
  package.json        ← list of libraries and scripts (dev, build)
  vite.config.ts      ← Vite settings and plugins
  src/
    main.tsx          ← starts React and mounts it into index.html
    App.tsx           ← your app's top-level component
    index.css         ← styles, e.g. @import "tailwindcss";
  public/             ← files copied as-is (favicon, robots.txt)

And the scripts in package.json:

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

Now follow a single change:

1. You ask the AI to "make the heading blue".
2. It edits a class in App.tsx.
3. Vite notices the file changed, transforms just that file and pushes the update to the browser.
4. The heading turns blue in the preview, usually within a second.

When you publish, vite build produces something like dist/index.html plus dist/assets/index-a1b2c3.js. That random-looking part of the file name changes whenever the content changes, so browsers and CDNs can cache files for a long time without serving stale code.

Environment variables in Vite

Vite only exposes variables whose names start with VITE_ to browser code, for example VITE_PUBLIC_MAP_ID. That's a safety measure: anything in browser code can be seen by visitors, so secret keys must never have that prefix and must stay on a backend. See environment variables and secrets.

Key terms

Common misconceptions

• "Vite is a framework." It's a build tool. React, Vue or Svelte is the framework; Vite runs and packages it.
• "A Vite app includes a backend." A standard Vite app is frontend only. Databases, logins and secret keys need a server or API alongside it.
• "The dev server is fine to put online." It isn't meant for real traffic. Always deploy the output of the production build.
• "Anything in .env is secret." In a Vite app, VITE_ variables are baked into the files every visitor downloads.
• "Refreshing a page that gives a 404 means the app is broken." In a single-page app, the host must send every route back to index.html. It's a hosting setting — see how to fix 404 errors after deploying.

What to ask your AI builder

• "Is this app Vite-only (frontend), or does it have a backend too? Where does each part run?"
• "Run the production build and fix any errors or warnings before I publish."
• "Check that no secret keys are in VITE_ variables or anywhere in frontend code."
• "The preview shows a blank page — check the Vite and browser console errors and fix the cause." See how to fix a blank white page.
• "Make sure refreshing any page URL works after publishing, not just the home page."

Vite in Mythex

Every new Mythex project starts on Vite unless you ask for Next.js, static HTML or a different backend. The live Preview in your private sandbox updates as the agent edits files, and Publish builds the app and deploys it — there's no hosting to set up yourself. If you later need an API or a database, ask in chat and Mythex can add a backend service alongside the Vite front end (multi-service apps).