{"id":13881,"date":"2022-07-04T17:29:04","date_gmt":"2022-07-04T15:29:04","guid":{"rendered":"https:\/\/careerfoundry.inbearbeitung.de\/en\/?p=13881"},"modified":"2022-11-28T12:41:40","modified_gmt":"2022-11-28T11:41:40","slug":"what-is-npm","status":"publish","type":"post","link":"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/web-development\/what-is-npm\/","title":{"rendered":"What is NPM? A Beginner's Guide"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">When thinking of web development and writing code, we often focus on our own code. Using others\u2019 code is actually a big part of the picture, too. Why reinvent the wheel, you know?<\/span><\/p>\n<p>That\u2019s where Nasty Pirate Macaw comes in\u2014otherwise known as <strong>npm<\/strong>.<\/p>\n<p><iframe loading=\"lazy\" class=\"giphy-embed\" src=\"https:\/\/giphy.com\/embed\/jxhc6SSNGOQgZStcXS\" width=\"480\" height=\"150\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p><em>Discover more npm-expansions on <a href=\"https:\/\/github.com\/npm\/npm-expansions\" target=\"_blank\" rel=\"noopener\">GitHub<\/a><\/em><\/p>\n<p><span style=\"font-weight: 400;\">In this article we&#8217;ll cover where to find others\u2019 code (i.e. packages) you can use. We&#8217;ll look at how the npm package manager works, how to keep track of packages, and what makes a good one.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You can click on any heading below to jump right to that section:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#what-is-npm\">What is npm?<\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#what-is-nodejs\">What is Node.js?<\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#why-use-npm\">Why use npm?<\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#what-is-a-packagejson\">What is a package.json?<\/a>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><a href=\"#npm-scripts\"><span style=\"font-weight: 400;\">npm scripts<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><a href=\"#dependencies-vs-devdependencies\"><span style=\"font-weight: 400;\">Dependencies vs. devDependencies<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><a href=\"#making-sense-of-dependencies\"><span style=\"font-weight: 400;\">Making sense of dependencies<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><a href=\"#semantic-versioning\"><span style=\"font-weight: 400;\">Semantic versioning<\/span><\/a><\/li>\n<\/ul>\n<\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#npm-install-vs-npm-ci\">npm install vs. npm ci<\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#what-makes-a-good-package\">What makes a good package?<\/a><\/li>\n<\/ol>\n<h2 id=\"what-is-npm\"><span style=\"font-weight: 400;\">1. What is npm?<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">npm stands for Node Package Manager. It\u2019s a <\/span><a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/web-development\/programming-library-guide\/\" target=\"_blank\" rel=\"noopener\"><b>library<\/b><\/a><span style=\"font-weight: 400;\"> and <\/span><b>registry<\/b><span style=\"font-weight: 400;\"> for JavaScript software packages. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">npm also has command-line tools to help you install the different packages and manage their dependencies.<\/span><\/p>\n<p><a href=\"https:\/\/www.npmjs.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">npm is free<\/span><\/a><span style=\"font-weight: 400;\"> and relied on by over 11 million developers worldwide. You could say it\u2019s kind of a big deal. They\u2019re open-source and have become the center of Javascript code sharing. There are more than a million packages available on npm.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In short, npm is:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">an online repository for the publishing of open-source Node.js projects<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">a command-line utility for interacting with said repository helping with installing packages and managing package versions and dependencies<\/span><\/li>\n<\/ul>\n<h2 id=\"what-is-nodejs\"><span style=\"font-weight: 400;\">2. What is Node.js?<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Node.js is a <\/span><b>runtime environment<\/b><span style=\"font-weight: 400;\"> that allows you to run JavaScript on the backend. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">A runtime environment is like a small operating system. It provides all the functionality needed for a program to run. Node came on the scene because <a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/web-development\/introduction-to-javascript\/\" target=\"_blank\" rel=\"noopener\">JavaScript used to only work in the web browser<\/a>. This is because browsers contain an engine to translate JavaScript into code the machine understands.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Originally the backend (i.e. data layer of an application) doesn\u2019t have this engine. That\u2019s where Node.js comes in. It acts as a JavaScript engine that translates your code,\u00a0 allowing it to be run on a physical machine.<\/span><\/p>\n<p>If you&#8217;d like to learn more about it, check out my <a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/web-development\/what-is-nodejs\/\" target=\"_blank\" rel=\"noopener\">beginner&#8217;s guide to Node.js<\/a>.<\/p>\n<p><span style=\"font-weight: 400;\">Okay, but how does that relate to npm? Basically, <strong>npm keeps track of all the packages (shared code) you\u2019re using.<\/strong><\/span><\/p>\n<h2 id=\"why-use-npm\"><span style=\"font-weight: 400;\">3. Why use npm?<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">It&#8217;s certainly possible to manage your project\u2019s dependencies yourself. <\/span><span style=\"font-weight: 400;\">As your project grows, though, this can become a herculean task. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">This is where a package manager like npm comes in. npm solves this problem by handling dependency and package management for your project.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You define all your project\u2019s dependencies inside your package.json file. Anytime you or a team member needs to get started with your project, all they have to do is run <\/span><strong>npm install<\/strong><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This will immediately install all the necessary dependencies for your project. In the package.json file, you can also specify which versions your project depends upon. This is useful to prevent updates from these packages from breaking your project.<\/span><\/p>\n<h2 id=\"what-is-a-packagejson\"><span style=\"font-weight: 400;\">4. What is a package.json?<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">A package.json file is created by your package manager (in this case npm) and exists at the root of a project in JavaScript\/Node. To generate a package.json file you can run <\/span><strong>npm init<\/strong><span style=\"font-weight: 400;\">. You\u2019ll then be asked to fill out some metadata for your project such as:<\/span><\/p>\n<ul>\n<li><span style=\"font-weight: 400;\">Name &#8211; your project\u2019s name<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Version &#8211; current version in major.minor.patch format (1.0.0, 1.2.3, etc.)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Description &#8211; description of the project<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">License &#8211; the license your project is under, so people know how they are allowed to use it. Full list of licenses <\/span><a href=\"https:\/\/spdx.org\/licenses\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">on the Software License Data Exchange site<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">The package.json file is in JSON format and is used for managing the project\u2019s dependencies, scripts, versions, etc. Here\u2019s a simple example:<\/span><\/p>\n<pre><code>{\r\n  \"name\": \"My cool project\",\r\n  \"version\": \"1.0.0\",\r\n  \"description\": \"\",\r\n  \"main\": \"index.js\",\r\n  \"directories\": {\r\n    \"test\": \"test\"\r\n  },\r\n  \"scripts\": {\r\n    \"test\": \"jest\",\r\n  },\r\n  \"license\": \"ISC\"\r\n}<\/code><\/pre>\n<h3 id=\"npm-scripts\"><span style=\"font-weight: 400;\">npm scripts<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">In the package.json file there is also a <\/span><strong>scripts<\/strong><span style=\"font-weight: 400;\"> property. This can be used to run command line tools that are installed within the project\u2019s local context. Common scripts you might use are things like:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">npm test\u2014to run your tests<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">npm build\u2014to build your project<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">npm start\u2014to run your project locally<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Of course, you are flexible to customize scripts that make sense for your specific project.<\/span><\/p>\n<h3 id=\"dependencies-vs-devdependencies\"><span style=\"font-weight: 400;\">Dependencies vs. devDependencies<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">There are two properties for dependencies in a package.json file, <\/span><b>dependencies<\/b><span style=\"font-weight: 400;\"> and <\/span><b>devDependencies<\/b><span style=\"font-weight: 400;\">. So what\u2019s the difference?<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Dependencies are the list of modules\/packages that are required for your project to run. These are installed using <\/span><strong>npm install<\/strong><span style=\"font-weight: 400;\"> to add the package to the dependencies list.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">devDependencies, short for development dependencies, are modules\/packages that are NOT required for your project to run. These are often things that help the development process but aren\u2019t part of the project themselves. For example, linters like eslint, testing, etc.<\/span><\/p>\n<h3 id=\"making-sense-of-dependencies\"><span style=\"font-weight: 400;\">Making sense of dependencies<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">It\u2019s good to understand the semantics of dependencies as various bugs or security issues can come up due to them. Let\u2019s first take a look at an example of some dependencies:<\/span><\/p>\n<pre><code>\"dependencies\": {\r\n  \"bcryptjs\": \"^2.4.3\",\r\n  \"cors\": \"^2.8.5\",\r\n  \"dotenv\": \"^6.1.0\",\r\n  \"express\": \"4.16.4\",\r\n},\r\n\"devDependencies\": {\r\n    \"eslint\": \"~4.19.1\",\r\n    \"mocha\": \"^6.2.0\",\r\n    \"prettier\": \"^1.19.1\",\r\n  }<\/code><\/pre>\n<h3 id=\"semantic-versioning\"><span style=\"font-weight: 400;\">Semantic versioning<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">The versions above are in the format MAJOR.MINOR.PATCH. So, what does this mean for you?<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">A MAJOR version involves breaking changes\u2014likely you will need to update the package in your project when a major version has changed.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">A MINOR version change is backwards compatible, meaning it should update without breaking things (well, one can hope)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">A PATCH version change is backwards compatible bug fixes, or other small fixes<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">You\u2019ll see there\u2019s also some characters before the version in the package.json above. Let\u2019s go over some of those:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">^ (caret) before a version allows patch and minor updates for versions 1.0.0 and above, patch updates for versions 0.X &gt;=0.1.0, and no updates for versions 0.0.X.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">~ (tilde) allows patch-level changes if a minor version is specified. Allows minor-level changes if not.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">No symbol before the version means the version of the package must match exactly, and should not be updated<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">You can have a look at <\/span><a href=\"https:\/\/github.com\/npm\/node-semver#ranges\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">ALL the possible version ranges on GitHub<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<h2 id=\"npm-install-vs-npm-ci\"><span style=\"font-weight: 400;\">5. npm install vs. npm ci<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">To install a package or module to your project, you have two options: <\/span><b>npm install<\/b><span style=\"font-weight: 400;\"> and <\/span><b>npm ci<\/b><span style=\"font-weight: 400;\">. When should you use each? This table should help:<\/span><\/p>\n<figure id=\"attachment_20041\" aria-describedby=\"caption-attachment-20041\" style=\"width: 2400px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-20041\" src=\"http:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2022\/07\/Table_npm-install-vs.-npm-ci.png\" alt=\"A table contrasting npm install and npm ci under 6 factors.\" width=\"2400\" height=\"2626\" title=\"\" srcset=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2022\/07\/Table_npm-install-vs.-npm-ci.png 2400w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2022\/07\/Table_npm-install-vs.-npm-ci-274x300.png 274w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2022\/07\/Table_npm-install-vs.-npm-ci-936x1024.png 936w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2022\/07\/Table_npm-install-vs.-npm-ci-768x840.png 768w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2022\/07\/Table_npm-install-vs.-npm-ci-1404x1536.png 1404w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2022\/07\/Table_npm-install-vs.-npm-ci-1872x2048.png 1872w\" sizes=\"auto, (max-width: 2400px) 100vw, 2400px\" \/><figcaption id=\"caption-attachment-20041\" class=\"wp-caption-text\">A tabular comparison of npm install and npm ci.<\/figcaption><\/figure>\n<p>If you had trouble viewing that information in the table, here it is divided up for each installation option:<\/p>\n<p><strong>npm install<\/strong><\/p>\n<ul>\n<li><span style=\"font-weight: 400;\">Will create a package-lock.json if there isn\u2019t one already<\/span><\/li>\n<li><span style=\"font-weight: 400;\">Upgrades to the latest version of a package with the ^ version sign<\/span><\/li>\n<li><span style=\"font-weight: 400;\">Can install individual dependencies via <\/span><strong>npm install &lt;package-name&gt;<\/strong><\/li>\n<li><span style=\"font-weight: 400;\">Updates existing node_modules<\/span><\/li>\n<li><span style=\"font-weight: 400;\">Can write to an existing package-lock.json<\/span><\/li>\n<li><strong>npm install -production<\/strong><span style=\"font-weight: 400;\"> optimal for production environment<\/span><\/li>\n<\/ul>\n<p><strong>npm ci<\/strong><\/p>\n<ul>\n<li><span style=\"font-weight: 400;\">Must have an existing package-lock.json<\/span><\/li>\n<li><span style=\"font-weight: 400;\">Will not update the package lock if the dependencies do not match, instead will exit in error<\/span><\/li>\n<li><span style=\"font-weight: 400;\">Can only install entire project, not individual dependencies<\/span><\/li>\n<li><span style=\"font-weight: 400;\">Always removes node_modules and starts fresh<\/span><\/li>\n<li><span style=\"font-weight: 400;\">Will never write to package.json or any of the package-locks: installs are frozen<\/span><\/li>\n<\/ul>\n<h2 id=\"what-makes-a-good-package\"><span style=\"font-weight: 400;\">6. What makes a good package?<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">It\u2019s easy to get <a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/product-management\/shiny-object-syndrome\/\" target=\"_blank\" rel=\"noopener\">shiny object syndrome<\/a> when downloading packages. Before you smash that install command here are a few things to consider:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Is the project still maintained? Look at the last time it was updated. The last thing you want is to make a package a core part of your project, only to realize it\u2019s no longer maintained. This can lead to a security breach or bugs.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">How many weekly downloads? It doesn\u2019t need to be a popularity contest, but if you\u2019re using a package in a business setting, you want to make sure it\u2019s reputable. More people using it means more eyes on the code means more chances the worst bugs have already been sorted out.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">How\u2019s the documentation? When you get stuck, it\u2019s really helpful if the package has good documentation, otherwise you\u2019re shooting alone in the dark.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Does it have a community? Check the package\u2019s Github issues, are they active? It\u2019s good to have somewhere to go for help if need be.\u00a0<\/span><\/li>\n<\/ul>\n<h2 id=\"final-thoughts\"><span style=\"font-weight: 400;\">Final thoughts<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">We\u2019ve covered what makes a good package, the basics of managing dependencies and what a package.json is. Of course, it\u2019s always good to consider if using a third-party package is advantageous to writing the code yourself.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">That said, there\u2019s some cool projects out there that are likely to save you a ton of time. Happy browsing!<\/span><\/p>\n<p>If you&#8217;d like to learn more about the world of web development, check out these articles:<\/p>\n<ul>\n<li><a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/web-development\/web-developer-interview-questions\/\">13 Web Developer Interview Questions (and How to Answer Them)<\/a><\/li>\n<li><a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/web-development\/django-framework-guide\/\">What Is the Django Framework? The Complete Beginner\u2019s Guide<\/a><\/li>\n<li><a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/web-development\/too-old-for-coding\/\">Why No-One is Too Old for a Career in Web Development<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>When thinking of web development and writing code, we often focus on our own code. Using others\u2019 code is actually a big part of the picture, too. Why reinvent the wheel, you know? That\u2019s where Nasty Pirate Macaw comes in\u2014otherwise known as npm. Discover more npm-expansions on GitHub In this article we&#8217;ll cover where to [&hellip;]<\/p>\n","protected":false},"author":134,"featured_media":13903,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_lmt_disableupdate":"yes","_lmt_disable":"","footnotes":""},"categories":[5],"tags":[],"class_list":["post-13881","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development"],"acf":{"homepage_category_featured":false},"modified_by":"Matthew Deery","_links":{"self":[{"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/posts\/13881","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/users\/134"}],"replies":[{"embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/comments?post=13881"}],"version-history":[{"count":3,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/posts\/13881\/revisions"}],"predecessor-version":[{"id":30348,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/posts\/13881\/revisions\/30348"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/media\/13903"}],"wp:attachment":[{"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/media?parent=13881"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/categories?post=13881"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/tags?post=13881"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}