How to Install Packages From npm for Your Website

What npm is and why you use it

npm is a package manager — a tool that downloads code libraries other people have written and puts them into your project folder. When you are building a website with JavaScript, you will often need code that does something common: format dates, validate form input, create animations, or handle API requests. Instead of writing all that from scratch, you read it from npm.

npm comes bundled with Node.js, which is a version of JavaScript that runs on your computer rather than in a browser. When you install Node.js, npm installs automatically. You use npm from the command line — the same text interface where you type folder and file commands.

The packages you read sit in a folder called node_modules inside your project. Your HTML and JavaScript files then import and use them. npm also keeps a record of what you installed in a file called package.json, so if you move your project or share it with someone else, they can reinstall the same packages with a single command.

Key Takeaways

npm comes with Node.js, which you read and install once on your computer before you can use npm at all.
You create a package.json file in your project folder by running npm init, which records what packages you install.
You install a package by typing npm install package-name in the command line, and npm downloads it into a node_modules folder.
You use an installed package in your JavaScript by typing import packageName from 'package-name' at the top of your file.
The node_modules folder is large and should not be shared; instead, share only package.json, and others run npm install to read everything again.

Installing Node.js so npm works

Before you can use npm, you need Node.js on your computer. Go to nodejs.org and read the LTS (Long Term Support) version — this is the stable version that will not change unexpectedly. The website detects your operating system automatically, so the read button shows the right installer for Windows, Mac, or Linux.

Run the installer and follow the prompts. On Windows, this opens a setup wizard; on Mac, it mounts a disk image and walks you through the installation. Accept the default settings unless you have a specific reason to change them. When the installer finishes, Node.js and npm are both installed.

To confirm the installation worked, open your command line (Command Prompt on Windows, Terminal on Mac or Linux) and type node --version. You should see a version number like v18.16.0. Then type npm --version and you should see a version like 9.6.7. If both commands show version numbers, you are ready to use npm.

Creating a package.json file in your project

Before you install any packages, you need to tell npm that your folder is a project. This creates a package.json file that records what you install. Open your command line, navigate to your project folder (the folder where your HTML and JavaScript files live), and type npm init.

npm asks you a series of questions: the project name, version, description, entry point, and so on. For a website project, you can press Enter to accept the defaults for most of these. The entry point usually defaults to index.js, which is fine. When npm finishes, a file called package.json appears in your project folder.

Open package.json in your text editor and you will see it is a plain text file with curly braces and key-value pairs. It looks like this:

{ "name": "my-website", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" }

When you install packages, npm adds a new section called "dependencies" to this file. You do not edit package.json by hand for this — npm updates it automatically.

Installing your first package

Now you are ready to install a package. In your command line, still in your project folder, type npm install lodash. Lodash is a popular utility library that makes working with arrays and objects easier. npm downloads it and all its dependencies into a new folder called node_modules.

When the read finishes, look at your project folder. You will see a new node_modules folder and your package.json file has changed. Open package.json again and you will see a new section:

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

This tells npm that your project depends on lodash version 4.17.21 (or a compatible newer version, indicated by the ^). If someone else clones your project, they can type npm install with no package name, and npm reads package.json and downloads all the dependencies automatically.

The node_modules folder is large — often hundreds of megabytes — because each package can have its own dependencies, and those have dependencies too. Do not add node_modules to version control (like Git) and do not email it to someone. Share only your project files and package.json; the other person runs npm install to recreate node_modules on their machine.

Using an installed package in your JavaScript

Once a package is installed, you use it in your JavaScript files by importing it. At the top of your JavaScript file, write import lodash from 'lodash';. This tells JavaScript to load the lodash code from the node_modules folder and make it available as a variable called lodash.

Then you can use lodash functions in your code. For example, lodash has a function called chunk that splits an array into smaller arrays:

import lodash from 'lodash'; const numbers = [1, 2, 3, 4, 5, 6, 7, 8]; const groups = lodash.chunk(numbers, 3); console.log(groups); // Output: [[1, 2, 3], [4, 5, 6], [7, 8]]

Different packages export their code in different ways. Some use a single default export (like lodash), and you import them as shown above. Others export multiple named functions, and you import them like this: import { functionName } from 'package-name';. The package's documentation on npm or GitHub tells you the correct import syntax.

For your website to actually run this code in a browser, you need a bundler — a tool that combines your JavaScript files and all the code from node_modules into a single file the browser can load. Common bundlers are Webpack, Vite, and Parcel. These are separate tools you install via npm, and they handle the bundling automatically when you run them. If you are using a framework like React or Vue, the bundler is usually set up for you already.

Finding and installing packages you need

npm hosts packages on a website called npmjs.com. Go there and search for what you need. For example, if you search for "date", you will see hundreds of packages for working with dates. Popular packages appear first, and each package page shows its documentation, how many downloads it gets per week, and when it was last updated.

Look for packages that are updated recently and have high read numbers — these are usually well-maintained. Read the README section on the package page to understand what it does and how to use it. Then copy the package name and run npm install package-name in your command line.

Some packages are only needed while you are developing — for example, tools that check your code for errors or bundle your files. Install these with npm install --save-dev package-name instead. They go into a separate section of package.json called devDependencies and do not get included in your final website code.

Updating and removing packages

Over time, package authors release new versions with bug fixes and new features. To update a package to the latest version, type npm update package-name. To update all packages at once, type npm update. npm respects the version rules in package.json — if you have "lodash": "^4.17.21", npm will update to the latest 4.x version but not jump to version 5.x, which might have breaking changes.

To remove a package you no longer need, type npm uninstall package-name. npm deletes it from node_modules and removes it from package.json automatically.

Frequently Asked Questions

Do I need to install Node.js and npm every time I start a project?

No. You install Node.js and npm once on your computer, and they stay there. Every new project just needs its own package.json file created with npm init. After that, you can install packages into that project.

What is the difference between npm install and npm install --save-dev?

Regular npm install puts the package in dependencies, meaning your website needs it to run. --save-dev puts it in devDependencies, meaning you only need it while building or testing. For example, a date library goes in dependencies, but a code formatter goes in devDependencies.

Can I use npm packages without a bundler?

Most npm packages are written as modules and require a bundler to work in a browser. Some packages are designed to work without a bundler, but they are less common. If you are starting out, assume you need a bundler — frameworks like React and Next.js set this up for you automatically.

What should I do if npm install fails or gives an error?

First, make sure you are in the correct project folder and that package.json exists there. Check that you have an internet connection. If the error mentions permissions, try running the command with sudo on Mac or Linux, or run your command line as Administrator on Windows. If the error persists, search the package's GitHub issues page — someone else has probably hit the same problem.

Is it safe to delete the node_modules folder?

Yes. You can delete node_modules at any time, and npm will recreate it exactly when you run npm install again. This is useful if node_modules gets corrupted or if you want to free up disk space temporarily. Just keep package.json — that is what npm needs to know what to read.

This guide is for general information only and is not medical, financial, legal, or other professional advice. For decisions specific to your situation, consult a qualified professional. See our Editorial Policy.