Getting Started with NPM

Node.js is an Open-Source Server Environment that helps implements Javascript in Server-Side Operations and allows setting up Web Applications on Chrome's V8 Engine. Ever since its inception, Node.js has been a hot technology in the market especially with its multiple features enhancing the productivity of the Development Team and allows the development of Scalable Applications. Node.js is supported by an incredibly flexible Javascript ecosystem and while Node.js is traditionally used to develop Backend Interfaces, it also allows the development of Command Line Interface Tools and Server-side rendering Applications, that has given Node.js a much impetus in the field of Development.

Node.js shines in the field of development, for its incredible-fast server-side operations and non-blocking, event-driven I/O that allows the implementation of real-time applications where the client and server can initiate communication freely.

To explain this further, let me take the example of Apache Web Server that is traditionally used to deploy PHP-based Web Applications. In Apache, all requests are single-threaded and follow a monolithic structure. This means that in Apache, a single thread waits for the file system to finish its operation before it can do anything else. Let's take the example of a Restaurant and a Waiter. In an Apache Web Server, the Waiter will first take your order and will not do anything else before your order has been served. This means, that before your order if you need a glass of water, that will not be served before your primary order has been served. After the primary order has been served, the Waiter can serve you a glass of water and so forth. This operation is known as Blocking.

In Node.js on the other hand, events are handled asynchronously. This means that events are handled continuously which are taken care of in the order they are raised. This is called "No Blocking Driven I/O". In Node.js, everything is single-threaded and all users are sharing the same thread. This makes Node.js incredibly fast and reliable for real-time processing and operations.

What is NPM?

While talking about Node.js, it is incredibly important to understand about NPM or Node Package Manager, which is the primary intent of our article. The concept of NPM is quite similar to Ruby Gems or Python Pip Packages, which revolves around the purpose of modularity. These packages are available online and hence can be downloaded by easy installation and managed in the project with dependency management. If you have worked with any Node.js Project or with any other Javascript Framework, you might have encountered NPM. The purpose of NPM further enforces the belief that using Third-Party Packages can sometimes be used to further optimize the applications rather than reinventing the wheel with each iteration.

In this article, we will be seeing how we can work with NPM and manage our Javascript Project with much efficiency and dive deep into some advanced features of NPM as well. Before you work with NPM packages, it is highly recommended that you have Node.js installed on your system so that we can work with it easily.

What are Packages?

If you have ever built an application using Javascript, you must have used the Package Manager to install the dependencies. These dependencies must be installed with your project to allow the building of your project and rendering on your Local Host and these packages are mentioned in the package.json file which serves as the map of the project. The package.json file will tell who created the project, what is the dependencies, and what are the individual version of the NPM packages we seek for our project. NPM is the largest package repository available in the world, and you can take a look at the various packages at NPM-JS to search for packages and functionality that you would like to add to your project.

The basic idea of having Packages is to further enforce the belief of having lightweight projects that can be integrated into your code freely, which can be downloaded and put to use from anywhere around the world.

Creating a package.json File

To create a Node Project, npm init command is used. This command will initialize the Node Project and ask for various things like Package Name, Version of the Project, Description, Entry Point, Git Repository, Author, and Keywords. The Package Name chosen should be unique if you are looking to publish your Node Project on NPM Store. After you fill in all the necessary details, you will be asked to affirm the Package.json File which will now initialize a Node Project with a Package.json file.

Once we start installing the new packages, we will see how the package.json file is updated.

Adding Packages Locally and Globally

Now, we have our package.json initialized, so let's move on and add some Packages to our Project. You can add packages to your Project, either locally or globally. If you are installing the packages locally, the packages will be available only in your project directory. If you are installing the packages globally, the packages will be available across your system and you can call it from any Node Project. So, let's start by adding a new package to our project. We will use the npm install command to install a new package:

$ npm install moment

This Command will install the moment package that is used for parsing and display dates.

You can see, that the package has been mentioned in our package.json file along with its version:

These are the regular dependencies that we can work on during the project. But what about a scenario, where you need a package only in your development environment but not in your production environment? We will use a separate command along with the ubiquitous npm install command to install our Dev Dependencies. Let's install the corona-tracker-stats (An NPM package developed by me) using this command:

$ npm install corona-tracker-stats --save-dev

Let's see what this results in:

