npm: A Free Guide for Beginners | CSS-Tricks

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

This is the first part of our beginner’s guide where we cover the general topic of Node Package Manager, or npm. We often take these three lowercase letters – npm – for granted when we type them into the command line, but npm is part of a much larger ecosystem that can be intimidating or confusing to anyone who jumps into it for the first time. This guide will help demystify this ecosystem and help you not only understand what npm is and what it does, but ultimately feel comfortable working with it.

Guide chapters

  1. Who 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 a knot?
  5. What the heck is a package manager?
  6. How the heck do you install npm?
  7. How do you install npm packages?
  8. What the heck are npm commands?
  9. How the heck do you install an existing npm project?
The npm logo goes white on a gradient background from bright red to orange from left to right to start this npm guide.

Modern “back-end front-end” development – of which npm is a part – seems complicated because it is one name for many interrelated tools. When you add in the fact that the front-end world appears to be moving a lot faster than it actually is, with the feeling that you’re going to be left behind for not jumping on the latest thing right away, everything about it can seem unapproachable.

That’s why we started this guide – to make technology more accessible for you to use in your own business.

Who is this guide for?

On my personal development learning journey, I’d read guides about techniques that got me excited, then move on to the part that says “just npm install“This or that, and I would sigh another disappointment and give up using whatever was this wonderful thing. Or, on more adventurous days, I might copy it, but then inevitably end up either at another move I didn’t understand (“Just” ‘, they always said, ‘Do [some thing I had no idea about]’), or receiving an error message that the manual didn’t explain preventing me from continuing my paths.

Whatever npm is – whatever you do these commands and wherever you’re supposed to write them – no one has ever taken the time to explain them to me. And the more I read the evidence written by people who took this knowledge for granted, the more isolated I felt.

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

You likely fall well into the group that in recent years has been described as “up front.” Like me, you probably know your stuff when it comes to HTML and CSS. You probably also know some javascript, either ‘vanilla’ javascript or by jQuery. It’s okay either way, both for the purposes of this article and in general.

You may have tried a framework like React or Vue, but you’ve mostly copied and pasted some stuff to get your project started and running, and you’re not quite sure what these things actually are. I did.

  • This post is for you If you feel the big gap between the more traditional and “modern” definitions of front-end development – and if you’re worried that you could hurt your career if you don’t bridge that gap.
  • This post is for you If you’re not really sure what all the fuss is about terminals and command lines, and you’d much rather not touch any of them at all.
  • This post is for you If you are wondering why other developers seem to love making things Too complicatedAnd what is the point of all this spam in the first place, when you can just write plain and simple HTML, CSS and JavaScript instead.
  • This post is for you If you feel left out. If you feel there are some Thing, some something really bigNo one ever bothered to explain it to you, and you’re worried that you’re the only one who doesn’t understand it.

Know this, my fellow frontend developer: You’re not alone. You are far from it. You are exactly where you were not so long ago, and the uneasy memory of this place is still fresh in my mind.

Let me try to answer the questions you may have – the same as I have – in the way I wish someone would ask me, before I even know how to ask them.

What is covered in this guide

This guide is a series of articles. This is not because these things are difficult to understand per se; That’s because there are many parts in it, and each part carries an explanation of its own. This is a wide area with a number of rabbit holes to explore. Focusing on one powerful step at a time allows us to take the time to make things clear and understandable. The goal is not to cover everything, but I want to be more comprehensive than speed.

We will start by talking about the current state of the Earth; What is npm, a little bit about its source, and how we got here. From there, we’ll cover what Node itself is, followed by package managers in general, before actually working with npm. We’ll finish by installing Node and npm (if it’s not already there), configuring a project to get an idea of ​​how it works, and finally installing a real-world npm project from GitHub with all its packages and commands.

Some (or all) of that might sound pretty scary right now, but don’t worry. That’s why we spend the entire length of the guide together.

What you need to know before we start

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

JSON is the only other thing that might be useful to know before getting started. If you’re not familiar with JSON, it might be worth a peek at this guide to JSON, or at least get ready for it when we get to this part.

Furthermore, I might refer to certain tools, projects, and frameworks such as Bootstrap, React, Vue, and SvelteKit, but I wouldn’t assume you had any hands-on experience with them at all, nor would I assume you’ve ever used npm or command line before.

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

Leave a Comment