Bower – A package manager for the web

Bower logo

Bower is a package manager for the front-end part of your web app. It installs the right versions of the packages (Javascript, html and css libraries) you need and their dependencies.

Bower keeps track of the packages under his watch in a manifest file, bower.json. If multiple packages depend on a package – jQuery for example – Bower will download jQuery just once. This is known as a flat dependency graph and it helps reduce page load.

Install Bower by giving the following command:

npm install -g bower

Then you can create a bower.json file by issuing the command:

bower init

The bower.json file specifications can be found here and below an example is explained:

{
  "name": "projectName",
  "description": "Project Description",
  "version": "0.0.0",
  "appPath": "src/main/webapp",
  "testPath": "src/test/javascript/spec",
  "dependencies": {
    "angular": "1.4.8",
    "bootstrap": "3.3.5",
    "jquery": "2.1.4"
  },
  "devDependencies": {
    "angular-mocks": "1.4.8",
    "angular-scenario": "1.4.8"
  },
  "overrides": {
    "bootstrap": {
        "main": [
            "dist/js/bootstrap.js",
            "dist/css/bootstrap.css",
            "less/bootstrap.less"
        ]
    }
  },
  "resolutions": {
    "angular": "1.4.8",
    "jquery": "2.1.4"
  }
}

name:

Required. Type: String. The name of the package as stored in the registry.

description:

Recommended. Type: String. Any character. Max 140.

resolutions:

It may be needed by a gulp, grunt library in order to override default package entry files, which are declared in their bower.json files.

resolutions:

Type: Object. Dependency versions to automatically resolve with if conflicts occur between packages.

version:

Deprecated. Still it may be needed by a gulp, grunt library.

appPath:

Self-explanatory. It may be needed by a gulp, grunt library.

testPath:

Self-explanatory. It may be needed by a gulp, grunt library.

For versioning you can use node semantic versioning symbols. More specifically based on semver, you can use

  • Hyphen Ranges X.Y.Z – A.B.C
    1.2.3-2.3.4
    Indicates >=1.2.3 <=2.3.4
  • X-Ranges
    1.2.x
    1.X
    1.2.*
  • Tilde Ranges
    ~1.2.3
    ~1.2
    Indicates allowing patch-level changes or minor version changes.
  • Caret Ranges ^1.2.3 ^0.2.5 ^0.0.4Allows changes that do not modify the left-most non-zero digit in the [major, minor, patch] tuple
    • ^1.2.x (means >=1.2.0 <2.0.0)
    • ^0.0.x (means >=0.0.0 <0.1.0)
    • ^0.0 (means >=0.0.0 <0.1.0)

 

Finally another file related to bower configuration found on the root of our web app is .bowerrc. A common use is to declare to which directory the packages are going to be installed as shown below:

{
    "directory": "src/main/webapp/bower_components"
}
Bower – A package manager for the web

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.