Create a New App Faster

with Yeoman + Bower



Yeoman Why Yeoman?

  • Sets up directory structure
  • Adds JavaScript and CSS libraries
  • Prompts you with questions like
    "Would you like to use Sass (with Compass)?"
  • Sets up Grunt, Bower, Karma for tests, package.json

Yeoman Creating An App

  1. Install a generator, e.g., AngularJS
    npm install -g generator-angular
  2. Run the generator in empty directory
    yo angular my_app_name

Yeoman New Yeoman AngularJS App

Yeoman Start coding

  1. grunt serve
  2. http://localhost:9000 opens automatically
  3. File changes cause the browser to reload—mysterious!


  • Easily include CSS and JavaScript libraries in your app
  • npm install -g bower

Bower Why Bower?

  • It fetches libraries for you
  • Uses bower.json much like package.json for Node
  • It downloads the library and updates your index.html
    to include files
  • index.html updated → browser reloads with your new libraries

Bower Finding Packages

  • Search online:
  • Search in your terminal:
    % bower lookup fontawesome
    fontawesome git://

Bower Installing Packages

bower install fontawesome --save

  1. Library downloaded to bower_components/
  2. app/index.html updated to include library
  3. bower.json updated to include library and version—
    bower install is like npm install

Yeoman + Bower = Glorious Synergy

  • No manual download, unzip, copy, include to use CSS and JavaScript libraries
  • Generated Gruntfile combines and minifies everything for production with grunt build
    • View source of
      one CSS file, two JavaScript files, all minified
  • Can add other commands to grunt serve, such as to start a Rails app

Yeoman + Bower = Fast Development

Two apps in a few days: