Node and NPM — Getting Set Up

“women using laptop on brown wooden table” by Andrew Neel on Unsplash

If you’re going to be writing Javascript these days, you’re almost certainly going to be using Node and NPM, in at least a superficial way. Node is just a JavaScript runtime that is famous for allowing JS to be run on servers (for more, see our intro tutorial on exactly that subject). Prior to Node, Javascript was limited to the browser, as the language was originally designed in the 90’s to let people interact with the DOM (Document Object Model) in more powerful ways.

NPM is how those developing with Javascript often download open-source packages to use in their projects. It’s comprised of a CLI, or Command Line Tool, and a registry of over 600,000 packages, which makes it the largest software registry in existence.

With NPM, gaining access to any of those 600,000 packages is as simple as running npm install desired-package. You’ll see something like this in most JavaScript tutorials you read, or docs you peruse. However, in order to get to the point of being able to run that simple command, we have to do some setup. This tutorial will cover the basics to get users up and running with NPM so they can work on their projects, but it won’t cover everything. Towards the end of the article, I’ll provide some resources for deeper dives, if dependency management in JavaScript is what floats your boat. Let’s jump in.

Installing Node

First things first, we need Node installed on our own computer in order to use the NPM CLI. Luckily, this process is fairly automated and straightforward. We can head over the the Node Downloads page and take advantage of installers they have for Windows and Mac, which will handle almost everything for you.

They offer installers for an LTS, or Long Term Support, version and the current version. The LTS version is recommended, because it means that they will be officially supporting it for years to come, so it will be reliable in production settings. For our use, though, it doesn’t matter too much.

Go ahead and download the installer for your desired OS, then follow the instructions as they appear.

You can see that Node does us a solid here and preemptively installs NPM for us as well, so our setup process is reduced from 2 steps to just 1. How thoughtful of Node.

In the above screenshot you’ll also notice we’re being informed that Node and NPM are being installed to /usr/local/bin/node and /usr/local/bin/npm respectively. /usr/local/bin is commonly where programs that the user can run are stored. The bin part stands for “binary”, which is basically just telling us that these aren’t plain ol’ text files, but rather they are executables. On Windows, Node will most likely be installed to %AppData%\npm.

While these file locations are by convention only (we could install both Node and NPM anywhere), /usr/local/bin is a little special only because it’s included in the PATH by default. PATH is just an environment variable on Unix machines that tells the OS where to look if a user executes a command in the terminal that doesn’t have an explicit path.

When we type npm install, our machine says “npm, huh? Not sure where that is, but I’ll check the regular spots in PATH”, and /usr/bin/local is usually found quite quickly. The PATH can be modified in /etc/paths, but I suggest you only open that file if you’re debugging an issue. Once Node is installed, it recommends checking that /usr/local/bin is included in PATH, so you could do that by running cat /etc/paths. cat just prints out the contents of a file. If you see /usr/local/bin, then you know you’re good to go.

Using NPM

Okay, finally to the interesting stuff. Let’s start by making a new directory via the terminal:

mkdir npm-example; cd npm-example

This will create the empty directory (mkdir) and place us inside of it (cd). We will always start by running npm init which will create a package.json file, which is one of the files we use to track our dependencies, once we start installing packages. It will also ask you some questions about the project that you can just skip through by hitting enter until the prompts finish.

Nice! Our setup is basically finished, and we can feel free to install packages using npm install. Let’s practice by installing chalk, which is a package to add some basic styling to text in the terminal:

npm install chalk

If you run ls in the terminal, we will see all the files and directories inside of our project folder, and you’ll notice we now have another of each: a directory called node_modules, and a file called package-lock.json. node_modules contains all the packages we have installed for this project specifically, and it tends to get huge as we install more. When we import packages in our code, Node will look into node_modules to find the actual code we want. You should avoid messing around in here, but worst case it can be deleted and recreated with npm install (more on that later). If you run ls node_modules, you’ll see a chalk directory, but also several other packages, which are all dependencies of chalk. It too relies on packages from NPM, so they are automatically installed as well.

package-lock.json is automatically generated when there are changes to node_modules or package.json, and it builds an exact representation of the dependencies in a project. This is useful for when we share our project with other developers, as we can be sure they are getting the exact same dependencies as us, to the specific version.

Note: package.json and package-lock.json should both be tracked in version control, because we will want anyone who clones our project to have our list of dependencies and versions, but node_modules should never, ever be tracked in version control. It can become huge, and storing it in version control offers no benefit.

In order to take advantage of someone else’s package.json and package-lock.json, all you need to do is run npm install, which will default to package-lock.json if it exists, and package.json if it doesn’t. This is how developers setup new projects; it’s often step 1. This allows us to have an exact copy of the original authors node_modules directory without needing to add the entire thing to our repository, or wherever the code is living.

NPM Scripts

The package.json file can do a little more than just track dependencies. It can also allow us to define some custom scripts we might want to use as we develop our project. You’ll notice that, by default, we have only 1 script defined in package.json, in the scripts section:

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
},

We can run this ourselves by executing npm run test in the terminal, but the output isn’t very exciting. Let’s define our own script to see it work:

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "example": "echo \"Hello NPM!\""
},

Note: This file has to contain valid JSON, not normal Javascript objects. That means the keys need to be strings, we need to use double quotes, and we can’t have any tailing commas at the end of a line.

Once you’ve updated the file, go ahead and test it with npm run example. As you can see, we need to use npm run with the key name of our script in order to use it. NPM scripts are often used for development-necessary work, like minifying code, running tests, linting code, etc. Let’s use it to actually run some JavaScript though, and we can test out our new package we installed too.

Create a new file called index.js, and open it up in your text editor. We’re going to import our chalk dependency that we added, and do some basic colorful logging to the terminal. Node uses the require syntax for importing packages, so the final result should look roughly like this:

const chalk = require("chalk");
console.log(chalk.blue("Hello ") + chalk.red("World!"));

Now, before you run that manually, let’s add an NPM script to do it for us. Add another key to the scripts block of package.json called chalk and give it a value of node index.js.

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "example": "echo \"Hello NPM!\"",
    "chalk": "node index.js"
},

Now we can just run npm run chalk and we’ll see our new, colorful message!

Wrapping Up

Knowing how to initialize NPM in a project, install and manage dependencies, and take advantage of NPM scripts will get you a long way. Like all things in the programming world, however, there is always more to know. Here is a list of articles you can read to learn more about JavaScript dependency management in general, or something you might want to know about if you’re already comfortable with this material. Happy Hacking!

• NPM scripts in more detail
• NPM install docs
• package-lock.json docs
• Global packages

The Bit

We are working on developing a community of women learning to program with in-depth, project-based, social programming tutorials. If you identify as a woman and seem interested, please visit our website and sign up for our beta.