This is another post in my series of posts on Frontend Tooling. In this post we will talk about the different generators we can use to get started on our project. There are many different generators/scaffolders available, and we will cover some of the most popular and look at how we can use them in out projects.

Initializr (www.initializr.com)

Initializr was one of the first generators for generating a project based upon HTML5 Boilerplate so if you are a fan of HTML5 Boilerplate than Initializr is a fantastic place to start as it allows you to fine tune to HTML5 Boilerplate to meet your needs. Initially it gives you three pre-configuration options:

  • Classic H5BP
  • Responsive
  • Bootstrap

Initializr then allows you to fine tune your selections by allowing you to select options in the following categories:

  • HTML/CSS Template – Any extra bonuses like Bootstrap or Mobile first responsive you want to add.
  • HTML5 Polyfills – Modernizr or HTML5Shiv
  • jQuery – Minified or Development
  • H5BP Optional – Allows you to select which parts of H5BP you want to use.

To generate your project you simply select the options you want and click download.

For a long while Initializr was my port of call when I wanted to start a new project, however in the past year and a half I moved away from it for one simple reason; the lack of preprocessor support. What Initializr is really missing is the ability to generate projects that use SASS or LESS (or other preprocessors) for generating the CSS and this is a deal breaker for me. However, if you are not using a preprocessor I can recommend using Initializr.

Yeoman (www.yeoman.io)

Yeoman is a set of tools that allows you to generate the starting points of projects, it allows developers to generate projects directly from the terminal using predefined generators which you can install. Some of the generators available include:

  • webapp
  • angular
  • ember
  • backbone
  • chromeapp
  • chrome-extension
  • bootstrap
  • mocha
  • jasmine
  • testacular

It is easy to forget however, that Yeoman is not only a generator, but it is also built to be part of a workflow where Yeoman creates your web application, Bower is used to handle dependencies and Grunt is used to preview, test and build.

Getting started with Yeoman is pretty easy assuming you have the required prerequisites (Node, NPM), you simply need to open your terminal and run:

npm install yo -g

This will install Yeoman for you, this can take some time so feel free to go grab yourself a Tea/Coffee/Other Beverage. Once Yeoman is installed we are ready to create our new project.

First things first, we need a directory for our project, either create on in Finder/Windows Explorer and navigate to it in the Terminal or simply create one in terminal. In the case of a Mac I would create the folder by doing the following.

cd ~/Sites
mkdir project_directory
cd project_directory

Now that we are in the directory we can get onto generating our project, first thing we need to do is install our generator, for our first project we are going to create a simple website so we need to install the ‘webapp’ generator to do this we first need to run Yeoman in the terminal

yo

We then need to select Install a generator using the arrow keys and pressing enter.

We will then be prompted to enter a search term, we will enter webapp. Yeoman will then give us a list of results, when I did this I got the following results

> generator-hazdev-webapp 
    generator-hbswebapp 
    generator-mobile 
    generator-sails 
    generator-webapp 
    generator-webapp-bfytw 
    generator-webapp-fintan 
    Search again 
    Return home

You then need to select generator-webapp and hit enter. This will download and install the webapp generator for you.

You should now be presented with the original list with an added Run the Webapp generator. We can select this option and hit enter.

We will now be presented with the chance to select what we need, to select options use the arrow keys and use the space bar to select/deselect as needed.

Out of the box I include HTML5 Boilerplate and jQuery.
[?] What more would you like? 
 ❯⬢ Twitter Bootstrap for Sass
  ⬢ RequireJS
  ⬢ Modernizr

Once we have selected what we need Yeoman will start downloading everything our project needs.  This can take some time dependent on your internet connection so if you have finished your first beverage it might be time to get another.

So once Yeoman is finished you will get a lovely Bye from us! Chat soon. message from the authors of Yeoman.

So at this point you have a generated project with a Gruntfile preconfigured with the following commands:

  • grunt – runs jshint on the javascript following by the test and build commands.
  • grunt build – compiles the projects, including minifying/concatting js, build the SASS into minified CSS and compress and rename images (for cache busting.
  • grunt watch – watch the javascript, coffeescript, SASS and stylesheets to detect any changes, recompiles if they change.
  • grunt server – creates a node server for running the project, watches for any file changes and refreshes browser on file change.
  • grunt test – runs any tests setup for the project.

Summary of Yeoman

Yeoman is a fantastic tool that I use a lot for generating projects, it is fantastic for getting started when I start a new project. Prior to Yeoman I kept my own template in git which I used time and time again for new projects, however, this was hard work as I had to regularly update the libaries in the template. Yeoman allows me to start a project with the most up to date libraries which saves time from having to maintain my template.

grunt-init (http://gruntjs.com/project-scaffolding)

grunt-init is another command line tool for generating projects, similarly to Yeoman

npm install -g grunt-init

Once this is installed you then download your first template, the best way to install a grunt-init template is to clone it from GitHub.

git clone [email protected]:pascalduez/grunt-init-webapp.git ~/.grunt-init/webapp

Now that we have setup our environment we need a directory for our project, either create on in Finder/Windows Explorer and navigate to it in the Terminal or simply create one in terminal. In the case of a Mac I would create the folder by doing the following:

cd ~/Sites
mkdir project_directory
cd project_directory

We now can generate our web app using

grunt-init webapp

We will then be asked a series of questions

Please answer the following:
[?] WebApp package and root directory. (project_directory) 
[?] WebApp name. (A human-readable name for the app: Project Directory) 
[?] WebApp description. (A human-readable description of the app.) 
[?] Version (0.1.0) 
[?] Project git repository (git://github.com/jonathan/project_directory.git) 
[?] Project homepage (https://github.com/jonathan/project_directory) 
[?] Author name (Jonathan Fielding) 
[?] Author url (none) 
[?] Licenses (MIT) 
[?] Do you need to make any changes to the above before continuing? (y/N)

Once you have answered all the questions grunt-init will download and install the required components.

So at this point you have a generated project with a Gruntfile preconfigured with the following commands:

  • grunt – runs jshint on the javascript.
  • grunt server – creates a node server for running the project, watches for any file changes and refreshes browser on file change.

Summary of grunt-init

With grunt-init we can generate based on templates we clone from GIT, but this is part of what makes grunt-init not as useful vs Yeoman. Yeoman takes away the worry about ensuring our templates are up to date. What git-init really needs is some sort of repository that works similarly to bower, pulling the templates from Github.

Summary of Generators

So it is very difficult to compare the three different Generators because they are all very different, Initializr is a fantastic tool for generating a project quickly. However, if you want more fine grained control you should look at using a command line Generator like Yeoman or grunt-init. When comparing both Yeoman and grunt-init it becomes harder; they both work in different ways and may each suit  a persons personal workflow better. The key thing that makes me use Yeoman vs using grunt-init is that Yeoman is easier to install generators and it is easier to ensure that the generators are up to date.

Are you looking for your next role?

I work as an Lead Engineer at RVU where we are currently looking for Full Stack software engineers based in our London office.

Find out more