045 Bower

01 Jun 2013

Bower is a client-side package manager. We will explore how to install, uninstall, define dependencies as well as integrate the modules with RequireJS.

Download video: mp4

Sample code: Github

Version: 0.9.2

Similar episodes: 013 RequireJS, 021 GruntJS, 027 Yeoman

##Background on Bower

  1. Main website and Github
  2. Bower components
  3. Bower video at Google IO by Dan Herberden (slides)
  4. Comparison on frontend packagers
  5. Package Managers: An Introductory Guide For The Uninitiated Front-End Developer

##Things to learn with Bower

###1. install

  1. global install with npm

    npm install -g bower

  2. check version

    bower --version

  3. help commands

    bower --help

###2. search package

  1. search bower packages with bower search <package>

    bower search jquery

  2. search of the various bower packages

    bower info <package>

###3. install/uninstall packages

  1. latest package bower install <package>

    bower install jquery

  2. install package with a specific version bower install <package#version>

    bower install jquery#1.10

  3. To connect it to an *.html file and query the version in the dev console of the browser with $().jquery;

    <script src="/components/jquery/jquery.min.js"></script>

  4. uninstall package with bower uninstall <package>

    bower uninstall jquery

  5. initialize a manifest file bower.json

    bower init

    a typical file bower.json contents:

    { "name": "example-bower", "version": "0.0.1", "main": "index.html", "ignore": [ "**/.*", "node_modules", "components" ], "dependencies": { "jquery": "2.0.1", "moment": "2.0.0", "prism": "latest", "agility": "~0.1.3" }, "devDependencies": { "hugrid": "git://github.com/simanek/Heads-Up-Grid.git" } }

  6. install all the listed packages in the manifest file bower.json

    bower install

  7. list all package in the current project

    bower list

  8. amend the manifest file bower.json automitically to include the installing package

    bower install <package> --save

  9. remove all previous configurations

    rm -r components

###4. bower config

  1. create a file .bowerrc either in the home folder ~/.bowerrc for global config or inside the project folder to override the gloabl config

    { "directory": "components", "json": "bower.json" }

###4. with requirejs

  1. connect the requirejs modules in one script tag in the *.html file

    <script data-main="main" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.5/require.min.js"></script>

  2. in the file main.js include the modules

    ``` require.config({ paths: { “jquery”: ‘components/jquery/jquery.min’, “moment”: “components/moment/moment”, “hugrid”: “components/hugrid/headsupgrid/hugrid” } });

    require([“jquery”, “moment”, “hugrid”], function($, moment, hugrid) {

     console.log('Hello!!');
     console.log(moment("20111031", "YYYYMMDD").fromNow());
    
     pageUnits = 'px';
     colUnits = 'px';
     pagewidth = 960;
     columns = 6;
     columnwidth = 140;
     gutterwidth = 24;
     pagetopmargin = 35;
     rowheight = 20;
     gridonload = 'off';
     makehugrid();
     setgridonload();    }  );  ```
    

##More Resources on Bower 1. Package management for the browser with bower 2. The state of javascript package managers 3. Yeoman’s package manager - Bower 4. Sublime text package for Bower

##Build Link of this episode

How to keep up to date on Front-End technologies