Installing Dependencies with npm

Welcome back! In our previous lesson, we established that npm is like a massive warehouse for code and that the npm install command is your way of ordering parts from it. We focused on the big picture: what npm is and why your LLM assistant constantly asks you to use it.

Today, we're moving from concept to practice. This lesson is all about what actually happens on your computer when you run npm install. We're going to pop the hood and watch the machine work. You will run the command yourself and see exactly which files are created and changed. By the end, you'll be able to read a project's package.json file and understand the exact "ingredients" and "tools" it needs to function.

Your Project's Blueprint: package.json

Every modern JavaScript project has a central manifest file called package.json. Think of yourself as the director of a movie. You have your cast (the actors who appear on screen) and your crew (the camera operators, lighting technicians, and editors who work behind the scenes). The package.json file is your master list, keeping track of everyone involved.

This list, however, isn't just a jumble of names. It's organized into distinct categories. The two most important categories you'll encounter are:

1. dependencies: These are the "actors." They are essential packages that your application needs to run in its final form. If you're building a web app, a library like framer-motion for animations would be a dependency because the user needs it to see the animations.
2. devDependencies: These are the "film crew." They are tools used only during the development process. For example, a package that formats your code to keep it neat (prettier) or a tool that automatically reloads your browser when you save a file are devDependencies. The end-user never interacts with them; they just help you build the app.

This distinction is vital. It's like building one of your drones. The motors, propellers, and flight controller are dependencies—they are part of the final, flying product. Your soldering iron, multimeter, and wrenches are devDependencies—they are essential for building the drone in your workshop, but you don't strap them to the drone when it takes off.

Let's get the formal definitions from a great article on the DEV Community blog.

Let's Build: A Practical Walkthrough

Now, let's see this in action. We'll create a new project folder, initialize it with npm, and install a package.

First, create a new folder on your computer for this exercise (e.g., npm-test), open your code editor (like VS Code), and open the terminal within that folder.

Step 1: Create the package.json File

Before we can add dependencies, we need the blueprint file itself. You can create one with a simple command.

npm init -y

The npm init command starts a process to create a package.json file. The -y flag just tells it to accept all the default settings automatically. You'll immediately see a package.json file appear in your project folder with some basic information.

Step 2: Install a Dependency

Let's imagine our LLM assistant has told us to install lodash, a very popular utility library that provides helpful functions. This is a classic "actor" package—something our app might use in production.

In your terminal, run the following command:

npm install lodash

Now, look at your project folder. Three things have just happened:

1. A node_modules folder appeared. This is your local "parts bin." Inside, you'll find a folder for lodash. This is where the code you downloaded now lives.

2. A package-lock.json file was created. Think of this as a hyper-detailed inventory list. It records the exact version of every single package that was installed. This ensures that if another person works on your project, they will install the identical versions, preventing "it works on my machine" problems.

3. Your package.json file was updated. Open it. You'll see a new section has been added:

   "dependencies": {
     "lodash": "^4.17.21"
   }
   

   npm automatically added lodash to your list of essential dependencies.

The screenshot below captures this entire process perfectly. You can see the command being run in the terminal, the resulting dependencies entry in package.json, and the lodash folder appearing inside node_modules.

Step 3: Install a Dev Dependency

Next, let's add a "workshop tool." We'll install prettier, a popular code formatter. We only need it during development to keep our code clean, not for the final app to run.

To tell npm this is a development tool, we use a special flag: --save-dev (or the shorter -D).

npm install prettier --save-dev

Now, check your package.json file again. You'll see a new, separate section has been added:

"devDependencies": {
  "prettier": "^2.8.8"
}

prettier is now correctly listed as a tool for your development workshop, not a part of the final product.

The following video provides a great visual summary of everything we just did: creating the package.json file, and then installing both regular and dev dependencies.

Conclusion

You've now successfully bridged the gap between theory and practice. You've seen firsthand that npm install is not a magic incantation, but a concrete action with predictable results. It modifies your project's file system in a clear and organized way, keeping track of all the moving parts. When Claude or another LLM tells you to install a package, you now understand it's simply asking you to add a new part or a new tool to your project's inventory.

Key Takeaways:

• Running npm init -y is the first step to create a package.json manifest for your project.
• npm install <package-name> adds a package to your dependencies, which are required for your app to run.
• npm install <package-name> --save-dev adds a package to your devDependencies, which are tools for the development process.
• These commands update package.json, create/update the node_modules folder with the actual code, and generate a package-lock.json to ensure version consistency.

In our next lesson, we'll take the final step in this initial setup. Now that you know how to install the parts for your project, you'll learn how to use the npm run dev command to start the engine, launch a local server, and finally see your project come to life in your web browser.