Creating your First npm Package

Before you create a package, you should be familiar with package.json file.

package.json is a file that holds package metadata and gives information to npm when you execute the command "npm view".

• To start with, in local terminal, install the "react" package.

• Open package.json file and scan through the details in the file.

At this point, you may not understand everything in package.json. However, you can clearly notice the following::

• Name, version, license type, source code repository.

• In "dependencies":, you can view the list of other packages that react depends on.

• In "maintainers": , you can view the various authors/collaborators for the package.

So far, you have consumed packages available in the npm registry.

Considering you have multiple developers in your team, working on a project "MaxBot". All of them need to have the same set up in their local.

So, try to create your own package "maxbot" with all software that the project needs. This package can then be used by rest of the team.

Assume MaxBot requires

• bootstrap version 3.2.0

• latest version of react

• latest version of jasmine for testing in dev.

First, create a directory "maxbot" in your environment using the following command:

>mkdir maxbot
>cd maxbot

This is the directory where all project dependencies will be installed. Now, create a package.json file using:

npm init

You will need to answer a series of questions. By the end of this, you can see a package.json file created in "maxbot" folder.

By default, npm installs the latest version of a software. However, sometimes you might want to use an older and more stable version of the software. For your project, you will need to install bootstrap 3.2.0.

In your terminal, check for the bootstrap versions available and install the required version.

//View the latest version
>npm view bootstrap version 
//View all available versions
>npm view bootstrap versions
//Install required version
>npm install bootstrap@3.2.0 --save

You can notice that an entry is made in the "dependencies": section of the package.json file.

Note: --save ensures the application dependencies are added in package.json file.

Now, install the latest version of react.

>npm install react --save

You will notice that react has dependency on a number of other packages. Hence many other packages are also installed in "maxbot/node_module/react/node_module"

//This will list all packages installed for the maxbot project.
>npm list

Finally, you will want to use the testing framework **jasmine ** in dev. However, you do not need this package to be installed when the project moves to production.

Go ahead and install jasmine and use the command --save-dev

>npm install jasmine --save-dev

You will notice that jasmine is registered as a dependency for development in package.json file under "devDependencies" section.

Go ahead and distribute your package with other developers in your team.

At any point in time, you can view the version of software used by your project, using:

>npm list

This lists the entire tree of dependency packages installed. You can restrict the number of branches shown, using the command "--depth"

>npm list --depth 0
>npm list --depth 1

Try these commands on your playground to see this yourself!