Using Bower


If you are like me then you have been reading this document and actively following along by copying content from your browser and pasting it to your shell. So now that we have bower installed, I wonder if there is a modern approach to copying text to/from your clipboard. Let's use bower to check:

$ bower search clipboard
Search results:

    zeroclipboard git://github.com/zeroclipboard/zeroclipboard.git
    angular-zeroclipboard git://github.com/lisposter/angular-zeroclipboard.git
    jquery-zeroclipboard git://github.com/balsamiq/jquery-zeroclipboard.git
    ez-zero-clipboard git://github.com/jdewit/ez-zero-clipboard.git
    cp-clipboard git://github.com/jon301/cp-clipboard.git
    image-clipboard git://github.com/jorgenbs/ImageClipboard.git
    angular-clipboard git://github.com/omichelsen/angular-clipboard.git
    clipboard.js git://github.com/lgarron/clipboard.js.git
    clipboard-button git://github.com/omichelsen/clipboard-button.git
    react-copy-to-clipboard git://github.com/bower-registry/react-copy-to-clipboard.git
    ngclipboard git://github.com/sachinchoolur/ngclipboard.git
    purescript-zclipboard git://github.com/slamdata/purescript-zclipboard.git
    zeroclipboard-qbt https://gitcafe.com/QiaoButang/zeroclipboard-qbt.git
    jr-clipboard git://github.com/janresiak/jr-clipboard.git
    clipboard git://github.com/zenorocha/clipboard.js.git

Apparently there are quite a few projects related to the clipboard. Lets examine one.

$ bower info clipboard
bower cached        git://github.com/zenorocha/clipboard.js.git#1.5.5
bower validate      1.5.5 against git://github.com/zenorocha/clipboard.js.git#*

{
  name: 'clipboard',
  version: '1.5.5',
  description: 'Modern copy to clipboard. No Flash. Just 2kb',
  license: 'MIT',
  ⋮
  homepage: 'https://github.com/zenorocha/clipboard.js'
  ⋮
}

Available versions:
  - 1.5.5
  - 1.5.4
  ⋮  
  - 1.0.0
You can request info for a specific version with 'bower info clipboard#'

Ok it's got a MIT license - so let's go to out dev directory and grab a copy…

$ cd dev
                        
$ bower install clipboard
bower cached        git://github.com/zenorocha/clipboard.js.git#1.5.5
bower validate      1.5.5 against git://github.com/zenorocha/clipboard.js.git#*
bower install       clipboard#1.5.5

clipboard#1.5.5 bower_components/clipboard

Once "installed", clipboard is located in the dev/bower_components/clipboard directory. You can then look at the source, read the doc and generally decide whether or not this solves your problem. Incidentally I did not know anything about the clipboard component before I started writing this document but I now have added its functionality to the system (even in this document). To accept this component into EDT you simply use bower to update the development dependencies stored in the bower.json file. This file is the equivalent to package.json for a node or grunt component.

$ bower install clipboard --save-dev
bower cached        git://github.com/zenorocha/clipboard.js.git#1.5.5
bower validate      1.5.5 against git://github.com/zenorocha/clipboard.js.git#*

Bower reads the bower.json located in the dev directory and uses it to manage source level components and their dependencies. To grab the sources referenced by this bower.json, issue the install command:

$ bower install

Lets get it on!