Blog

Feel like you have a pretty good idea of what a package manager is? We’ve certainly covered a lot of ground getting familiar with all the terms and concepts of package managers, but I’d say it’s high time we actually do something with our newfound knowledge. But first, we need to install npm.

To that end, we’re going to make sure we have Node and npm installed, then make a little sample project to give you real hands-on experience working with the npm basics and what it looks like to use npm in your front-end development workflow.

Guide chapters

1. Who the Heck is This Guide For?
2. What the Heck Does “npm” Mean?
3. What the Heck is the Command Line?
4. What the Heck is Node?
5. What the Heck is a Package Manager?
6. How the Heck Do You Install npm? (You are here!)
7. How the Heck Do You Install npm Packages?
8. What the Heck Are npm Commands?
9. How the Heck Do You Install an Existing npm Project?

Confirm whether npm is already installed

Before installing npm, we should confirm whether it’s already installed! If you’re unsure whether or not npm is already installed on your system, open your terminal of choice, whether it’s the Terminal app in MacOS, the integrated terminal in a code editor like VS Code, or some other terminal where you have access to the command line.

Ready? Start with this command (notice we’re not including the $ character in these examples):

node -v

That command displays the current version of Node—that is, if it is installed. If Node is installed, the command line will respond with the Node version number that is currently installed:

v16.9.1

Your version may be different, of course. Either way, the fact that you see a version number confirms that npm is installed on your system! Let me stress that the numbers themselves are unimportant, just as long as we get some version number.

If npm or Node is not currently installed, you’ll see a message along the lines of “Command not found” instead. In the unlikely event that npm is installed but Node is not (or vice versa), then it’s probably worth uninstalling it before continuing.

Assuming you do need to install npm and Node (and if you don’t, you’re welcome to skip ahead to the next section), we’re going to take the advice of the official NPM directions and do so via a program called nvm.

Installing Node Version Manager

Node Version Manager, or nvm, allows you to install, update, and uninstall Node on your system, and also to manage multiple versions of Node that you can switch between.

As you may know, server-side languages have their own release versions, e.g., Node 17.1.0, rather than being tied to browser versions, such as Chrome 96. We won’t need any version of Node but the latest, so this won’t be necessary for us right now, although it may be advantageous for you down the road.

I know, it may seem like a lot of extra work to install one program just to install another, but again, this is the recommended path, and doing things the right way from the start makes them much easier in the long run. I’d rather set you up for success than make things briefly easier at the expense of more complexity later.

Installing nvm on Windows

If you’re on Windows, you’ll actually have an easier time here. You’ll need nvm for Windows specifically, but luckily, Windows already has an installer you simply download and run. The directions are in the NVM for Windows repo over at GitHub.

• Download the latest version of NVM for Windows. It can be installed manually, if you prefer.
• Open the terminal and run the nvm list available command to see a list of Node versions that are available to download and install.
• Run the nvm use command, followed by the version number of Node you want to use (e.g. nvm use 16.9.1) to use a specific version. Alternatively, you can use use latest, lts, or newest instead of a specific version number, where newest is the latest installed version.

Once it’s installed, nvm will work the same way on your Windows machine as it does on any other system.

Installing nvm on MacOS

To install nvm on MacOS, the first step is to download it with this command:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

0.39.0 is the latest version at publish time, but it may be worth checking the nvm installation readme and getting the latest, if different.

Once you’ve pasted that command into the terminal and hit Enter, you’ll see your terminal output a bunch of stuff that doesn’t really matter. In fact, I’ll let you in on a little secret: nobody reads the things in their terminals most of the time. All we care about is that…

1. the command eventually finishes; and
2. it doesn’t end with an error message.

If you are prompted for a command in the middle of the installation, hit the q key to quit and continue.

You’ll know the command is finished running when the typing cursor starts blinking again, indicating the terminal is waiting for your typed input. You might even see this right after nvm has completed installing:

=> Close and reopen your terminal to start using nvm or run the following to use it now:

Assuming you see no errors at this point, I would recommend the simpler option of quitting and restarting whatever terminal app you’re using before moving on. It’s a nice way to make sure you’re working with a clean slate.

How to install npm via Node

Now that nvm is installed, we’re ready to do what we really wanted to do in the first place: install npm and Node on our system.

It’s not a bad idea to confirm nvm is installed properly, by running nvm -v. If the terminal shows you the installed version number, you’re good to go! If not, remember that you might have to restart your terminal app before the installation fully processes.

Now that we have nvm, installing Node is a super short command:

nvm install node

Simple enough, eh?

You should see a message along the lines of Downloading and installing node v17.1.0, though the version number may not match, which is fine. You’ll get whatever the latest stable version is at runtime. Wait until the command has finished running—again, you’ll know it’s done once you are back at the default prompt and you’re able to type more commands.

After that, you’re all done here! That simple command not only installs Node, but it will install npm as well. Again, you can verify everything is installed and up to date with npm -v and node -v. If all is good, you’ll get a version number.

What’s next

Alright, at this point, we have nvm for installing and managing Node, Node itself, and npm for handling Node packages. Next up in this npm guide, we’re going to install some packages into a project!

How the Heck Do You Install npm? originally published on CSS-Tricks. You should get the newsletter and become a supporter.