Manage Git-driven Packages with Bower

Bower is a handy tool by Twitter that serves as a front-end package manager. It’s based on node.js and compliments other related tool such as Grunt that became popular in the WordPress Core project itself.

Bower uses Git to manage repositories, and given the popularity of GitHub (and other git-driven projects, for that matter) it makes the component management much easier.

You’ve probably used Composer already, which is a dependency manager for PHP. There are various libraries that could be found in both repositories, but Composer is more of a backend-centric manager while Bower is mostly used for frontend libraries. PHP developers could find Bower useless if it’s the only tool that requires NPM (the Node Packaged Modules) while Composer requires only PHP. However, if your stack uses other node.js tools such as Grunt, you could make use of the integration between both tools (and others).

Assuming that you have npm installed already, you could install Bower globally for your system:

[bash]

npm install -g bower

[/bash]

This would install Bower in your ~/.npm folder with all related dependencies required by the library itself.

For a given project, we could enter the project folder and initialize the configuration file for the project. There is a handy CLI wizard that would lead you through the setup once you type bower init:

[bash]

bower init

[?] name: bower-demo
[?] version: 0.1
[?] description: Demo Bower project
[?] main file: .
[?] keywords:
[?] authors: mpeshev <[email protected]>
[?] license: MIT
[?] homepage: http://devwp.eu/
[?] set currently installed components as dependencies? No
[?] add commonly ignored files to ignore list? Yes
[?] would you like to mark this package as private which prevents it from being accidentally published to the registry? Yes

[/bash]

As a result, this would generate our bower.json configuration file:

[javascript]

{
name: ‘bower-demo’,
version: ‘0.1’,
authors: [
‘mpeshev <[email protected]>’
],
description: ‘Demo Bower project’,
main: ‘.’,
license: ‘MIT’,
homepage: ‘http://devwp.eu/’,
private: true,
ignore: [
‘**/.*’,
‘node_modules’,
‘bower_components’,
‘test’,
‘tests’
]
}

[/javascript]

To find a given library in the repository, we could run a bower search:

[bash]

bower search ember.js
Search results:

ember.js git://github.com/emberjs/ember.js

[/bash]

If you just type ember it would find various Ember-related repositories as well.

We could add the project to our dependencies list and specify a version. To keep that up-to-date, we could make use of the latest version in the repository as well. In the ember context, we could strip down the ignore list from our config (if we don’t have tests or other node modules or anything) and wrap the config file by adding the new dependencies:

[javascript]

{

“private”: true,
“dependencies”: {
“ember.js”: “>=1.2.0”
}
}

[/javascript]

Running bower install in our project folder would install the latest available ember.js version (currently 1.3.0-beta3):

[bash]

[nofearinc@nofearinc bower-demo]$ bower install
bower ember.js#>=1.2.0 cached git://github.com/emberjs/ember.js.git#1.2.0
bower ember.js#>=1.2.0 validate 1.2.0 against git://github.com/emberjs/ember.js.git#>=1.2.0
bower ember.js#>=1.2.0 new version for git://github.com/emberjs/ember.js.git#>=1.2.0
bower ember.js#>=1.2.0 resolve git://github.com/emberjs/ember.js.git#>=1.2.0
bower ember.js#>=1.2.0 download https://github.com/emberjs/ember.js/archive/v1.3.0-beta.3.tar.gz
bower ember.js#>=1.2.0 extract archive.tar.gz
bower ember.js#>=1.2.0 resolved git://github.com/emberjs/ember.js.git#1.3.0-beta.3
bower ember.js#>=1.2.0 install ember.js#1.3.0-beta.3

ember.js#1.3.0-beta.3 bower_components/ember.js

[/bash]

By default Bower installs libraries in the bower_components folder. If you want to change the folder, you could create a .bowerrc file in your project (next to bower.json) with the following snippet:

[javascript]

{
“directory”: “ext”
}

[/javascript]

This would install Bower libraries in the ext directory, which could be lib, assets or anything you would prefer.

Additionally, you could simple install remote packages (and also specify a given version):

[bash]

bower install <somepackage>

bower install <somepackage>#<someversion>

[/bash]

For Grunt integration, you could integrate Bower into Grunt with the grunt-bower-task. This would allow you to bundle the libraries within the build process, manage versions and everything.

Leave a Reply

Your email address will not be published. Required fields are marked *