Node.js: Code Outside the Browser / Working with npm (Node Package Manager)

Types of Packages and Installs

📦 Two Types of Packages

1. 📚 Regular (Simple) Dependencies

  • Packages that contain code used directly in your application — your code depends on them to run correctly.

  • Example: Express (a Node.js framework used later in the course).

2. 🧪 Development Dependencies (Dev Dependencies)

  • Tools used only during development — not needed for the app to actually run in production.

  • Examples: code bundlers (like Webpack), debuggers, testing libraries, nodemon.

  • Your code doesn't "depend" on these to function — they just make building the app easier.

📥 Step 1: Installing a Regular Dependency (Slugify)

  • 🔤 Slugify is a small package that converts text (like product names) into clean, URL-friendly strings.

💻 In VSCode Terminal:

npm install slugify

✅ What Happens

  • 📦 The package installs immediately.

  • 📝 A new field called "dependencies" appears in package.json, listing slugify and its installed version number.

"dependencies": {
  "slugify": "^1.3.4"
}

💡 Slugify will actually be used in code in the next lecture.

🛠️ Step 2: Installing a Dev Dependency (Nodemon)

  • ⚡ Nodemon is a development tool that automatically restarts your Node server whenever you save a change to your files — so you no longer have to manually stop (Ctrl + C) and restart (node index.js) every time you edit code.

💻 In VSCode Terminal:

npm install nodemon --save-dev

✅ What Happens

  • 📄 A new field called "devDependencies" appears in package.json:

"devDependencies": {
  "nodemon": "^1.18.11"
}

  • 🧪 The -save-dev flag tells npm this is a development dependency, not a regular one.

🌍 Two Types of Installs: Local vs. Global

📁 Local Install (Default)

  • Both slugify and nodemon were installed locally — meaning they only work inside this specific project folder.

  • npm automatically creates a folder called node_modules in your project, which stores:

    • 📦 The packages you installed directly.

    • 🔗 Plus any packages those packages depend on internally (their own dependencies).

  • This is why node_modules often contains many more folders than just the ones you explicitly installed — it's a whole dependency tree.

🌐 Global Install

  • A global install makes a package available anywhere on your computer, not just inside one project folder.

  • When to install globally: when a package provides a command-line tool/executable you want to use across many projects (like nodemon).

🚀 Installing Nodemon Globally:

  • Run this command in VS Code terminal:

npm i nodemon --global

( i is shorthand for install.)

🍎 Possible Permission Error (Mac)

  • ⚠️ On Mac, this command might fail due to lack of permission.

  • 🔑 Fix: prefix the command with sudo and enter your password (or use Touch ID if available):

sudo npm i nodemon --global

  • 🪟 On Windows, this typically works without needing extra permissions.

⚡ Step 3: Using Nodemon Instead of node

⏮️ Before (Manual Restarts Needed)

node index.js

  • 🔄 Every time you changed code, you had to stop the server (Ctrl + C) and restart it manually.

🚀 Now (With Nodemon)

nodemon index.js

  • 👀 Nodemon watches all files in the project.

  • 💾 Any time you save a change, the terminal shows:

restarting due to changes...

  • ⚡ Nodemon automatically re-runs node index.js behind the scenes.

💡 Tip: You can use Tab to autocomplete filenames in the terminal — e.g., typing i then pressing Tab can auto-complete to index.js if it's the only file starting with "i".

⚙️ What Nodemon Actually Is

  • Nodemon is essentially a wrapper around the normal node command — it just adds the auto-restart convenience on top.

  • From this point in the course onward, nodemon replaces node for running the project during development.

📜 Step 4: Using a Local Dev Dependency via npm Scripts

❓ The Problem

  • 🚫 If nodemon were only installed locally (not globally), you couldn't run nodemon index.js directly in the terminal — local dependencies aren't accessible as standalone terminal commands.

💡 The Solution: npm Scripts

  • 📄 package.json has a "scripts" field.

  • ⚙️ When you ran npm init earlier, it auto-generated a placeholder:

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
}

You can replace or add your own custom scripts, in package.json file:

"scripts": {
  "start": "nodemon index.js"
}

▶️  Running the Script

npm run start

  • This runs the command defined under "start" — in this case, effectively running nodemon index.js.

  • Importantly, this uses the local nodemon (from devDependencies), not the global one — so this works even without a global install.

⚡ Shortcut for start

  • "start" is a special, commonly recognized script name in npm.

  • 🚀 You can run it with just:

    (No need to type npm run start — start gets a shortcut, unlike custom script names which always need npm run <name>.)

npm start

📋 Summary Table

📌 Concept

💻 Command

🎯 Purpose

📦 Install a regular dependency

npm install <package>

Adds to "dependencies" in package.json

🛠️ Install a dev dependency

npm install <package> --save-dev

Adds to "devDependencies" in package.json

🌍 Install a package globally

npm install <package> --global (or npm i <package> -g)

Makes it available as a CLI command anywhere on your machine

▶️ Run project normally

node index.js

Standard way to run a script (no auto-restart)

⚡ Run project with auto-restart

nodemon index.js

Restarts automatically on file changes (requires Nodemon)

📜 Run a custom npm script

npm run <script-name>

Executes the command defined in package.json under "scripts"

🚀 Run the special start script

npm start

Shortcut — no need for npm run

🎯Key Takeaways

  • 📦 Regular dependencies = code your app needs to run (e.g., Express, Slugify).

  • 🛠️ Dev dependencies = tools that help you build/develop the app but aren't needed in production (e.g., Nodemon).

  • 📁 Local installs only work within the project folder; 🌍 global installs work as command-line tools anywhere on your machine.

  • 📂 node_modules contains not just what you installed, but also all of their dependencies.

  • ⚡ Nodemon saves time by auto-restarting the server on file changes — a huge quality-of-life improvement during development.

  • 📜 npm scripts (defined in package.json) let you run local dependencies as if they were global commands, and give you reusable, memorable commands for common tasks (like npm start).

➡️ Next step in the course: Actually use one of these installed dependencies (Slugify) inside the project's code.