Like most professions, workflow is a key player when it comes to putting your best work forward. In the world of front-end web development great tools are everywhere. Yeoman is one of those tools. Well, actually Yeoman is comprised of three tools: Bower, Grunt, and Yo.

Bower is a package manager for the web. What does that mean? Well, Bower automates dependency management for the packages and libraries your app uses on the web such as jQuery.

Grunt is a task runner. Grunt is the workhorse that runs locally on your machine to help with such things like compiling Sass files, serving your site locally, testing, etc.

Yo is a scaffolding tool. With Yo, you can easily spin up boilerplate project structures and files to get started faster. If you are familiar with Rails, this is a lot like running rails new

Getting started with Yeoman is a breeze if you already use Node Package Manager (NPM). Simply run:

$ npm install -g yo

This will install Yo, as well as Bower and Grunt.

Next, you must install a generator, which is what Yo uses to build out the structure for different types of applications from a general web application to an Angular application for example. You can run:

$ yo

from the command line and select ‘install generators’ from the menu. If you know the name of the generator you want to install, you can simply just run:

$ npm install -g <generator>

For this example let’s install the standard web app generator. We run:

$ npm install -g generator-webapp

Then we can simply run

$ yo webapp

from the folder you desire your app to reside in. Yo will scaffold out the web app generator folder structure into your current directory.

Next, we will use Bower to install jQuery for us as an example. If we run:

$ bower install jquery --save-dev

Bower will go and fetch jQuery for us and install it into our bower_components folder. The ‘–save-dev’ flag is added to automatically write jquery as a dependency to our bower.json file, so if say someone was to clone your project and then run  

$ bower install

jQuery will automatically be fetched and installed since it was written and saved to your bower.json file.

Lastly, we will want to run our site locally. This is where Grunt steps in. Simply run:

$ grunt serve

and Grunt will open your default browser to the default url specified in your Gruntfile which is http://127.0.0.1:9000

And there you have it. You have successfully utilized the Yeoman suite of tools to get a standard web app up and running on your machine. Happy developing!