You can now see that a separate Dev Dependency has been installed? But what exactly is it? It basically means that these are Development Tools and will not be included in your production environment. So we have now understood how we can download packages to local projects, but how can we add a package globally which can be accessible to all the projects?

If you want to add any Package globally you can just use a -g or -global flag to add the package globally which you can easily access from anywhere on your system. Let's add a package globally on our system:

$ npm install -g data_structure_models

Let's see what this results in:

So, here I have added the data_structure_models package (Another Package developed by me) globally onto my system. I can now access the Package from any project in my system without needing to install it locally for every project.

Further Operations with Packages

Many a time, you will get warnings about your project packages for being out of date or for being a deprecated version. If we want to check if the Packages need to be updated, we can run a simple command:

$ npm outdated

If we want to check for Packages that need to be updated globally, we can simply run the same command with a -g flag:

$ npm outdated -g

If you want to remove a Package from your Project, you can simply do that with an npm uninstall command. Not a bit of surprise here! Let's uninstall the moment package that we installed earlier:

$ npm uninstall moment

Let's see what this yields:

This is how easy it is to add, remove and update packages on NPM. Now before we move on with some further advanced topics, we can take a look at the semantic versioning of NPM packages. Let's take a look at our package.json file:

If you take a look at the corona-tracker-stats package in the devDependenices, you can take a look at its version: 1.0.1. The first number is usually the major new releases like a full new version of the software. The second number is minor releases like adding new functions to this major release or a new tool. And finally, the last numbers are patches and fixes, usually for bugs and such. Let's install a package named json and take a look at the package.json file:

Here we can see the version of the json package and see the Semantic Versioning that has been applied to denote the version of the package. Another tool that helps us manage our dependencies is the package-lock.json file. Every developer that is creating, managing, and publishing new packages on NPM, must follow versioning and it is quite common that packages often rely on each other.

So, in a Production Environment, it is quite common that these packages might break and cause a Build Failure. This is where the package-lock.json file comes to the rescue. When we install NPM packages, the package.json serves as the input while package-lock.json serves as the output. This new file will always ensure that whenever we are installing a pre-built project, the dependencies don't break while building. Let's say we are using a package whose version is 4.5.3 as used in our project but it has been updated to 4.7.2.

The package-lock.json file is instrumental in adding the packages that we have originally used in our project without much ado. Do note that all the packages that are installed in your project, are kept in a separate node_modules folder which is a huge bundle of all the Packages and Scripts required to keep your project up and running. Nevertheless, to say, it is sometimes a nightmare to maintain.

Advanced Topics

NPM keeps a cache of your modules so that you don't need to install them every time for your projects. If you are trying to install a module that should be working, but is not installed properly you can go with npm cache clean which will clear all your cache. Sometimes, the command might not work so you need to use a --force flag to remove all the cache.

$ npm cache clean --force

Cleaning the Cache is a troubleshooting step and must be used only when necessary. Another command that we can take a look at is npm audit command which will check the dependencies of your project and makes sure they are safe to use. Whenever you install a new package, the command npm audit runs automatically and tells you if there are any issues with the package. You can simply run an audit command using:

$ npm audit

This is what the command yields on my Command Line:

What is NPX?

Have you ever experienced installing CLI tools from npm packages that you use only once in order to create new projects? Some good examples are Angular CLI or create-react-app. Suppose I want to develop an Angular Project without installing the CLI tool. In that case, I will be going with NPX instead of NPM to temporarily install the package while we create a new project. Let's try it out installing the NPX first:

$ npm i -g npx

If you have the latest Node version, then NPX has already been pre-installed and you can just run this command, to verify if the NPX has been installed:

$ npx --version

Let's try out installing the Angular CLI tool and initializing a new application:

$ npx -p @angular/cli ng new myFirstApp

Now we have got the Angular App up and running and we did it without installing the actual tool. NPX, in turn, makes NPM a lot nicer and easier to work with since you don't always need to install global packages every time you need for development and testing.

Conclusion

This article was all that you need to know about NPM as a Javascript or a Web Developer so that you can easily work with Packages. The basic advantage of having NPM is the flexibility it gives Developers to manage the Project Dependencies irrespective of the System Environment. Before you start off with any new JS Project and wish to have Third-Party Packages, look no more. NPM can be your best buddy here. And if you are stuck, somewhere, don't panic: Refer back here which has everything you need to know about NPM.

~ Harsh Bardhan Mishra.