Have you ever been curious about how developers can handle the many packages and dependencies in their Node.js projects? Enter the Node Package Manager, which is at the core of the Node.js ecosystem. It makes sharing, installation, and management of code packages easy. Let’s check out NPM right from installation to the tips that will see you be a super user of it.

What is NPM?

npm is the standard package manager for Node.js.

NPM is the default package manager for Node.js. It enables developers to share and reuse packages of code. Through it, they can access the world’s largest software registry—hundreds of thousands of code packages are available in a couple of seconds. No matter whether you are working on a small project or a big application, NPM allows you to manage your dependencies the easy way.

in September 2022 over 2.1 million packages were reported being listed in the npm registry, making it the biggest single language code repository on Earth, and you can be sure there is a package for (almost!) everything.

It started as a way to download and manage dependencies of Node.js packages, but it has since become a tool used also in frontend JavaScript.

Yarn and pnpm are alternatives to npm cli. You can check them out as well.

Why Use NPM?

• Dependency Management Made Simple: Installing, updating, and managing libraries and frameworks is made easy.
• Community and Support: Get hold of a huge repository of open-source packages kept up-to-date by an enormous community.
• Automation: Automate repetitive tasks with NPM scripts.

The npm Command Line Interface (CLI)

The npm command line interface allows users to install and uninstall packages, check npm version, run scripts, create package.json files, and more.

As we progress through this tutorial, we will see some examples of how to use the command line interface.

On a Windows computer, we commonly refer to the command line interface as Command Prompt. On a Mac computer, it’s known as the terminal.

Essential npm Commands and Aliases

In this section, we’ll go over some of the most popular npm commands and what they do.

npm install

This command installs packages. You can install packages globally or locally. When a package is installed globally, we can access its functionality from any directory on our computer.

However, if we install a package locally, we can only use it in the directory where it was installed. As a result, the package cannot be used in any other folder or file on our computer.

npm uninstall

This command is used to uninstall a package.

npm init

The init command is used to initialize a project. When you run this command, it creates a package.json file.

When running npm init, you’ll be asked to provide certain information about the project you’re initializing. This information includes the project’s name, the license type, the version, and so on.

To skip the process of providing the information yourself, you can simply run the npm init -y command.

npm update

Use this command to update an npm package to its latest version.

npm restart

Used to restart a package. You can use this command when you’d want to stop and restart a particular project.

npm start

Used to start a package when required.

npm stop

Used to stop a package from running.

npm version

Shows you the current npm version installed on your computer.

npm publish

Used to publish an npm package to the npm registry. This is mostly used when you have created your own package.

How To Install npm

To install npm, you’d first have to install Node.js on your computer. To do this, head over to the Node.js website and download it. We recommended downloading the LTS version, as it is the most stable version of Node.js.

Installing Node.js automatically installs npm — no separate installation is needed.

How To Check the Current npm Version Installed on Your PC

After installing Node.js, run the following commands to see your Node.js and npm versions:

node -v

The next command will show the current npm version:

npm -v

npm Packages

In this section, we’ll go over how to install and uninstall npm packages both globally and locally, as well as how to update a package, list packages, change a package’s location, and search for installed packages.

We’ll start by talking about what a npm package is and showing some examples of packages used by developers.

What Is an Npm Package?

A package is simply a pre-built project that has been published to the npm directory. The creator and contributors of a package determine what it can do.

npm allows us to access a large number of projects created by other developers. Consider creating your own CSS framework; this would be a time-consuming task. As a result, developers create these projects and place them on the npm registry, making them easier to use and simplifying the development process.

One example of a npm package is Tailwind CSS, a utility-first CSS framework for creating web pages. Other popular npm packages include React, Chalk, Gulp, Bootstrap, Express, and Vue.js, among others.

Installation of Packages

npm manages downloads of dependencies of your project.

How To Install an npm Package Globally

When you install an npm package globally, you’re able to access it from any directory on your computer. In this section, you’ll see a practical way of installing a package globally by running an npm command in your terminal.

To install a package globally, use this command:

npm install -g <package-name>

Note that the -g flag in the command is what enables the npm CLI to install the package globally.

Here is an example

npm install -g http-server

The command above will install http-server globally on your computer. After the installation, you can use http-server in any directory.

Use Cases:

• Tools and utilities that need to be accessed from the command line.

Potential Pitfalls:

• Version conflicts if different projects require different versions of the same package.

How To Install an npm Package Locally

in the last section, we learned how to install an npm package globally. Now, let’s discuss installing one locally. Installing a package locally refers to the process of being able to use the package’s functionality in the current directory only. To do that, you would have to navigate to the directory that you want to install the package into, and in the terminal, you would execute the command:

npm install [package name]

Local packages are installed in the node_modules directory of your project and are only available within that project.

Here is an example:

npm install http-server

The command above will install http-server locally, meaning it will only function in this current directory.

Why Preferred:

• Avoids version conflicts by keeping dependencies project-specific.

How To Uninstall an npm Package Globally

If you no longer need a npm package, you can uninstall it from your computer.

To uninstall a package globally, use the following:

npm uninstall -g [package name]

Let’s see an example:

npm uninstall -g http-server

The command in the example above will remove the http-server package from your computer.

How To Uninstall an npm Package Locally

