A Complete Beginner’s Guide to npm

Celý článek

(This is a sponsored post.)

I remember vividly a period early in my coding career when I began to feel that things were changing away from what I knew, and headed towards a more complex set of tools and practices, anchored in the command line and something called npm.

This is the first part of a beginner’s guide where we cover the broad topic of Node Package Manager, or npm. We often take those three little letters—npm—for granted as we type them into the command line, but npm is part of a much larger ecosystem that can often be intimidating or confusing to anyone jumping in for the first time. This guide will help de-mystify that ecosystem and help you not only understand what npm is and does, but ultimately feel comfortable working with it.

Guide chapters

1. Who the Heck is This Guide For?(You are here!)
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?
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?

Modern “back-of-the-front-end” development—which npm is a part of—seems complex because it’s one name for lots of interconnected tools. When you add in the fact that the front-end world seems to move much more quickly than it actually does, producing a feeling that you will be left behind for not jumping on the newest thing right away, everything about it can seem unapproachable.

That’s why we’re starting this guide—to make the technology more accessible for you to use in your own work.

Who the heck is this guide for?

In my own personal development learning journey, I would read guides about technologies that excited me, then get to a part that said “just npm install” this or that, and I’d heave yet another disappointed sigh and give up on using whatever that cool-looking thing was. Or, on more adventurous days, I might copy the command, but then inevitably end up either at another step I didn’t understand (“just,” they always said, “do [some thing I had no idea about]”), or get an error message the guide didn’t explain that stops me in my tracks.

Whatever npm was—whatever those commands did and wherever you were supposed to type them—nobody had ever taken the time to explain it to me. And the more I read guides written by people who took that knowledge for granted, the more I felt isolated.

If any of that sounds familiar: this series is for you.

You most likely fall well within the group that’s been described in recent years as “front-of-the-front-end.” Like me, you probably know your stuff when it comes to HTML and CSS. Maybe you also know some JavaScript, either “vanilla” JavaScript, or by way of jQuery. Either way is fine, both for the purposes of this article and in general.

Maybe you’ve even tried out a framework like React or Vue, but you mostly just copied and pasted some stuff to get your project up and running, and weren’t exactly sure what that stuff actually did.

• This post is for you if you sense The Great Divide between the more traditional and “modern” definitions of front-end development—and if you worry that you might be hurting your career if you don’t bridge that chasm.
• This post is for you if you aren’t really sure what all the fuss about terminals and command lines is about, and you’d much prefer to just never touch one at all.
• This post is for you if you wonder why other developers seem to love making things so damn complicated, and what the point of all that command line junk is in the first place, when you could just write plain, simple HTML, CSS and JavaScript instead.
• This post is for you if you feel left out. If you sense there’s some thing, some really big thing, that nobody’s ever really bothered explaining to you, and you’re worried you’re the only one who doesn’t get it.

Know this, my fellow front-end developer: you are not alone. You are far from it. You are exactly where I was not so long ago, and the unsettled memory of that place is still fresh in my mind.

Let me try to answer the questions you probably have—the same ones that I had—in the way I wish somebody would have for me, before I even knew how to ask them.

What is covered in this guide

This guide is a series of articles. That’s not because this stuff is extremely difficult to understand in and of itself; it’s because there are many parts to it, and each one bears explanation on its own. This is wide territory with a number of rabbit holes to explore. Focusing on one solid step at a time allows us to spend time on making things clear and understandable. The goal isn’t to cover everything, but I do want to be more thorough than quick.

We’ll start by talking about the current lay of the land; what npm is, a bit about where it came from, and how we got here. From there, we’ll cover what Node itself is, followed by what package managers are in general, before actually working with npm. We’ll finish by installing Node and npm (if they’re not already), initializing a project to get an idea of how it works, and finally, installing a real-life npm project from GitHub with all its packages and commands.

Some (or all) of that may sound very intimidating right now, but don’t worry. That’s why we’re spending the length of an entire guide together.

What to know before we begin

I’ll do my best to assume as little as possible about you, beyond that you are a web developer who generally knows how to build a website with HTML and CSS. You won’t need to know much about JavaScript or write any for the purposes of following this guide, but it will definitely help if you have at least a foundational understanding of what JavaScript is and how it works.

JSON is the only other bit it might be helpful to know before getting started. If you’re unfamiliar with JSON, it might be worth glancing over this guide to JSON, or at least having it ready for when we do get to that part.

Beyond that, I may reference specific tools, projects, and frameworks like Bootstrap, React, Vue and SvelteKit, but I won’t assume you have any any hands-on experience with them whatsoever, nor will I assume that you’ve ever used npm or the command line before.

Ready to get started? Let’s begin by clarifying what we mean by “npm,” such as what it stands for and how it fits into modern web development.

A Complete Beginner’s Guide to npm originally published on CSS-Tricks. You should get the newsletter and become a supporter.