๐Ÿ”’ Members-only lesson โ€” thanks for supporting devnotes
← back to course
progress is saved in this browser โ€” no account needed
devnotes / Developer Tools / Lesson 5
lesson 5 of 6 ยท premium

Package Managers: Installing Code Others Wrote

18 min ยท Developer Tools

Almost nothing is built entirely from scratch anymore. Package managers let you install and reuse code other developers already wrote and tested โ€” this is how a project can go from an empty folder to a working app using tools built by thousands of other people.

What npm actually is

npm (Node Package Manager) is the tool that installs, updates, and manages external code libraries โ€” called packages or dependencies โ€” for JavaScript projects. It comes bundled with Node.js, so if you can run node -v in your terminal, you already have npm too.

Starting a new project

$ npm init -y

This creates a package.json file โ€” the "ID card" of your project. It lists the project's name, version, and every dependency it needs. The -y flag skips the interactive questions and accepts sensible defaults.

Installing a package

$ npm install lodash # downloads the "lodash" utility library and adds it to your project

This does three things: downloads the package into a folder called node_modules, adds it to your package.json's dependency list, and creates/updates a package-lock.json file that locks the exact versions used.

why node_modules is so huge
Most packages depend on other packages, which depend on more packages. Installing one library can pull in dozens of others behind the scenes โ€” this is completely normal, and exactly why that folder can reach hundreds of megabytes even for a small project.
AD SLOT โ€” 728ร—90 or responsive (mid-lesson)

Dependencies vs. devDependencies

TypeCommandUsed for
Regular dependencynpm install package-nameCode your app actually needs to run
Dev dependencynpm install -D package-nameTools only needed while building โ€” testing frameworks, formatters

This distinction matters when you deploy a project โ€” dev dependencies (like testing tools) don't need to ship with your live app, only the regular ones do.

Never commit node_modules

# .gitignore node_modules/

Remember .gitignore from Lesson 2? This is exactly why it exists. node_modules should never be pushed to GitHub โ€” it's huge, and it's fully reproducible from package.json by anyone who runs npm install. Committing it is one of the most common beginner mistakes.

Reinstalling everything on a new machine

$ npm install # no package name = reads package.json and installs everything listed

This is the first command you run after cloning someone else's project โ€” it reads their package.json and downloads exactly the dependencies they used.

npm scripts: shortcuts for common tasks

// inside package.json "scripts": { "start": "node index.js", "build": "some-build-tool" }
$ npm run start $ npm run build

Instead of memorizing long commands, projects define short, memorable ones in package.json โ€” this is why you'll often see instructions that just say "run npm start" with no further explanation.

Try it yourself

exercise
Create a new folder, run npm init -y, and open the resulting package.json to see what it contains. Then run npm install lodash and watch the node_modules folder and package-lock.json appear.

Level up: add a script

exercise 2
Add a .gitignore file with node_modules/ inside it. Then add a custom script to your package.json's scripts section, and run it with npm run yourscriptname.
โœ“ quick check โ€” 3 questions

1. What file lists a project's dependencies?

2. Why should node_modules never be committed to Git?

3. What does running npm install with no package name do?

what's next
The final lesson puts everything from this entire course together โ€” terminal, Git, GitHub, VS Code, and npm โ€” into one real daily workflow.
bottom line
npm installs and manages external code your project depends on, tracked in package.json. Never commit node_modules โ€” it's always reproducible with npm install on any machine.
AD SLOT โ€” 300ร—250 or responsive (in-lesson)
next upLesson 6: Final Project โ€” Your Real Dev Workflow
Continue โ†’