THE WEB'S SCAFFOLDING TOOL FOR MODERN WEBAPPS

Yeoman

Get started and then find a generator for your webapp. Generators are available for Angular, Backbone, Ember and over 400 other projects. Read the Yeoman Monthly Digest for our latest picks.

One-line install using npm:

npm install -g yo

Why use Yeoman?

With so many great tools available to front-end web developers these days it can sometimes be difficult to understand how they all fit together. Deciding on a workflow that you’re happy with is often a very personal endeavour, but getting started isn’t always easy. Yeoman aims to solve this problem by scaffolding workflows for creating modern webapps, while at the same time mixing in many of the best practices that have evolved within the industry.

Yeoman

Our workflow is comprised of three tools for improving your productivity and satisfaction when building a web app: yo (the scaffolding tool), grunt (the build tool) and bower (for package management).

  • yo scaffolds out a new application, writing your Grunt configuration and pulling in relevant Grunt tasks and Bower dependencies that you might need for your build.
  • Grunt is used to build, preview and test your project, thanks to help from tasks curated by the Yeoman team and grunt-contrib.
  • Bower is used for dependency management, so that you no longer have to manually download and manage your scripts.

All three of these tools are developed and maintained separately, but work well together as part of our prescribed workflow for keeping you effective.

Getting started

Installation

A complete getting started guide is available but for those looking to get up and running quickly, make sure you have installed Node.js, Git and optionally, Ruby and Compass (if you plan to use Compass).

Then install the required tools globally by running:

npm install -g yo

This will install Grunt and Bower automatically.

Pro-tip: A 5 Minute Introduction Video to Yeoman is available if you're a little more visually inclined :)

yo can generate several types of applications, but it needs help from plug-ins, or generators to get the job done. To scaffold a web application, you'll need to grab the web app generator:

npm install -g generator-webapp

Note: Many generators no longer require this installation step and will automatically install yo, grunt and bower just by installing the generator directly.

You can install additional generators with npm. For example, to install the AngularJS generator: npm install -g generator-angular. Run yo for more information.

Pro-tip: Looking for a tutorial? We're happy to recommend Building apps with the Yeoman workflow on NetTuts.

Usage

A complete workflow might look like this:

yo webapp                      # scaffold out a skeleton web app project
bower install underscore       # install a dependency for your project from Bower
grunt                          # build the application for deployment

Or with the AngularJS generator:

npm install -g generator-angular  # install generator
yo angular                        # scaffold out a AngularJS project
bower install angular-ui          # install a dependency for your project from Bower
grunt test                        # test your app
grunt serve                       # preview your app (formerly `grunt server`)
grunt                             # build the application for deployment

Migrating from earlier versions

If you were previously using Yeoman 0.9.x, you may have noticed a few things have changed. A migration guide is available to help you move over to 1.0. We've also written up some of the reasons behind our move.

Contributing

We are more than happy to accept external contributions to the project in the form of feedback, bug reports and even better - pull requests.

At this time we are primarily focusing on improving the user-experience and stability of Yeoman for our 1.0 beta release. Please keep this in mind when submitting feature requests, which we're happy to consider for future versions.

My features *

  • Lightning-fast scaffolding — Easily scaffold new projects with customizable templates (e.g HTML5 Boilerplate, Bootstrap), RequireJS and more.

  • Great build process — Not only do you get minification and concatenation; I also optimize all your image files, HTML, compile your CoffeeScript and Compass files, if you're using AMD, I will pass those modules through r.js so you don't have to.

  • Automatically compile CoffeeScript & Compass — Our LiveReload watch process automatically compiles source files and refreshes your browser whenever a change is made so you don't have to.

  • Automatically lint your scripts — All your scripts are automatically run against JSHint to ensure they're following language best-practices.

  • Built-in preview server — No more having to fire up your own HTTP Server. My built-in one can be fired with just one command.

  • Awesome Image Optimization — I optimize all your images using OptiPNG and JPEGTran so your users can spend less time downloading assets and more time using your app.

  • Killer package management — Need a dependency? It's just a keystroke away. I allow you to easily search for new packages via the command-line (e.g. `bower search jquery`), install them and keep them updated without needing to open your browser.

  • PhantomJS Unit Testing — Easily run your unit tests in headless WebKit via PhantomJS. When you create a new application, I also include some test scaffolding for your app.

* features are dependent on what the individual generators provide

About

Yeoman is a project developed by Addy Osmani, Sindre Sorhus, Pascal Hartig, Stephen Sawchuk, Simon Boudrias, Brian Ford, Eddie Monge, Paul Irish, Hemanth.HM, Revath S Kumar, Jimmy Moon, Frederick Ros, Mickael Daniel, Eric Bidelman and the Yeoman Community.