NPM for Complete Beginners

Today you’ll learn the what why and how to use NPM (Node Package Manager). Knowing how to use NPM property will grant you to the power to leverage the worlds largest open source software registry (NPMJS.com), and make you 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 tutorial, I’ll share what I’ve learned.

Topics:

• 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 JavaScript/Node.js packages (modules) in your applications. 

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 a font 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 sometimes you might want to use NPM to store private company packages, in which case it works exactly the same way as public 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 line/terminal.

If you already have Node.js installed on your machine, you will already have NPM installed. To check if Node is installed, run this command in your terminal:

npm -v

If your terminal says that you don’t have Node installed, what the hell is wrong with you? Kidding aside, to use NPM you’ll need to install Node first.

The best way to install Node.js on any operating system (Mac, Windows, Linux) without any hassle is to simply download the install file directly from NodeJS.org.

Pick the one on the left (the recommended version).

LINK

Now to make sure npm is indeed installed run the following command:

npm -v

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 possible.

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

md myapp

And enter your new directory:

cd myapp

To install NPM packages, you only need one thing, a package.json file with a tiny bit of information.

While inside your myapp directory, run this command to create a package.json file:

touch package.json

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 your project.

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:

{
"name": "myapp",
"version": "1.0.0"
}

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 writers.

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.

this is the best tutorial in the world

Becomes:

This is the Best Tutorial in the World

While inside your myapp directory, run the following command to install to-title-case directly from the NPMJS.com registry:

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 myapp@1.0.0 No description
npm WARN myapp@1.0.0 No repository field.
npm WARN myapp@1.0.0 No license field.

+ to-title-case@1.0.0
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:

{
"name": "myapp",
"version": "1.0.0",
"dependencies": {
"to-title-case": "^1.0.0"
}
}

Here’s a video showing all the steps above:

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” (lowercase) inside.

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:

touch index.js

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 case.

Here’s an overview of dozens of tiny NPM packages you can play with. This is where I found to-title-case.

How to remove NPM packages from a project.

Every now and then you need to remove an npm package from your project. There are a couple of ways to do this.

• 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:

---

Conclusion

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.