Stop 17 · Build ToolsTopics · 7/9

NPM

Part of the Frontend Developer Roadmap

In short

Every JavaScript project you clone starts with npm install. Knowing what package.json and the lock file actually do saves you from the classic "works on my machine" fight.

Node Package Manager — the default package manager for Node.js, used to install, publish and manage JavaScript dependencies via `package.json`.

The jaadu holds a shopping list and a long receipt at a kirana store counter.

Think of it like this

Your kirana store list

package.json is the list you give the shopkeeper: "Amul butter, any recent pack". package-lock.json is the bill that records the exact pack, batch and price you got. Next month, show the bill and you get the same thing again.

Watch it happen

What npm install really does

You
npm
Registry
Lock file

npm install axios

1/6You ask npm to add axios to your project.

The big ideas

What you need to know

package.json is the recipe

It lists your dependencies, devDependencies and scripts like dev, build and test.

The lock file pins versions

package-lock.json records the exact version of every package, including dependencies of dependencies.

^ and ~ in versions

^1.4.0 allows any 1.x from 1.4.0 up. ~1.4.0 allows only 1.4.x patch updates.

npx runs without installing

npx runs a package's command, using the local copy if you have one, or downloading it temporarily.

See it in code

Walk through the code

bash
1npm install react               # add to dependencies2npm install -D typescript       # add to devDependencies3npm run build                   # run the "build" script4npm outdated                    # see which packages have updates5 6# In CI: clean install that follows the lock file exactly7npm ci

1/4Add a runtime dependency, then a dev-only tool with -D.

npm ci deletes node_modules and installs exactly what package-lock.json says. If package.json and the lock file disagree, it fails instead of guessing.

Save yourself the pain

Common mistakes

Oops

Deleting package-lock.json whenever an install fails.

Do this instead

Keep and commit the lock file. Fix the actual conflict, because deleting it can silently upgrade dozens of packages.

Oops

Putting build tools like typescript or eslint under dependencies.

Do this instead

Use -D for tools only needed while developing or building. Keep dependencies for code that runs in your app.

Your mission

Read your own package.json

~15 min

Quick check

Your package.json says "axios": "^1.6.0". Which version could npm install?

Go deeper

  1. 1Read through a real project's `package.json` and understand every field.
  2. 2Learn `npm install`, `npm ci`, and the difference between `dependencies` and `devDependencies`.
  3. 3Understand semantic versioning (`^`, `~`) and what `package-lock.json` locks down.

More topics at this stop

Stuck on this topic? Ask an Insider

Get 1:1 guidance from people who've walked this exact path — on the InsideEdge app.

Download
InsideEdge