npm and npx

Lesson content

🎯 Goal By the end of this lesson, you'll understand: What is npm? What is npx? Difference between npm and npx When to use each Real-world examples Interview questions What is npm? npm stands for Node Package Manager . It is the default package manager that comes with Node.js. It helps you: Install packages Update packages Remove packages Manage project dependencies Simple Definition: npm is a tool used to download and manage JavaScript packages . Real-Life Example 📦 Imagine your smartphone. To install WhatsApp, Instagram, or YouTube, you use an App Store. App Store │ ▼ Install Apps Similarly, npm │ ▼ Install Packages What is a Package? A package is reusable code written by someone else. Examples: Express React Lodash Axios Instead of writing everything from scratch, you install a package. Installing a Package npm install express or npm i express This installs Express into your project. What Happens After Installation? project/ node_modules/ package.json package-lock.json app.js node_modules Contains all installed packages. package.json Stores project information and dependencies. Example { "name": "my-project" , "version": "1.0.0" , "dependencies": { "express": "^5.0.0" } } package-lock.json Stores the exact versions of installed packages. This ensures everyone installs the same versions. Installing Development Dependencies Some packages are only needed during development. Example: npm install nodemon --save-dev Shortcut: npm i -D nodemon Installing Globally npm install -g nodemon Now you can use nodemon from anywhere on your computer. Useful npm Commands Initialize a Project npm init or npm init -y Creates a package.json file. Install All Dependencies npm install Reads package.json and installs all required packages. Update Packages npm update Remove a Package npm uninstall express What is npx? npx stands for Node Package Execute . It allows you to run a package without installing it globally . Simple Definition: npx downloads (if needed), runs a package, and then exits. Real-Life Example 🚕 Imagine taking a taxi. Need a ride? │ ▼ Book Taxi │ ▼ Use It │ ▼ Done You don't buy a car just for one trip. Similarly, Need a package once? │ ▼ Use npx Example Instead of installing Create React App globally: npm install -g create-react-app Use: npx create-react-app my-app npx downloads the latest version (if necessary), runs it, and finishes. Another Example npx cowsay "Hello Ajay" Output _____________ < Hello Ajay > ------------- \ ^__^ \ (oo)\_______ (__)\ )\/\ ||----w | || || No global installation required. npm vs npx Feature npm npx Purpose Install packages Run packages Installs Package ✅ Yes Only temporarily if needed Global Installation Supported Not required Best For Dependencies One-time commands Creates node_modules ✅ Yes (for local installs) ❌ Usually no When Should You Use npm? Use npm when you need a package again and again . Examples npm install express npm install mongoose npm install axios These become part of your project. When Should You Use npx? Use npx when you only need to run a tool once . Examples npx create-react-app my-app npx vite@latest npx eslint . Real-Life Example 🏗️ Suppose you're creating a React project. Instead of: npm install -g create-react-app create-react-app my-app Simply use: npx create-react-app my-app This always uses the latest version and avoids installing unnecessary global packages. Common npm Commands Command Purpose npm init Create a project npm init -y Create package.json with default values npm install Install all dependencies npm install express Install a package npm i Short form of npm install npm uninstall express Remove a package npm update Update packages npm run start Run the start script npm run dev Run the dev script Common npx Commands Command Purpose npx create-react-app app Create a React project npx vite@latest Create a Vite project npx eslint . Run ESLint npx tsc --init Generate a TypeScript configuration Interview Question Which command should you use to create a React application without installing create-react-app globally? npx create-react-app my-app Reason: npx runs the package directly without requiring a global installation. Common Mistakes ❌ Mistake 1 Installing every tool globally. npm install -g create-react-app ✅ Better npx create-react-app my-app Mistake 2 Deleting package-lock.json without understanding its purpose. It helps keep dependency versions consistent across different machines. Best Practices ✅ Use npm install for project dependencies. ✅ Use npm install -D for development tools. ✅ Use npx for one-time CLI tools. ✅ Commit both package.json and package-lock.json to version control. ❌ Do not commit the node_modules folder to Git. Key Points ✅ npm installs and manages packages. ✅ npx executes packages without requiring a global installation. ✅ package.json stores project information and dependencies. ✅ package-lock.json locks exact dependency versions. ✅ Use npm for reusable project dependencies. ✅ Use npx for one-time commands and project generators. 🧠 Easy Formula Need to install a package? │ ▼ npm Need to run a package once? │ ▼ npx npm → Install & Manage Packages npx → Execute Packages Remember: 📦 npm = Install and manage packages 🚀 npx = Run packages without installing them globally