Lets' Yo

I am sick of these people of frameworks and languages. Sick of assuming something which seems quiet the best way to a particular problem. We sure waste a lot of time in this undefined fire.

And I am not gonna share you any more fake solutions but this is something I felt confortable and worth sharing for you to bootstrap your project at least for the prototypes you will make in your team sprints. You could use this at your pet projects as a validation tool for your desired designs or user expriences.So lets get things up.

In one single stack: three different tools

  1. yo ( yeoman: scaffolding tool )
  2. grunt ( grunt: javascript task runner )
  3. bower ( bower: dependency injection )


You need to have a node runtime on your system. Get a node installer for here. We are going to work with NPM (node package manager) to install our tools.

$ npm install -g yo 

-g for globally to install the package. Yeoman is a scaffolding tool for you to generate a templated structure of starting point for your poject. Try this templates if you don’t have anything to say.

In this case, I gonna use a generator called webapp written by the yeoman team itself. Again you need to install the template.

$ npm install -g generator-webapp

And then start a project.

$ mkdir /your/porject/
$ cd /your/project/
$ yo webapp

That will genearte a scaffolded starting point for a standard webapp including bootstrap and sass if you choose them. And the installer will also run ( npm install && bower install ) to download dependencies and necessary node packages like sass.


Dependencies injection has never been easier for us. Do this magic first.

$ npm install -g bower

The bower is quiet convenient to inject dependencies. All you have to do for your new dependency is thses commands

$ bower install --save fontawesome
$ grunt wiredep // later

And boom, fontawesome is with you now. All the rest is pretty straight up, so please read here.


Some of us are lazy. Some of us are quiet smart and pretty legitimate. But I think there are more lazy people out there since we have a lot of matters to attend for a particular day of our life although most of them are virtual.

Ok here is a task runner for you to get lazy. Webapp already make these things available to you as default.

$ grunt serve // to look at your prototype (or) project at
$ grunt dist  // pack all the things and make sure they are compressed literally
$ grunt wiredep // when you have a new dep(dependency) you have to wire into your project

I bet some curious bad boys would insepct the Gruntfile.js and bower.js before the end of this post and I encourage you to do so. In this case,after you do the $ grunt dist , you just have to paste them somewhere in your server and you are done. No backend, no shits yet. Just for prototyping or POC( proof of concepts ) and for you to stay cool.

Have fun.

Copyright © 2016 - Tin Aung Linn. Powered by Octopress