How to scaffold JavaScript Web Application in seconds using YEOMAN ? (example with Backbone Marionette)

Hey guys,

Today I want to discuss an issue that I have been recently facing, and how to solve it.

The issue is:

How to set up a new JavaScript web app as quickly as possible and start developing, instead of worrying about dependencies and digging into configuration files trying to tie different libraries together ?

If you are a Rails developer, you will understand what I mean. In Rails you can scaffold your application and have a mockup that you can start building on in seconds. I haven’t been able to find such tool for JavaScript web apps… Until now…..

My colleague Tim showed me a tool today, that does the job for you.

The tool is called: YEOMAN .

YEOMAN uses 2 other tools for JavaScript that should be in a must-have list for any JavaScript Web Developer.

They are:

a. Grunt  – JavaScript task runner
b. Bower –  A package Manager for Web

The good thing is that to develop simple Web App with YEOMAN, you don’t even need to know how to use those tools, because YEOMAN does everything for you. However, I highly encourage you to read documentation for both tools, because they will make your JavaScript development SO MUCH EASIER!

Finally, after this long intro, let’s get to setting up our first JavaScript Backbone Marionette application using YEOMAN.

Before you start:

You need to have: Node.JS and NPM. To be honest, if you are planning to develop web apps – you will need them anyway.

You can find how to install Node.JS and NPM here .

When you have Node and NPM in place, you need to:

1. Install Bower and Grunt.  using NPM:

npm install -g grunt-cli
npm install -g bower

Tip: ‘-g’ in npm install makes element that you have installed  – global, so you just need to install it once, and use it  for multiple applications.

2. Install YEOMAN

npm -g install yo

3. Install YEOMAN generator for Marionette.JS

npm install -g generator-marionette

4. Install Mocha Generator that Marionette Generator uses:

npm install -g generator-mocha-amd

5. Create Web App Folder, Scaffold Marionette Application using YEOMAN Generator:

mkdir WebAppTest
cd WebAppTest
yo marionette
Expected output: (If you need any components I said no to, please put Y instead of 'n':
 | |
 |--(o)--| .--------------------------.
 `---------´ | Welcome to Yeoman, |
 ( _´U`_ ) | ladies and gentlemen! |
 /___A___ '__________________________'
 | ~ |
 ´ ` |° ´ Y `
Out of the box I include HTML5 Boilerplate, jQuery, Backbone.js, Marionette, Handlebars, Require and Modernizr.
 [?] Would you like to install the full express app or simply the marionette generators? Yes
 [?] Would you like to include MongoDB for storage? No
 [?] Would you like to include Socket IO for real time communication? No
 [?] Would you like to include Baucis for REST? No
 [?] Where do you want the Bower components installed? (bower_components) 

Note: this will take a while,  but in the end YEOMAN will create a web app, put all necessary dependences and even tests. Isn’t it amazing ?

6. Run your application:


This will load your browser and you will be able to see this screen:

Screen shot 2014-02-24 at 12.40.06 PM

So here you have your scaffolded Marionette application that includes Handlebars.JS templates and Unit tests.

Of course it doesn’t stop on Marionette, there are plenty of generators for YEOMAN allowing you to scaffold many web apps of your choice.

That’s it for today,

Try it and let me know how it goes!


Thanks for installing the Bottom of every post plugin by Corey Salzano. Contact me if you need custom WordPress plugins or website design.

Anatoly Spektor

IT Consultant with 6 years experience in Software Development and IT Leadership. Participated in such projects as Eclipse IDE, Big Blue Button, Toronto 2015 Panam Games.

Join the Discussion

Your email address will not be published. Required fields are marked *


  1. Rick Eyre

    You might want to check out Sails.js as well: I haven’t used Rails that much, but from my understanding it’s similar.

    1. Anatoly Spektor

      That looks interesting! I will definitely try it! Thanks for sharing!

  2. Shakhal Levinson

    Hey, Thanks for this tutorial.
    For future readers, might be worth mentioning,
    after step 5, you need to run.
    npm install
    bower install


  3. Others just simply choose a blog site based on ease or name recognition. Place dollops of
    remaining batter overtop of the caramel layer. Here’s a great i – Phone cooking app that provides you with suggestions on what to cook
    based on the current ingredients you have in stock.