npm run dev vs npm run start: what is actually different

If you work with a JavaScript project you have probably seen three commands: npm run dev, npm run build, and npm run start. They all sound like they do the same thing, run your app, so it is easy to reach for one and use it for everything. They are not the same thing, and once you see what each one is for, the difference is simple.

Here is the one idea that makes it click. These commands run your app in two different modes, and those modes exist for two different audiences.

Development mode is built to help you, the person writing the code.

Production mode is built to help the visitor, the person using the finished site.

Everything below comes from that one idea.

First, what does npm run even do?

npm run dev does not mean anything special on its own. It just runs whatever you defined under that name in your package.json:

{
  "scripts": {
    "dev": "...",
    "build": "...",
    "start": "..."
  }
}

So npm run dev literally means: run the command I labelled dev. The names dev, build, and start are just a convention almost everyone follows. There is no magic, only shortcuts that you or your framework wrote down.

npm run dev: the development server

This is the one you use while you are writing code.

npm run dev

What you get:

Hot reload. You save a file and the browser updates almost instantly. No manual refresh.

Helpful errors. When something breaks you get a clear message pointing at the line.

Readable code. The code stays unminified so you can actually debug it.

On demand compiling. It only builds the page you actually visit, when you visit it.

The trade off is that it is slower and not optimised. That is fine. Speed for visitors is not the goal here. Fast feedback for you is the goal. Think of it as your workshop: tools everywhere, good lighting, made for working.

npm run build: make the production version

npm run build

Run this and almost nothing happens in the browser. That is the point. Build does not run your site. It compiles an optimised version of it and saves the result to a folder.

During build your code gets:

Minified. Whitespace and long names are stripped out so the files are smaller.

Tree shaken. Code you never use gets removed.

Bundled and split. Files are combined and then chopped up so the browser downloads only what each page needs.

There is a hidden benefit that is just as important. Build catches errors that dev lets slide: type errors, broken imports, things that only show up when the whole project is compiled at once. This is why running build before you deploy is a good habit. If it builds clean, you have far more confidence. Build is the factory: you do not watch it work, you collect the finished product at the end.

npm run start: serve the production build

npm run start

This serves the optimised version that build produced. Two things to know.

You must run build first. Start serves the output of build. No build, nothing to serve.

No hot reload, no error overlay. This is the real, finished site, exactly what a visitor would get.

Use start when you want to see or measure the real thing locally: real load speed, real behaviour, none of the development helpers softening the picture.

Side by side

npm run dev is development mode: hot reload, not optimised, for writing code.

npm run build compiles the optimised version: no browser view, it just produces the output.

npm run start is production mode: no hot reload, optimised, runs the finished site.

The mental model

Development mode trades speed for feedback. Production mode trades feedback for speed. You spend most of your time in dev because most of your time is spent writing code. You reach for build and start when you want to check or ship the real thing.

A simple workflow:

First, npm run dev while you code.

Then npm run build to confirm it compiles with no errors.

Finally npm run start when you want to see the actual production site.

That is the whole picture. Three commands, two modes, one idea: dev is for you, production is for everyone else.

One caveat: the names can vary

These three names are a strong convention, but the exact words depend on the tool. Some setups use npm run preview instead of npm run start to serve the built site. The concepts are identical no matter the labels: one mode is built for the developer, the other for the visitor. And if you use yarn or pnpm it is just yarn dev or pnpm dev, same idea.