While starting another web project, I started downloading the always used framewoks like jQuery and the HTML5 Boilerplate (or making my own boilerplate which holds everything already). This is actually pretty boring, while I really want to start developing! That’s where Yeoman can help out.
At first glance, Yeoman is just a tool that can help you to build web application with ease. But saying so wouldn’t give Yeoman enough credits. As stated on their website, Yeoman 1.0 is more than just a tool. It’s a workflow; a collection of tools and best practices working in harmony to make developing for the web even better. In this article, I’ll try to explain in my words how to work with Yeoman and why it’s so awesome. It can help you become a better allround webdeveloper!
Background / Prerequisites
First things first: Understand that Yeoman actually consists from three different tools:
- Yo – A Scaffolding tool that can help you quickstart your project development.
- Bower – A package manager for the web, that can take track of the dependencies of your project.
Before going any further, I just wanted to point out that node.js and Git should be installed on your computer, and optionally, Ruby and Compass (if you plan to use Compass). Also, learn to love your command line. Most of Yeoman has to be executed through the command line, so don’t be afraid to start up yours and get ready to go!
Yeoman has to be installed through a npm. Simply execute the following command through your terminal.
npm install -g yo
As you can see in the npm Docs, the
-g parameter means that it’ll be installed in global mode. npm wil now install Yeoman. Once completed, you can see if it’s successfully installed by executing the following command:
And there you have him! Our friendly guy Yeoman is now living inside your computer.
Quit your terminal for now, we just confirmed that Yeoman is correctly installed.
Yo uses Generators to scaffold the file and folder structure for you. There are loads and loads of Yeoman Generators created by the community. That way, the community can share their best practices, templates and more that will be used by Yo. The most popular one (at the time of writing), is the Angular generator, giving you a quickstart with Angular development.
In this article, I’ll just install the basic generator for webapps. You’ll need to install this through your command line:
npm install -g generator-webapp
Yo: Scaffold our project
You now have the generator installed which can be used by Yo to scaffold the application. Navigate to an (empty) folder where you want to start your project and let Yo do the magic.
Yeoman will now greet you, with some optional frameworks to be installed (jQuery and de HTML5 Boilerplate are added automatically). In this example, I’ll be installing the Twitter Bootstrap for Sass, RequireJS and Modernizr as well.
Yo will now scaffold out the project. "Wow, that was fast!" Yes, indeed it was! No more downloading of libraries and taking care of boilerplating: Yo has you covered. You can now directly dive into developing.
Let’s break this down to the most important files/folders:
/bower_components/: This folder will hold the components that are installed by Bower. The generator installed jQuery, Modernizr, RequireJS and the SASS framework for Bootstrap for me, which are all placed inside that folder.
/styles/: This folder will contain the style of the website: Your CSS. But just like the CSS, this folder will be compiled by Grunt, so CSS that needs to be compiled (SASS / LESS) will be placed here as well.
/node_modules/: This folder will contain all the node packages (or modules) needed for your application. These dependencies can be found in the
package.json. Don’t touch the contents of this file, since it’s needed to let your build run properly.
/test/: The test-folder will contain the unittests for the project. Although loads of frameworks are supported, Mocha is the default one.
bower.jsonfile will contain all the dependencies made by Bower, included the used version numbers. In this example, it has references to
package.json: The overall Node package file with it’s dependencies to other projects.
Bower: Take care of my dependencies
Another tool used by Yeoman is Bower (created by the devs from Twitter). It is used to take care of any dependencies of the project. Simply use the following command to add an extra library (In this case: Underscore) to your application:
bower install underscore
The dependency is downloaded through Git and added to your application. The
bower.json file is updated to include that reference.
That’s the whole purpose of Bower, it’s taking great care of your developer dependencies!
Grunt: Do my dirty stuff
Grunt is the tool I’m actually most exited about when it comes to webdevelopment and the Yeoman workflow. With it’s huge number of plugins (once again, maintained by the community), Grunt can do a lot for you. Grunt executes the steps that are defined in the Gruntfile.js. Usually, the Yo generator already included the correct steps for Grunt, but you might want to add something to that later. Grunt is way to big to be discussed in this article, so I suggest you dive into the docs.
For the sake of the Yeoman workflow, I’ll just cover some useful basic commands.
Every developer should test their application. By writing unittests (for example in Mocha, QUnit or Jasmine) you can verify the quality of your code. The generator already scaffolded a basic test example, which can be run using the
grunt test command. The tests will be run using PhantomJS.
So, you want to quickly preview your application without having to install something like XAMPP or IIS as a web server? Grunt has your back! Just run the command, and you’ll be able to see your application.
This is the heavy step. It builds the application for deployment: the
/app/ folder will be deployed to the
/dist/ folder and all the steps defined in the
I think the Yeoman workflow is just great. Although it was pretty new for me to do a lot through the command line, you’ll eventually get the hang of it. I did find it somewhat hard to learn Grunt (and understanding the
Gruntfile.js), but everything has a learning curve. I hope you got convinced to try Yeoman and get ready to be amazed!