What is NPM package.json, npm init, and npm install?

Introduction

Are you a software developer? And you started to use npm and curious what is package.json file?

If you’re a bit intimidated by the command line when using npm, don’t be; you only need to know when to use it and how to use it properly.

Another thing to point out, if you think that there are many configurations needed to start your project, my advice is to start with the minimum configuration and build from there.

That’s why this article focuses on the package.json file, npm init and npm install, and then you can play and experiment further.

What is a Package.json File?

The package.json file represents various metadata relevant to the project. Moreover, it helps npm identify the project’s information and dependencies, and it typically resides at the root directory of a project.

Therefore, a package.json primary purpose is to hold and represent the various metadata and configuration related to the project.

In simple terms, it is a manifest file that describes your project or application.

When is it recommended to have and not to use the package.json file?

It is highly recommended and necessary to have a package.json file:

• If you want to create a public package (if you don’t know what’s a package is? we’ll see it in the next section)
• If you are working with a team

Finally, it is not recommended and necessary to have a package.json file:

• If you’re experimenting or working alone with a website or web application and don’t need to share it outside of your local computer, you don’t need to have a package.json file
• If you aren’t going to use npm or yarn as your package manager

What’s a package?

A package comprises JavaScript’s one or more modules and a package.json file representing the package’s metadata.

Let’s see an example of a package below.

As you can see in this example, we have an Axios package installed in our project.

Once installed, a node_modules directory is going to be created for packages to reside.

By listing the package’s directories and files, you’ll see that this package also has a package.json file and its modules reside inside the lib directory.

What’s Inside the Package.json file?

Let’s take a look at what’s inside the package.json file.

Remember that a package.json file is in JSON format.

Once you have misstructured the JSON file, there’s a higher chance you may get some errors along the way.

JSON.parse error is an excellent example of an error when you have misstructured your package.json file.

Let us see an example below.

Package.json Metadata

In this section, we’re going to discuss the metadata of the package.json file. It is essential to understand the baseline configuration and project dependencies.

Metadata name, version, description, license, and keywords

The keys such as name, version, description, license, and keywords are the metadata that identifies the project you are working with.

It acts as a baseline for developers and other team members to get information about the project.

Let us see an example below.

Project Dependencies (regular dependencies and devDependencies)

Project or Regular Dependencies

A particular section of the package.json file holds and contains dependencies.

These dependencies are the packages that the project relies on to function properly. Moreover, if an individual package also has dependencies, it is installed along with the package.

You can install a new package by running the install command npm install [package name]. (More on the npm install in the later section)

Project Development Dependencies

Another critical thing to understand is the separation of dependencies needed for production and dependencies needed for development.

For example, in production, you’re not going to watch your JS, CSS, HTML, or any related file for changes and refresh the running app.  

You can install a new package as dev-dependencies by running the command npm install [package name] –save-dev.

Let us see an example of a package.json file with dependencies and devDependencies.

The npm Commands (npm init and npm install)

Now that we understand the purpose of a package.json file, we can use the command line and type npm init to generate a new one. Have you tried it already?

OK, let’s see how to use this command even further.

Using npm init

The primary purpose of npm init is to initialize your project.

Once you have decided to initialize your project by typing npm init in the command line.

Then a prompt begins to ask for different input step by step; here is the following order:

• project’s name
• version
• description
• entry point (a JavaScript file as the entry point of your project)
• test command
• git repository
• keywords
• license

Note: The npm init command provides a suggestion next to the prompt; you can press enter to accept the default suggestion to move on to the next question/prompt.

Hopefully, you didn’t get bored with the steps above. Finally, once you have run through the steps, as expected, a generated file named package.json is placed in the root directory.

Let us see an example below.

Using npm init -y or –yes

If you felt that it is a long process and don’t want to go typing one by one and setting up the details through the steps using npm init, you can then use npm init -y or npm init –yes to create and use the defaults instead.

Let us see an example below.

Using npm install and uninstall

Once you have successfully initialized your project and a package.json is already available, you can install some packages with your project.

Let’s try to see how we can install packages.

Let’s say you want to install jquery and jquery-ui, and you can then type npm install jquery jquery-ui in the command line.

Great, you have installed those two popular packages. How about removing them? It is easy, and you can then type npm uninstall jquery jquery-ui in the command line.

Fig. 7 Command npm uninstall

Using npm install –save-dev

At last, we’re at the last section of this article. By typing the npm install [package name] –save-dev on the command line, you’re telling the npm that you’ll be installing a package needed for development.

An excellent example package to install is web-pack, although we weren’t going to discuss web-pack.

OK, let’s see how we can install web-pack in our project as dev-dependencies.

You can install web-pack by typing npm install –save-dev webpack webpack-cli or npm install webpack webpack-cli –save-dev in the command line.

Summary

This post answered the following: what’s a package.json file,  when you need one, and how to create one. Not only that, we have seen the metadata of the package.json file. Lastly, we have explored how to install a package as our project dependencies and dev-dependencies.

I hope you have enjoyed this article. Stay tuned for more. Until next time, happy programming!

Please don’t forget to bookmark, like, and comment. Cheers! And Thank you!