This article will explain how npm works and teach you how to start a project with it and install additional packages.<\/p>
Download complete HTML cheat sheet<\/a><\/p> \n\n\n\n\n\n Node package manager (npm) is one of the largest software registries in the world. It comes bundled with node.js, an open-source server environment.<\/p>\n <\/div>\n\n\n\n<\/p> Here are the three defining roles of npm:<\/p> Every npm project contains package.json<\/strong>, a file located in the root directory. It contains the metadata of npm projects or packages, such as package versions and contributors.<\/p> The package.json<\/strong> file simplifies identifying, managing, and installing a package. That’s why it’s essential to include package.json<\/strong> before publishing projects on the npm registry.<\/p> Here is an example of what a package.json<\/strong> file contains:<\/p> To help you understand package.json<\/strong>, we’ll go over the most important lines from the previous example:<\/p> The line above defines the package name<\/strong>. It should be less than 214 characters and consist of lowercase letters only. If you want to publish a tool on the npm registry, its name should differ from any existing packages.<\/p> The version <\/strong>specifies the current version of your project, and it should follow the semantic versioning rules<\/a>.<\/p> Include the package information in the description <\/strong>line to help users discover your project on the npm registry.<\/p> The main <\/strong>field specifies the entry point or main file of your project. If this property is left blank, npm will automatically set its value to index.js<\/strong>.<\/p> The scripts <\/strong>property contains commands that run tasks for your project. An npm user can take advantage of this field to pass arguments to the CLI without retyping them.<\/p> This field lists all the dependencies <\/strong>or packages used in the project. When you install a tool using the The repository <\/strong>property contains the URL of the source code. In this example, GitHub<\/a> is the package location, and Git<\/a> is the version control system.<\/p> This field includes an array of keywords <\/strong>related to what the package does, helping npm users locate packages via searches. Omit this property if you won’t publish the project on the npm registry.<\/p> Use the author <\/strong>property to state the creator of the project.<\/p> This line defines the license <\/strong>of the npm project, letting people know if they can use it without any restrictions.<\/p> For information on the other fields of package.json<\/strong>, refer to package.json’s official documentation<\/a>.<\/p> Dependencies and devDependencies are fields in package.json<\/strong> that list all packages a project depends on.<\/p> The dependency field includes all of the third-party packages that are required for your project to work.<\/p> On the other hand, the devDependency property contains packages that are only necessary during development.<\/p> Dependencies and devDependencies are installed via the Before using npm, make sure that node.js<\/a><\/strong> is installed. To do so, open your terminal and run this command:<\/p> The terminal window should display the node.js<\/strong> version installed on your system:<\/p> Do the same for npm by using the following command:<\/p> It should also return a version number like this:<\/p> If node.js<\/strong> hasn’t been installed yet, download it from the official website<\/a>.<\/p> In the following sections, we’ll discuss some of the basic npm commands.<\/p> \n\n\n If you are using Hostinger VPS, you can choose a operating system template<\/a> with Node.js already pre-installed. To learn more about this option, visit Hostinger's Node.js VPS<\/a> page. <\/p>\n <\/div>\n\n\n\n<\/p> To start a new project, run the following command from the npm CLI:<\/p> This command will create a project’s package.json<\/strong> file in the current directory.<\/p> After running the You’ll be prompted to input the project information in the following order:<\/p> Respond to each of the Here’s an example of how we fill the package information:<\/p> After entering all the project details, Type yes<\/strong> and press Enter<\/strong> to save the package.json <\/strong>file. You can modify it later by editing the file or running the If you want to generate the package.json<\/strong> file with default values without responding to the npm will create a package.json <\/strong>file with the default values, like this:<\/p> Once you have created the package.json<\/strong> file, you can add any node packages to the project.<\/p> It’s essential to learn how to install a package when getting started with npm.<\/p> To add a package to your project, run either of these commands:<\/p> \n\n\n In the commands above, replace with the name of the module you want to install.<\/p>\n <\/div>\n\n\n\n<\/p> For example, if you wish to install express<\/a>, a popular web framework that simplifies standard web development processes, use the following command:<\/p> This command will install the express module in the node_modules<\/strong> folder in the root project directory. Note that node_modules<\/strong> will only appear after installing the first package.<\/p> If the package is successfully installed, the terminal will display a message like this:<\/p> The package.json <\/strong>will also include the module in the To install any tools that will only be used in the development environment<\/a>, use the following command:<\/p> For example, you may want to use nodemon<\/a> to reload your project when any file changes. To install this tool, type this into the terminal:<\/p> Once nodemon is installed, the terminal will show this message:<\/p> The npm will also add the In case you want to install an npm package to be used from the command line, enter either of the following commands:<\/p> Be sure to replace the To keep your code and tools secure and stable, regularly update local and global packages downloaded from the npm registry.<\/p> Before updating any npm package, check whether any of them are outdated. You can check which npm packages in your project or system have updates available by running this command from the root directory:<\/p> To check for outdated global packages in the system, run the following command:<\/p> After getting the list of outdated modules, you can either update all the packages or just one of them.<\/p> To update all the packages in your project, run this from the command line:<\/p> To update a single module, input this:<\/p> Remember to replace To update all global packages in the system, run the command below:<\/p> In order to update a single global package, enter the following command, replacing To update your Node package manager itself, run this command:<\/p> Once the latest version of npm has been installed, the terminal window will display a message like this:<\/p> For other npm CLI commands, check out npm’s command documentation<\/a>.<\/p> npm is a popular package manager that lets JavaScript developers share and deploy useful packages quickly and easily.<\/p> Every npm project contains a file called package.json <\/strong>in its root directory. This file includes the project’s metadata, which lets anyone find the module on the npm repository.<\/p> Aside from containing the critical project information, package.json<\/strong> also stores the list of the project’s dependencies required for a project to function.<\/p> Moreover, packages developers have installed to assist them during the development process will be included in the package.json <\/strong>under devDependencies.<\/p> Here is the overview of npm commands to help you get started and perform basic tasks with this package manager:<\/p> We hope this article has helped you understand what npm is and provided some pointers on how to start working with it. Feel free to leave a comment below if you have any questions.<\/p>\n","protected":false},"excerpt":{"rendered":" With npm, JavaScript developers can discover and install code packages into their networking applications or server-side projects. A node.js package is a directory with one or more JavaScript modules or libraries used to add various features to applications or scripts. Without packages, a developer or software engineer has to write new code for each functionality […]<\/p>\nWhat Is npm?<\/h2>\n
How Does npm Work?<\/h2>
\n
What Is package.json?<\/h2>
{\n \"name\": \"hostinger-npm\",\n \"version\": \"1.0.0\",\n \"description\": \"npm guide for beginner\",\n \"main\": \"beginner-npm.js\",\n \"scripts\": {\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n },\n \"dependencies\": {\n \"express\": \"^4.17.1\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https:\/\/github.com\/hostinger\/example.git\"\n },\n \"keywords\": [\n \"npm\",\n \"example\",\n \"basic\"\n ],\n \"author\": \"Hostinger International\",\n \"license\": \"MIT\",\n}<\/pre>\"name\": \"hostinger-npm\",<\/pre>
\"version\": \"1.0.0\",<\/pre>
\"description\": \"npm guide for beginner\",<\/pre>
\"main\": \"beginner-npm.js\",<\/pre>
\"scripts\": {\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n},<\/pre>\"dependencies\": {\n \"express\": \"^4.16.4\"\n},<\/pre>npm install<\/code> command, that project will be automatically inserted here.<\/p>\"repository\": {\n \"type\": \"git\",\n \"url\": \"https:\/\/github.com\/hostinger\/example.git\"\n},<\/pre>\"keywords\": [\n \"npm\",\n \"example\",\n \"basic\"\n],<\/pre>
\"author\": \"Hostinger International\",<\/pre>
\"license\": \"MIT\",<\/pre>
What Are Dependencies and devDependencies?<\/h2>
npm install<\/code> command with the --save<\/code> and --save-dev<\/code> flags.<\/p>How to Install npm Modules and Start Projects?<\/h2>
node -v<\/pre>
V14.17.5 <\/pre>
npm -v<\/pre>
6.14.14<\/pre>
![\"node.js](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/09\/node-js-1024x433.png\")
<\/a><\/figure><\/div>Pro Tip<\/h4>\n
Initializing a Project with npm<\/h3>
npm init<\/pre>
npm init<\/code> command, the terminal will display this information:<\/p>This utility will walk you through creating a package.json file.\nIt only covers the most common items, and tries to guess sensible defaults.\n\nSee `npm help init` for definitive documentation on these fields\nand exactly what they do.\n\nUse `npm install <pkg>` afterwards to install a package and\nsave it as a dependency in the package.json file.\n\nPress ^C at any time to quit.\npackage name: (test-npm)<\/pre>
\n
npm init<\/code> prompts by typing in custom values before pressing Enter<\/strong>. Alternatively, hit Enter<\/strong> without entering anything to keep the default values or the ones in parentheses.<\/p>name: (test-npm)hostinger-npm\nversion: (1.0.0)1.0.0\ndescription: npm guide for beginner\nentry point: (index.js) beginner-npm.js\ntest command:\ngit repository:\nkeywords: npm, example, beginner\nauthor: Hostinger International\nlicense: (ISC) MIT<\/pre>
npm init<\/code> will display the preview of the package.json<\/strong> file like this:<\/p>{\n \"name\": \"hostinger-npm\",\n \"version\": \"1.0.0\",\n \"description\": \"npm guide for beginner\",\n \"main\": \"beginner-npm.js\",\n \"scripts\": {\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n },\n \"keywords\": [\n \"npm\",\n \"example\",\n \"beginner\"\n ],\n \"author\": \"Hostinger International\",\n \"license\": \"MIT\", \n}\n\nIs this OK? (yes)<\/pre>npm init<\/code> command again.<\/p>npm init<\/code> prompts, use this command:<\/p>npm init --yes<\/pre>
{\n \"name\": \"mymac-MacBok-Pro\",\n \"version\": \"1.0.0\",\n \"description\": \"\",\n \"main\": \"index.js\",\n \"scripts\": {\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n },\n \"keywords\": [],\n \"author\": \"\",\n \"license\": \"ISC\"\n}<\/pre>Installing npm Modules in Your Project<\/h3>
npm install <package-name>\n\/\/ OR\nnpm i <package-name><\/pre>
Pro Tip<\/h4>\n
npm install express<\/pre>
![\"Terminal](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/09\/express-module.png\")
<\/a><\/figure>dependencies<\/code> field:<\/p>{\n \"name\": \"hostinger-npm\",\n \"version\": \"1.0.0\",\n \"description\": \"npm guide for beginner\",\n \"main\": \"beginner-npm.js\",\n \"scripts\": {\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n },\n \"keywords\": [\n \"npm\",\n \"example\",\n \"basic\"\n ],\n \"author\": \"Hostinger International\",\n \"license\": \"MIT\",\n \"dependencies\": {\n \"express\": \"^4.17.1\"\n }\n}<\/pre>Installing a Package As a Development Dependency<\/h3>
npm install <package-name> --save-dev<\/pre>
npm install nodemon --save-dev <\/pre>
![\"Terminal](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/09\/nodemon-installed.png\")
<\/a><\/figure>devDependencies<\/code> section with the new data to the package.json<\/strong> file like this:<\/p>{\n \"name\": \"hostinger-npm\",\n \"version\": \"1.0.0\",\n \"description\": \"npm guide for beginner\",\n \"main\": \"beginner-npm.js\",\n \"scripts\": {\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n },\n \"keywords\": [\n \"npm\",\n \"example\",\n \"basic\"\n ],\n \"author\": \"Hostinger International\",\n \"license\": \"MIT\",\n \"dependencies\": {\n \"express\": \"^4.17.1\"\n }\n \"devDependencies\": {\n \"nodemon\": \"^2.0.12\"\n }\n}<\/pre>Installing a Module Globally on Your System<\/h3>
npm install <package-name> --global\n\/\/ OR\nnpm i <package-name> -g<\/pre>
<package-name><\/code> with the module name.<\/p>Updating npm<\/h3>
npm outdated<\/pre>
npm outdated -g --depth=0<\/pre>
npm update<\/pre>
npm update <package-name><\/pre>
<package-name><\/code> with the name of the package you want to update.<\/p>npm update -g<\/pre>
<package-name><\/code> with the module name:<\/p>npm update -g <package-name><\/pre>
npm install npm@latest -g<\/pre>
![\"Terminal](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/09\/latest-npm.png\")
<\/a><\/figure>![\"Hostinger](\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/11\/Web-hosting_in-text-banner.png\")
<\/a><\/figure>Conclusion<\/h2>
\n
npm -v<\/pre>
\n
npm init<\/pre>
\n
npm install <package-name><\/pre>
\n
npm install <package-name> --save-dev<\/pre>
\n
npm install <package-name> --global<\/pre>
\n
npm update<\/pre>
\n
npm install npm@latest -g<\/pre>