NPM and Packages

What is NPM?

PACKAGE MANAGER · 2M+ PACKAGES · npmjs.com

📜 CODE BLOCK 1: Project Setup Commands (run in terminal)

// ============================================
// STEP 1: CREATE PROJECT DIRECTORY
// ============================================
// WHY: mkdir creates a new folder for your project
// HOW: 'webbo3-project' is the folder name
mkdir webbo3-project

// WHY: cd changes directory into your project folder
// Now all commands run inside this folder
cd webbo3-project

// ============================================
// STEP 2: INITIALIZE NPM PROJECT
// ============================================
// WHY: npm init creates a package.json file
// HOW: -y flag accepts all default values (skip questions)
// Without -y, npm asks for name, version, description, etc.
npm init -y

// After running this, you'll have a package.json file.
// package.json is the blueprint of your project — it lists
// all the packages your project depends on.

// ============================================
// STEP 3: INSTALL A PACKAGE (chalk)
// ============================================
// WHY: chalk adds color to terminal output
// HOW: npm install downloads the package from registry
// It also saves it as a dependency in package.json
npm install chalk

// After running this command:
// 1. A 'node_modules' folder is created (contains chalk code)
// 2. package.json is updated with "dependencies": {"chalk": "^5.3.0"}
// 3. package-lock.json is created (locks exact versions)

// ============================================
// USEFUL NPM COMMANDS
// ============================================
// Install package and save as regular dependency
npm install package-name

// Install package as devDependency (for development only)
npm install --save-dev package-name

// Install package globally (available system-wide)
npm install -g package-name

// Uninstall a package
npm uninstall package-name

// Update all packages to latest versions
npm update

// List all installed packages
npm list
    

package.json & node_modules

THE BLUEPRINT · THE CODE · THE LOCKFILE

📜 CODE BLOCK 2: package.json Explained (with line-by-line comments)

// ============================================
// package.json (created by npm init -y, then modified)
// ============================================
{
  // WHY: name is your project's identifier
  // Must be unique if publishing to NPM
  "name": "webbo3-project",
  
  // WHY: version follows semantic versioning (major.minor.patch)
  // 1.0.0 = first stable release
  "version": "1.0.0",
  
  // WHY: description helps others understand your project
  "description": "Learning NPM and packages with Webbo3",
  
  // WHY: entry point is the main file of your application
  // When someone requires your package, this file loads
  "main": "index.js",
  
  // WHY: scripts are shortcuts for common commands
  // Run with: npm run start, npm run dev, npm test
  "scripts": {
    "start": "node index.js",
    "dev": "nodemon index.js",
    "test": "jest"
  },
  
  // WHY: dependencies are required for the app to RUN
  // Installed with: npm install chalk (no --save-dev)
  // These packages are needed in PRODUCTION
  "dependencies": {
    "chalk": "^5.3.0"   // ^ means compatible with 5.x.x
  },
  
  // WHY: devDependencies are needed only for DEVELOPMENT
  // Not needed when the app runs in production
  // Installed with: npm install --save-dev package-name
  "devDependencies": {
    "nodemon": "^3.0.0",   // Auto-restarts server on changes
    "jest": "^29.0.0",      // Testing framework
    "eslint": "^8.0.0"      // Code linting
  },
  
  // WHY: keywords help people find your package on NPM
  "keywords": ["javascript", "npm", "learning"],
  
  // WHY: author credits the creator
  "author": "Webbo3 Student",
  
  // WHY: license defines how others can use your code
  "license": "ISC"
}

// ============================================
// WHAT IS node_modules?
// ============================================
// node_modules is a folder containing ALL the code for
// every package your project depends on (including their dependencies)
// 
// IMPORTANT: NEVER commit node_modules to GitHub!
// Add node_modules/ to .gitignore file.
// Anyone can run 'npm install' to recreate node_modules from package.json

// ============================================
// WHAT IS package-lock.json?
// ============================================
// package-lock.json locks EXACT versions of every installed package
// This ensures every developer on your team gets the same versions
// ALWAYS commit package-lock.json to version control!
    

Chalk Package Example

COLORFUL TERMINAL OUTPUT

📜 CODE BLOCK 3: Complete index.js with Chalk (line-by-line comments)

// ============================================
// index.js — Colorful Terminal Output Using Chalk
// ============================================

// WHY: require() imports the chalk package we installed
// HOW: Node.js looks for 'chalk' in node_modules folder
const chalk = require("chalk");

// WHY: chalk.blue() makes the text appear blue in the terminal
// HOW: The text is wrapped with ANSI color codes
// Your terminal interprets these codes and shows colors
console.log(chalk.blue("Welcome to Webbo3 JavaScript Mastery"));

// WHY: chalk.green() makes text green — great for success messages
console.log(chalk.green("Course: JavaScript + AI"));

// WHY: chalk.yellow() makes text yellow — good for warnings
console.log(chalk.yellow("Cohort: 01"));

// WHY: chalk.red() makes text red — attention-grabbing
console.log(chalk.red("Spots remaining: 87"));

// ============================================
// MORE CHALK FEATURES
// ============================================

// You can chain styles together
console.log(chalk.blue.bold.underline("Important Announcement"));

// You can add backgrounds
console.log(chalk.white.bgGreen(" SUCCESS! "));

// You can use template literals with chalk
const user = "Kemi";
console.log(chalk.cyan(`Welcome back, ${user}!`));

// ============================================
// RUN THE FILE
// ============================================
// $ node index.js
// 
// You will see colorful output in your terminal!
// Blue text, green text, yellow text, and red text.
    

dependencies vs devDependencies

PRODUCTION vs DEVELOPMENT · npm install --save-dev

🔍 HOW TO FIND THE RIGHT NPM PACKAGE USING AI

📋 NPM Commands Quick Reference

# Initialize a new project
npm init -y

# Install a production dependency
npm install package-name

# Install a devDependency
npm install --save-dev package-name

# Install a package globally
npm install -g package-name

# Uninstall a package
npm uninstall package-name

# Install all dependencies from package.json
npm install

# Install only production dependencies (no devDependencies)
npm install --production

# Update all packages
npm update

# List installed packages
npm list

# Check for outdated packages
npm outdated

# Run a script from package.json
npm run script-name