Yeoman Tutorial: Yeoman Basics

 ·  · 

Quickly know and start to use Yeoman.


1 What is Yeoman?

Yeoman is code generator ecosystem. Yeoman take care of generators and use generators to scaffold a project, especially but not limited to web application project. Yeoman generators will create basic code structure with best practices.


Generally, the Yeoman workflow comprises three types of tools: the scaffolding tool (yo), the build tool (such as Webpack, Gulp, Grunt) and the package manager, for example, npm and Bower.


2 Install Yeoman

First of all, make sure you have node.js installed.

Globally install Yeoman via npm:

$ npm install -g yo

Yeoman will run Yeoman Doctor automatically at the end of installing to check status of your node.js environment.


Check the version of your current Yeoman installed:

$ yo --version

Run Yeoman command line:

$ yo

After a fresh installation, there are no generators available. Yeoman prompt gives you an option to install a generator.



3 Generators

A Generator defines what and how to generate using APIs provided by Yeoman.

3.1 Find generators

There are two ways to find a generator.

The first way is yo command line. Select the option Install a generator after executing yo command then you will get an interactive prompting with message: Search npm for generators:. Input your generator keyword and then choose your generator from search results to install.

$ yo


The second place to find a generator is Yeoman website. Search your generator there and then just install it following document of the generator.

3.2 Install a generator

I will take the generator generator-angular as an example. According to the document generator-angular depends on grunt-cli, bower and generator-karma, so we'll install them all.

$ npm install -g grunt-cli bower generator-karma generator-angular

If your installing is successful, the installed generators will be listed in yo command prompt.

$ yo


3.3 Use a generator

Yeoman generators has a generator- prefix in their full name by convention, for example, generator-angular. You install a generator using its full name, but call a generator by yo only using its real name.

$ mkdir yodemo && cd yodemo
$ yo angular

Yeoman will call the generator-angular generator in above command to scaffold an Angular project.


Choose your options and press Enter key, then code structure and files of an Angular project will be generated.


3.4 Sub-generator

A generator can have one or more sub-generators within it. For example, you can inspect sub-generators of generator-angular by --help command line option.

$ yo angular --help


We can see that there are sub-generators: angular:common, angular:main and angular:controller.

We'll look into the angular:controller sub-generator.

$ yo angular:controller --help


It seems that we can generate a Angular controller by command: yo angular:controller CONTROLLER_NAME.

# cd yodemo
$ yo angular:controller demo


Yep! A new controller file has been generated!