Today you’ll learn the what why and how to use NPM (Node Package Manager). Knowing how to use
grant you to the power to leverage the worlds largest open source software registry (NPMJS.com), and make
a more productive developer.
I thought I knew how NPM worked. I was wrong. That realization motivated me to take a deep dive, and in this
I’ll share what I’ve learned.
What is NPM?
Why should you learn how to use NPM?
How to install NPM on your local machine.
How to Add NPM packages/modules to a project.
How to remove NPM packages/modules from a project.
Let’s start by dissecting exactly what NPM is.
What is NPM?
Actually the name, Node Package Manager is pretty descriptive. NPM is a command line/terminal tool that you
use to manage
Note: the term NPM module and NPM package mean the same thing.
A package is like a building block consisting of code.
If you have experience with Ruby, an npm package is like a Ruby Gem
A package (usually) adds features or extends existing functionality in your application. A package could be
package, an icon package, or something more complex, like a CSS preprocessor or a UI framework.
A package can be small in size, or it can be gigantic.
All official NPM packages are available on NPMJS.com which is the
repository/archive for NPM modules.
On NPMJS.com a package can be stored as a public or private. If it’s public everyone can use it. But
might want to use NPM to store private company packages, in which case it works exactly the same way as
packages, but only you can use them.
Why should you use NPM?
NPM allows you to take advantage of billions of hours of collective knowledge which has accumulated since
the beginning of not just the Internet, but the beginning of the computer age.
Thousands (if not millions) of people have made it possible for you to build complex and valuable digital
products at a rapid pace. NPM packages allow you do not have to reinvent the wheel every time you need a
specific feature or function.
If you only need a simple toggle-menu function, you’re probably better off writing that function yourself.
But when you need something that has many moving parts, it often makes sense to stand on the shoulders of
giants, and use something that already exists.
You name a type of functionality that your website needs and chances are that someone has already built it
for you. Even if you can’t find a package that does exactly what you need, you can usually find one that is
close enough. Then you can modify that package, and add what your project needs, and save dozens if not
hundreds of hours of work!
How to install NPM on your local machine
Before you can do anything with NPM you need to install NPM on your computer. First, fire up your command
If you already have Node.js installed on your machine, you will already have NPM installed. To check if Node
run this command in your terminal:
If your terminal says that you don’t have Node installed, what the hell is wrong with you? Kidding aside, to
NPM you’ll need to install Node first.
The best way to install Node.js on any operating system (Mac,
Linux) without any hassle is to simply download the install file directly from NodeJS.org.
Pick the one on the left (the recommended version).
Now to make sure npm is indeed installed run the following command:
Now you’re ready to use npm to install packages in your projects!
How to Add NPM packages/modules to your project.
To make things easy to reason about, let’s set up a dead-simple project, with as few moving parts as
Let’s be creative, and call it “MyApp”
Go to your preferred location on your computer (e.g. desktop/dev) and run the following command to create
your project directory
And enter your new directory:
To install NPM packages, you only need one thing, a package.json file with a tiny bit of
While inside your myapp directory, run this command to create a package.json file:
Here’s a quick video showing all the steps above:
Now open up your myapp project folder in your favorite editor. I use VSCode.
Inside your editor, go to the package.json file you just created.
Right now your JSON file is empty. If you try to install an npm package now your terminal will throw an
error. That’s because you need to set up your package.json file before you can add packages to
To install npm modules to a project, your package.json file must have a name and a version.
Inside your package.json file, add the following:
Hit save (CTRL + S / CMD + S). Now your myapp project is open for business!
So what should we install?
For this tutorial, I picked the to-title-case package. This package allows you to quickly
convert a string (text) to title case.
to-title-case is a tiny package. But you want to learn how something works, it’s usually a good idea to
start working with as little code as possible.
Why would converting text to title case be useful?
So let’s say you manage a blog with several writers. Unfortunately, some of those darn lazy writers just
can’t figure out how to use title case right for their articles’ headlines, but they’re otherwise good
Truth be told, many, many authors don’t know how to use title case properly.
So do you fire them?
That’s one option, sure. Or you find a solution!
The to-title-case package allows you to attach a function to any string of text so it automatically converts
any case (uppercase/lowercase) to title case. This would work perfectly on the h1 element which is
generally used for titles/big headlines.
While inside your myapp directory, run the following command to install to-title-case directly from the
npm install to-title-case
If it worked, you’ll get an output like this in your terminal:
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN email@example.com No description
npm WARN firstname.lastname@example.org No repository field.
npm WARN email@example.com No license field.
added 7 packages and audited 8 packages in 4.518s
found 0 vulnerabilities
Don’t worry about the npm warnings right now, I’ll get to that.
Now, open your package.json file. It should look like this:
The only thing new is the dependencies object, which contains the name of the package you just installed and
its version number.
If you open up your myapp directory, you should also see a new directory called “npm_modules”.
If you open up the npm_modules folder, you should see a folder called “to-title-case”
The code for all packages you add to your project is located inside npm_modules.
Using the to-title-case package in a practical example
To use a package, you need to refer to it inside your application. So far, our app doesn’t have any files
besides package.json. So let’s create one!
While inside myapp, run:
Now open your index.js file and add the following:
var toTitleCase = require('to-title-case')
toTitleCase('this is the best tutorial in the world')
Now go your terminal, and write node index.js while inside your myapp directory.
This will run the code inside your file and convert your lowercase sentence to title case.
Try writing something like “THIS IS THE BEST TUTORIAL EVER” (all caps) and run the code again. You’ll see
that no matter how absurdly you write your text, the to-title-case function will always convert it to title
Every now and then you need to remove an npm package from your project. There are a couple of ways to do
Go to your package.json file and remove the name of the package you want to get rid of.
Go to your terminal, inside your myapp directory run: npm remove nameofthepackage.
So with the example from this tutorial:
Congratulations! You have now learned:
How to set up a project with package.json
How to install npm packages from the NPMJS registry.
How to import your installed npm package into a file (index.js) and use it!
How to remove an npm package from your project.
This is how installing and using npm packages work. It doesn’t get much different from this, except the size
of your projects will often be bigger and therefore the size of your package.json will be bigger as well.