Managing front-end javascript dependencies using Node Package Manager and bower

Maintaining the dependencies of libraries and packages can be cumbersome in the modern development environment if not handled carefully. It is impractical to include the external packages in code management systems. Dependencies can make setting up of new development environment a pain and deployment even harder.

Node Package Manager

Let us take a look at how to properly handle node dependencies with node package manager. Node package manager is the largest software registry and hosts libraries for node. If you have already installed nodejs, you have already installed npm (node package manager). If you are on Ubuntu you can install node with

curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
sudo apt-get install -y nodejs

If you are using any other operating systems use the appropriate installer from the official download page. You should be able to check if the installation is done properly by checking version numbers as follows.

ravi@ubuntu:~$ node --version
v6.11.0
ravi@ubuntu:~$ npm --version
3.10.10

Change to your project directory and issue the command

npm init

This will initialise a node project. It asks you a series of questions about the project you are going to build. Answer the questions (you can skip them by pressing enter, npm takes default answers) and get done with it, you now have a node project directory. The output looks something like this.

    This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (frontend) 
version: (1.0.0) 
description: 
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: 
license: (ISC) 
About to write to /home/ravi/cowhite/blogtests/frontend/package.json:

{
    "name": "frontend",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "license": "ISC"
}

Is this ok? (yes)

You should be seeing a new package.json file in your working directory. This file contains the whole information about the project.

The next step is to install packages that your project needs. The syntax of the command to install a package is

npm install <package_name>

This command will install the package only for the current project and the package will not be accessible from other locations. To install a node package globally - that can be accessed from any location - use the global. The syntax will be

npm install -g <package_name>

Go ahead and install a node package called node-sass with

npm install node-sass

You will see that npm has created a node_modules directory. All the packages for the project are installed into this directory. That is good. But how do we manage dependencies with npm? We need to use the --save flag while installing a package. Now try this.

npm install --save node-sass

And look into the pacakage.json file. We can find that the package that we have just installed, node-sass is listed as a dependency, along with its version number.

{
    "name": "frontend",
    "version": "1.0.0",
    "description": "A test of management capabilities of npm",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "license": "ISC",
    "dependencies": {
        "node-sass": "^4.5.3"
    }
}

Make sure that this package.json file is included in the version control system and is distributed along with the source code of project. To install dependencies in a new environment use the command

npm install

This will install all the dependencies of the project in a go. We can automate installation of dependencies in a server environment with this.
It is also possible that you require some packages only in development environment. For example, node-jslint is a package that checks the syntax of javascript code. It is not useful in the production environment, but is only needed for development. Such packages can be installed with the flag --save-dev as follows.

npm install --save-dev node-jslint

When we install a package with this flag, the y are listed in package.json as a development dependency. The package.json file will now look like this.

{
    "name": "frontend",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "license": "ISC",
    "dependencies": {
        "node-sass": "^4.5.3"
    },
    "devDependencies": {
        "node-jslint": "^0.1.1"
    }
}

In the server install only the production dependencies with

npm install --only=prod

Similarly, we can use npm install --only=dev to install only development dependencies.

Bower

While npm is a package manager for node libraries, bower is a package manager for javascript libraries and is mainly useful for managing front-end components like html, js, css. To be honest we do not anymore need bower in modern applications and npm serve our purposes, because almost all popular packages/libraries have been supporting npm.

We need npm to install bower because bower is itself a node package. Install bower with

npm install -g bower

If you are on linux systems, you must run the command as a superuser.

sudo npm install -g bower

The flag -g specifies that the package will must be installed globally, so that bower is accessible from any directory.

Bower works just like npm, with same kind of syntax. To initialise a bower project directory use the command

bower init

The asks a series of questions like npm does. Answer them and confirm to initialise the project. This will create bower.json file that has all the information regarding the project. This is similar to package.json for npm.
To install a library using bower use the syntax

bower install <package_name>

Just like npm we can use the --save and --save-dev flags. Go ahead and install bootstrap with

bower install --save bootstrap

This will install bootstrap into a directory bower_components and the updated bower.json looks like

{
    "name": "frontend",
    "authors": [
        "Ravi Teja P <rvteja92@gmail.com>"
    ],
    "description": "",
    "main": "",
    "license": "MIT",
    "homepage": "",
    "ignore": [
        "**/.*",
        "node_modules",
        "bower_components",
        "test",
        "tests"
    ],
    "dependencies": {
        "bootstrap": "^3.3.7"
    }
}

To install dependencies already listed in bower.json run

bower install

To install only production dependencies use the flag --production or -p.

bower install --production

Make sure that bower.json and package.json files are saved along with the other code into your version control systems and do not include node_modules or bower_components directories.