What Actually Happens When You Run `npm run dev` in a Vite Project?

When I first started learning React, I just typed npm run dev and boom! the browser opened with my app running.

But honestly, for the first few months, I had no clue what was happening behind the curtain. Now, having worked with React for a while(and using Vite a lot), here what’s really going on and explained in the way I wish someone had told me when I was newer.

1. npm run dev Just Runs a Script

In every Vite project, you'll find a package.json file. Inside it, there's a "scripts" section:

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

• When you type npm run dev, npm finds the "dev" script ("vite" in this case) and runs it for you.

• So, npm run dev is just shorthand for running vite directly in your terminal!

• If you want, you can also use npx vite to launch the server.

2. Vite Starts a Super Fast Dev Server

• Vite instantly spins up a dev server (usually at http://localhost:5173).

• It watches your files, making sure your browser always shows the latest version.

• As soon as you save, Vite transforms your code so your browser understands it (including JSX and TypeScript).

As you might know, browsers can only understand HTML, CSS, and JavaScript. They can’t run things like JSX. That’s why our code needs to be converted into browser-friendly JavaScript.
Tools like Create React App (CRA) use Babel to turn JSX into regular JavaScript.

3. Does Vite Use Babel? (Not Really)

• If you’ve tried Create React App (CRA) or Webpack, you know they use Babel to handle modern JavaScript and JSX.

• Vite skips Babel by default - instead, it uses something called esbuild.

  • esbuild is crazy fast (like, 100x faster than Babel), because it’s written in Go.

  • It takes care of JSX, TypeScript, and modern JS syntax.

4. Vite Serves Files On-Demand

• Tools like CRA/Webpack have to bundle everything before they even start the server. That’s slooow.

• Vite only processes files when your browser actually requests them.

• Dependencies (like React) get pre-bundled so they’re ready to go.

• Result: No big upfront bundle. The app loads super fast, and you only process what you actually need.

That’s why when you run npm run dev, your app is ready in seconds.

5. Instant Hot Module Replacement (HMR)

• When you edit a file, Vite sees the change immediately.

• It only reloads the specific module you changed and your app updates instantly, and you don’t lose your state.

• Traditional tools would refresh the entire page (and you’d lose anything you typed in an input form). Vite skips that pain.

So, it’s not just that “Vite is new”. It is fast because it doesn’t waste time bundling everything right away and uses way more efficient tooling.

Quick Recap for Fellow Learners

Every time you hit npm run dev in a Vite project:

• npm finds the "dev" script in your package.json

• It launches the Vite command-line tool

• Vite starts a fast dev server at localhost:5173

• It preps dependencies with esbuild (not Babel)

• You get instant on-demand modules via ES modules

• Any change you make triggers instant HMR

Not so magical anymore, right? 😉