Building apps with Yeoman part II: Bower

Most languages today have a package manager. Ruby has bundler wich works with a gemfile, node has NPM wich works works with a packages.json file, PHP has composer which works with a composer.json file, but what about plain HTML / JS dev? Is it left out in the dark? Enter Bower.

Bower: The every day package manager.

Bower works with your every day projects that need stuff added to them. So let's see what you can install with bower. According to their website the candidates are:

  • A name that maps to a package registered with Bower, e.g, jquery.
  • A remote Git endpoint, e.g., git://github.com/someone/some-package.git. Can be public or private.
  • A local endpoint, i.e., a folder that's a Git repository.
  • A shorthand endpoint, e.g., someone/some-package (defaults to GitHub).
  • A URL to a file, including zip and tar files. Its contents will be extracted.

In short, you can install and manage almost anything with bower.

So how does it work? You install bower by doing:

npm install -g bower  

This installs the tool. Then you download something new by typing:

#Where package_name is something like jquery or something.
bower install <package_name>;  

You can also search bower for packages by typing:

bower search <package_name>  

This will just dump a huge list to your console, if you are just looking for jquery you have to scroll to the top.

A better was is to page the output by piping it to less like so: bower search jquery | less

You can then page the results by pressing spacebar. This keeps you at the top of your search and is more convinient.

After you install a package

When you install a package, bower puts it in the directory /bower_components/package_name/file.js by default. You can then use the file by referencing it in a script tag like normally from within that directory.

For me personally though, I don't want ot be forced into using their directory. If i'm using Laravel or WordPress I have my own configuration I like so in those cases you can set the output path ( among other stuff ) in the .bowerrc file. Here's an example:

{
     "directory" : "./vendor"
}

Make sure to use double quotes in your file as this adheres to strict JSON conventions.

So let's say we now want to install a charting tool like chart.js. To do so all you have to do is type: bower install chart.js. Poof you're done!

This will install chart.js and all of its' dependencies to your /vendor directory. Here is what it gives us:

└── vendor
    ├── chart.js
    │   ├── License.txt
    │   ├── README.md
    │   ├── chart.js
    │   └── component.json
    └── raphael
        ├── README.markdown
        ├── dr.css
        ├── history.md
        ├── license.txt
        ├── make
        ├── plugins
        │   ├── colorpicker.js
        │   ├── colorwheel.js
        │   ├── jquery.colorpicker.js
        │   ├── jquery.colorwheel.js
        │   ├── raphael.blur.js
        │   ├── raphael.path.methods.js
        │   ├── raphael.primitives.js
        │   └── raphael.shadow.js
        ├── raphael-min.js
        ├── raphael-src.html
        ├── raphael.core.js
        ├── raphael.js
        ├── raphael.svg.js
        ├── raphael.vml.js
        ├── reference.html
        ├── reference.js
        └── test
            ├── image
            │   └── raphael.png
            ├── integration.html
            └── vendor
                └── jquery.js

7 directories, 28 files  

Wow that's a lot of stuff we didn't even have to touch or think about. Pretty nifty. In the next article we are going to dive into yo. The scaffolding tool that is part of Yeoman.