{"id":361210,"date":"2022-01-20T07:07:32","date_gmt":"2022-01-20T15:07:32","guid":{"rendered":"https:\/\/css-tricks.com\/?p=361210"},"modified":"2022-01-20T07:07:35","modified_gmt":"2022-01-20T15:07:35","slug":"a-complete-beginners-guide-to-npm","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/a-complete-beginners-guide-to-npm\/","title":{"rendered":"A Complete Beginner’s Guide to npm"},"content":{"rendered":"\n

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<\/a>.<\/p>\n\n\n\n

This is the first part of a beginner\u2019s guide where we cover the broad topic of Node Package Manager, or npm. We often take those three little letters\u2014npm\u2014for 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.<\/p>\n\n\n\n\n\n\n

Guide chapters<\/h2>\n\n\n
  1. Who the Heck is This Guide For?<\/a> (You are here!)<\/em><\/li>
  2. What the Heck Does \u201cnpm\u201d Mean?<\/a><\/li>
  3. What the Heck is the Command Line?<\/a><\/li>
  4. What the Heck is Node?<\/a><\/li>
  5. What the Heck is a Package Manager?<\/a><\/li>
  6. How the Heck Do You Install npm?<\/a><\/li>
  7. How the Heck Do You Install npm Packages?<\/a><\/li>
  8. What the Heck Are npm Commands?<\/a><\/li>
  9. How the Heck Do You Install an Existing npm Project?<\/a><\/li><\/ol>\n\n\n\n
    \"The<\/figure>\n\n\n\n

    Modern \u201cback-of-the-front-end\u201d development<\/a>\u2014which npm is a part of\u2014seems complex because it\u2019s 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.<\/p>\n\n\n\n

    That\u2019s why we\u2019re starting this guide\u2014to make the technology more accessible for you to use in your own work.<\/p>\n\n\n

    Who the heck is this guide for?<\/h3>\n\n\n

    In my own personal development learning journey, I would read guides about technologies that excited me, then get to a part that said \u201cjust npm install<\/code>” this or that, and I\u2019d 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\u2019t understand (\u201cjust,\u201d they always said, \u201cdo [some thing I had no idea about]\u201d), or get an error message the guide didn\u2019t explain that stops me in my tracks.<\/p>\n\n\n\n

    Whatever npm was\u2014whatever those commands did and wherever you were supposed to type them\u2014nobody had ever taken the time to explain it to me.<\/strong> And the more I read guides written by people who took that knowledge for granted, the more I felt isolated.<\/p>\n\n\n\n

    If any of that sounds familiar: this series is for you<\/strong>.<\/p>\n\n\n\n

    You most likely fall well within the group that\u2019s been described in recent years as \u201cfront-of-the-front-end<\/a>.\u201d Like me, you probably know your stuff when it comes to HTML and CSS. Maybe you also know some JavaScript, either \u201cvanilla\u201d JavaScript, or by way of jQuery. Either way is fine, both for the purposes of this article and in general.<\/p>\n\n\n\n

    Maybe you\u2019ve 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\u2019t exactly sure what that stuff actually did.<\/em><\/p>\n\n\n\n