06 April 2014
Bower - a UI dependency management tool
Building UI related code has evolved during last years due to the introduction of new modern Javascript frameworks and to the new possibilities of usage that the javascript language has been extended like server side usage with Node.JS for example.
There are several popular build tools nowadays to manage project dependencies, like maven and others. But UI related dependencies aren't managed very well under these tools.
Bower is a lightweight UI related dependency manager tool, it depends on Node.js to run and npm as package manager
Prerequisites
Bower depends on Node and npm. It's installed globally using npm:
npm install -g bower
Also make sure that git is installed as some bower packages require it to be fetched and installed.
Creating your project's bower.json file
Configure your project's dependency in a file called bower.json, the default bower configuration file for your project:
{
"name": "myApp",
"version": "1.0.0",
"ignore": [
"*/.",
"node_modules",
"bower_components",
"test",
"tests"
],
"devDependencies": {
"jquery": ">=1.10.2",
"angular": ">=1.2.1",
"angular-route": ">=1.2.1",
"angular-resource": ">=1.2.1",
"angular-cookies": ">=1.2.1",
"angular-animate": ">=1.2.1",
"angular-scenario": ">=1.2.1",
"angular-mocks": ">=1.2.1",
"bootstrap": ">=3.1",
"requirejs": ">=2.1.9",
"requirejs-text": ">=2.0"
}
}
. name and version: Here you place your project name and version.
. ignore: Here we're telling Bower that it should ignore folders like "node_modules" "tests" and "bower_components" since these folders are used for development and test scenarios and are not needed during production deployment or application runtime.
. devDependencies: Here we're listing our development dependencies, which are a list of other bower packages available for download, like jQuery, requireJS and angularJS libs. Notice the >= symbol, this will tell Bower to fetch version "XXX" or above of this particular artifact. There are other options as well to fetch isolated version ranges.
After that we run the command
bower install
and Bower will fetch our necessary dependencies and place them under "bower_components" folder as per default.
.bowerrc file
The .bowerrc file enables custom configuration for Bower. For example we can determine a custom install directory:
{
"directory": "public/bower_components"
}