Internet & ToolsEvery modern web project uses code written by other people, date formatting, HTTPWhat is http?The protocol browsers and servers use to exchange web pages, API data, and other resources, defining how requests and responses are formatted. requests, UI components, encryptionWhat is encryption?Scrambling data so only someone with the right key can read it, protecting information from being intercepted or stolen.. Without a tool to manage all of that, you would spend more time downloading and updating libraries than actually building your app. That is the problem package managers solve.
The manual alternative (and why it fails)
Before package managers, developers downloaded library files from websites and dropped them into their project folders. If Library A depended on Library B version 2.3, you had to figure that out yourself, download it, and hope nothing conflicted with Library C.
Manual workflow for 3 libraries:
1. Visit react.dev → download react.js
2. Visit lodash.com → download lodash.js
3. Visit axios-http.com → download axios.js
4. Discover React needs "scheduler" → download that too
5. A security fix is released → repeat everythingA typical React app has 800+ packages in its dependencyWhat is dependency?A piece of code written by someone else that your project needs to work. Think of it as a building block you import instead of writing yourself. tree. The manual approach is not just painful, it is genuinely impossible at that scale.
What npm does for you
npm is like an App Store for code. You tell it what you need, and it downloads the package plus every sub-dependencyWhat is dependency?A piece of code written by someone else that your project needs to work. Think of it as a building block you import instead of writing yourself., resolves version conflicts, and records exactly what was installed so your teammates get the same setup.
# Install a single package
npm install axios
# Install multiple packages at once
npm install react react-dom
# Install a tool only needed during development
npm install --save-dev typescript
# Install everything listed in package.json (after cloning a repo)
npm installEvery install command updates two files automatically: package.json (your declared dependencies) and package-lock.json (the exact resolved versions).
Where packages live
When you run npm install, packages land in a node_modules folder at the root of your project:
my-project/
├── node_modules/ ← all installed package code
│ ├── react/
│ ├── axios/
│ ├── lodash/
│ └── ... (hundreds more)
├── package.json ← what you declared you need
└── package-lock.json ← exact resolved versionsThis folder is excluded from Git via .gitignore. Anyone cloning your repo runs npm install and gets the same packages, that is the entire point.
CDNWhat is cdn?Content Delivery Network - a network of servers around the world that caches your files and serves them from the location closest to the user, making pages load faster. links vs npm packages
You can load libraries via <script> tags from a CDN, and that works for quick experiments. But for real projects, npm packages win on every metric that matters:
| Feature | CDN <script> tag | npm package |
|---|---|---|
| TypeScript types included | No | Yes (usually) |
| Tree shaking (remove unused code) | No | Yes |
| Offline development | No | Yes |
| Version pinning | Fragile, CDN can change | Exact via lockfile |
| Works with build tools (Vite, Webpack) | Limited | Full support |
| Automatic sub-dependency resolution | No | Yes |
moment, dayjs, AND date-fns for date formatting, you only need one. Always check if a newly suggested package overlaps with something you already have.npm alternatives
npm is not the only package manager. Two popular alternatives exist, and AI tools sometimes generate commands for the wrong one:
| Manager | Install command | Lockfile | Key difference |
|---|---|---|---|
| npm | npm install | package-lock.json | Ships with Node.js, most widely used |
| yarn | yarn add | yarn.lock | Faster installs via caching |
| pnpm | pnpm add | pnpm-lock.yaml | Saves disk space by sharing packages |
All three use the same package.json format and the same npm registryWhat is registry?A server that stores and distributes packages or container images - npm registry for JavaScript packages, Docker Hub for container images.. The differences are in speed, disk usage, and lockfileWhat is lockfile?An auto-generated file (like package-lock.json) that records the exact version of every installed package so every environment gets identical code. format. If you see a project with a yarn.lock, use yarn commands. If you see pnpm-lock.yaml, use pnpm. Otherwise, npm is the safe default.
Your first npm commands
These five commands cover 95% of what you will do day to day:
# Check that Node.js and npm are installed
node -v # e.g., v20.11.0
npm -v # e.g., 10.2.4
# Create a new project (generates package.json)
npm init -y
# Install a production dependency
npm install react
# Install a dev-only dependency
npm install --save-dev eslint
# Run a script defined in package.json
npm run devQuick reference
| Command | What it does |
|---|---|
npm init -y | Create a new package.json with defaults |
npm install <pkg> | Install a production dependency |
npm install -D <pkg> | Install a dev-only dependency |
npm install | Install everything listed in package.json |
npm update | Update packages to latest compatible versions |
npm run <script> | Run a script defined in package.json |
npm ls | Show installed packages as a tree |
npm outdated | List packages with newer versions available |
// package.json, the manifest of your project
{
"name": "my-awesome-app",
"version": "1.0.0",
"description": "A great web application",
"main": "index.js",
"scripts": {
"start": "node index.js",
"dev": "vite",
"build": "vite build",
"test": "jest"
},
"dependencies": {
"react": "^18.2.0",
"axios": "^1.6.0"
},
"devDependencies": {
"jest": "^29.0.0",
"typescript": "^5.3.0"
}
}