Project Scaffolding with Yeoman

I’m all about learning the tools of the trade in my pursuit of the web application I am writing at the moment. I started a new job as well, and they gave me a Mac to work on. My PC stays home and the Mac becomes my development platform during the day. Also, I’m working more in Node or IO.js these days instead of ASP.NET.

That brought up the topic of scaffolding. Visual Studio does a beautiful job of scaffolding – you select a project, or a new item and a type and it generates a whole bunch of stuff for you. You can then edit it to your hearts content. I know I normally start with an empty project – but even that has the basics set up for you.

What, then, about the poor Linux or Mac user? Well, not so poor – those macbook pros are not cheap. The Mac user has Visual Studio Code which is great for editing files. However, not so much on the scaffolding.

Let’s say you’ve decided to develop a single page application in Node and Ember.js – one of the hot web application frameworks (along side Angular and React). How do you get that initial boost? That’s where Yeoman comes in.

Installing Yeoman

Yeoman runs on top of Node and NPM, so you need to have those installed first. I’ve covered that topic in a previous article. Once you have those installed, Yeoman is installed like this:

npm install -g yo

To run Yeoman, just type “yo”. It will ask you if it can report usage statistics – I’m all for doing this on open source projects. Then it asks you what to do. We need a little more help here. It’s asking me about generators? Let’s get outta here!

What’s a Generator?

In order to properly use Yeoman, you need a generator. The Yeoman generators are all distributed via npm so you can just go onto the npm website and search for yeoman to get a list. Warning, though – there are a lot of them.

Since pretty much all of the npm stuff is actually hosted on GitHub, it’s very easy to go look at GitHub to find out what is in the generator. Look in the app/index.js file to see what it does (most of them are very readable) and then in the other directories under app to see the files.

Installing a Generator

So, I have Yeoman installed and I can run yo --help on the command line. Actually, this command is great because it tells you what are the available generators. Let’s say we want a web application starter. I see the Yeoman Team has provided a generator-webapp which contains much of what I need. To install the generator, use NPM:

npm install -g generator-webapp

Some (badly written) generators require you to put in a link. It’s probably best to skip those ones. Once you’ve install the generator, you can check out the availability with yo --help:


Scaffolding with Yeoman

The actual scaffolding is done with Yeoman like this:


There are sometimes some questions to ask – in this case, Yeoman asks you what you want – Bootstrap, SASS and Modernizr are options in this particular case. It then runs bower and npm for you (if you don’t have bower installed, it bombs out – you can install it with npm install -g bower and then run bower install yourself). This can take some time. If you are installing grunt, jshint, bootstrap, sass and modernizr – it will probably take a good length of time to set up just from downloading the requirements.

One of the things I’m going to be doing over the coming weeks is to develop a small application with authentication – maybe a family kanban board or something like that – in each of the Javascript single page application frameworks. In this way, I’ll be able to get a good look at all the frameworks and decide which one I like.