Uninstalling a locally installed npm package is similar to the previous example, but this time we will not use the -g flag.

Here’s the syntax:

npm uninstall [package name]

And here is a working example:

npm uninstall http-server

How To Update npm and Packages

Keeping your npm and packages up to date is the most effective way to keep bugs and security flaws out of your code.

To update npm to the latest version, use the following command:

npm install npm@latest - g

This updates npm globally on your computer.

When the creators of a package add new features or fix bugs, they update the package in the npm registry. To use the new features, you must first update your own package.

Here’s the syntax for the command you’d use to accomplish this:

npm update [package name]

And here’s a working example:

npm update http-server

The command above updates http-server to its latest version.

Additionally, just like in the previous sections, we can use the -g flag to update a package globally. That is:

npm update -g http-server

How To Change Location of npm Packages

For some users, without administrative permission to their computer, once an npm command is run, the console will alert with an error message. This can be fixed by running a new location or directory when installing your packages, instead of the default installation location.

Here is the syntax for doing that:

npm config set prefix [new directory path]

Once you’ve set the new path for the installation of packages, all your npm packages will be saved there by default.

How To List Installed npm Packages Globally

If you want to know how many packages are installed on your computer, npm has a command that will list them all.

Entering the command below will list all the packages installed globally on your device:

npm list -g

When you run the command above, you will see a list of all the packages you have previously installed on your computer.

In the following section, we’ll look at how to list the npm packages that are currently installed locally.

How To List Installed npm Packages Locally

Similar to the previous section, we can list locally installed npm packages.

To view a list of locally installed packages, run the following command in your terminal:

npm list

To see all of the packages installed for your project, run the command above in its directory.

How To Search for npm Packages

There are more than 1.3 million packages in the npm registry, and each of them has different functionalities. The right package depends on your needs and goals. There are packages you’re required to use when working with certain development stacks. For instance, a popular package in React is React Router which is used for routing in React. Other tech stacks need some other packages, too. Searching in a search bar on the npm website will give you information about the packages, and it’s good to know what they are and what each package does and comes along with its installation and features. Look for packages that are regularly maintained, i.e., packages that are currently being tested, fixed, and improved by community developers regularly.

More npm Files and Folders

All right, now that we have a basic understanding about what npm packages are and how we can use them in our project, let us get to know some of the other files and folders involved with an npm-based project.

The package.json File

The package.json file lets us keep track of all the installed packages in a certain project. You should create this file while developing a new project since it is where all the details about the project are stored: the name of the project, version, scripts, dependencies, and others. Simply create it by running either npm init or npm init -y in the terminal of the project, and then answer all the questions that the system asks to create the file.

This is after the creation of a package.json file, which stores all installed packages with their names and versions in the file. Another important use of the package.json file is when we clone projects in GitHub. When developers push their project to a repository, they leave out the node_modules folder, which contains our packages and their dependencies.

After cloning a repo, for you to generate your own folder, you do the command npm install in your project terminal. This will enable npm to go through the package.json file in the repository and install all the packages listed in it. Once that installation is done, you can then make use of all these packages that you had previously installed for that project before it is pushed to GitHub.

What Are npm Dependencies?

When we install packages, a node_modules folder is created where we can see other folders: each package has its own folder and subfolders. Therefore, at this point, you may be asking yourself why those other folders are there if you didn’t install them.

In your package.json file, your packages are being listed under the dependencies key because your project is “depending” on those packages to get the work done. The other folders created in your node_modules folder are additional packages that have been installed, depending on the packages you have installed. This allows you to easily confirm this by looking up a package.json file for any installed package to review the included dependencies.

What Are npm Scripts?

Simply stated, this means that npm scripts are your way of providing custom scripts in your package.json file in order to do a little work for you automatically. You can also create scripts of your own with regard to doing a lot of other things, such as code minification of your CSS, restarting the server on changes, and building a project to be ready for production.

Typically, a test script comes with package.json when created. There is a lot we can do using scripts: start a server, minify our CSS, and even bundle our code for production.

A good example of this is the widely used npm run start in React, which spins up our development server at localhost:3000. We can actually run our other scripts by doing this same syntax of command as above:

npm run [script-name]

Summary

Eventually, npm turns into one of the most necessary tools for developing web applications based on Node.js. npm gives access to millions of deployed projects by other developers, which are in turn free to use and enhance one’s own project.

A versatile set of packages is within npm, including CSS frameworks, file bundlers, JavaScript frameworks, backend tools, and many others. Most of these projects are safe for others to use while developing and are often maintained and updated.

Now web app development is slightly less of a headache with npm; there is no need to rebuild the wheel. We just have to install another developer’s package and save ourselves hours of coding.

Also, as developers we also have the permission to build our own packages in the npm environment and publish for other developers to use. Just like users of the WordPress community are helping to contribute towards the overall success and development of the WordPress platform, same can be done by members of the Node.js community.

Have you created any tool that aids in your development phase that you’d love other developers to use? Share your thoughts in the comment section!

Happy coding!

Leave a response to this article by providing your insights, comments, or requests for future articles.

Share the articles with your friends and colleagues on social media.

Let’s Get in Touch! Follow me on :

>GitHub: @gajanan0707

>LinkedIn: Gajanan Rajput

>Website: https://mrcoder701.com

>YouTube: mrcoder701

> Instagram: mr_coder_701