Starting a new front-end project for web usually involves setting up various JavaScript/CSS frameworks & libraries, scaffolding your base application and keeping your frameworks and libraries up to date by hand. Well, the procedure is a big pain and pretty time consuming. But the good news is, you don’t have to do this anymore, as there are tools available now to solve these problems!


This tutorial assumes that you are familiar with the basic concepts of JavaScript and AngularJS. You need to have node ,npm and git installed in your machine. If not already done, you can download and install node from here and git from here. If you opt to work with SASS instead of CSS you need to have ruby and compass installed in your machine. You can download Ruby from here. Once ruby is installed, go to your terminal and run the following command to install compass.

gem install compass


Grunt - Grunt is a command-line tool that lets you run a heap of tasks in one command, all customized to your liking and tailored to your project’s needs. It helps to automate repetitive jobs like CSS preprocessing, or minifying code for a production environment.

Bower - Bower is used for dependency management. You no longer have to manually install all your dependency and update it all by yourself. You can update and manage your dependencies using bower. However, I will write more about bower in my next tutorial.

Yeoman – Its scaffolds out your app, pulls in relevant grunt tasks and bower dependencies which you will need for your app. Yeoman will create a basic folder structure for your app, create relevant grunt tasks and also will run bower for you which in return will download and install all the relevant dependencies for your app. Here I have only spoken about scaffolding an angular app. However yeoman can be used to develop apps with other frameworks also. Eg: You can scaffold your ember app with yeoman.

Utilizing these tools will make your life easier. Imagine an app which needs 40-50 libraries those need to be updated. Doing it manually will eat up a lot of your valuable time but with these three tools in use, you can save few extra time for your personal life.

Installing Yeoman

  1. Open your terminal and , simply enter this to install yeoman
    npm install –g yo
  2. Once yeoman is installed, we need to install angularJs scaffolding tool for yeoman
    npm install -g generator-angular

Now you are ready to start scaffolding your app with yeoman, running task through grunt and managing your dependencies through bower.

Scaffolding Your App

  1. Create a folder in your PC, say ‘ang-test’ and then navigate to that folder in your terminal and run the following command.
    yo angular
  2. This command scaffolds your app in the current folder. After running this command yeoman will ask some questions to you, regarding how do you want to set up your application. Below are some sample questions.

[?] Would you like to use Sass (with Compass)? (Y/n)

Select ‘N’ if want to work with conventional and ‘Y’ if you want to work with SASS. I personally recommend SASS as it makes your CSS more maintainable and modular in nature. Also, it helps you to achieve DRY (Don’t Repeat Yourself) concept for writing your CSS. Make sure you have compass installed in your machine if you are opting to use SASS in your project.

[?] Would you like to include Bootstrap? (Y/n)

Bootstrap is a front end framework from twitter. If you opt to use it yeoman will automatically include the latest version of it in your project and create a demo page with the basic bootstrap styling.

[?] Would you like to use the Sass version of Bootstrap? (Y/n)

This option will come iff you have opted to use SASS instead of conventional CSS. Chose ‘Y’ to continue.

[?] Which modules would you like to include? (Press to select)

These are optional angularJS modules . You can learn more about them from here . I recommend including each of them but you can manage your libraries according to your app requirements.

After running these steps yeoman will start scaffolding your app.

Note: If you are working in a secure environment, there is a probability that your firewall configuration won’t allow bower to access git, which may through some error like the following.

ECMDERR Bower cant access git
bower ECMDERR Failed to execute "git ls-remote --tags --heads git://", exit code of #128

In that case run the following command in your terminal and then start over from the step 1 again to scaffold you app.

git config --global url."https://".insteadOf git://

Once finished, your ang-test folder should look something like this.

  • app (the guts of your AngularJS app)
  • bower_components
  • fonts
  • images
  • scripts
  • controllers
  • main.js
  • app.js
  • styles
  • main.css
  • views
  • main.html
  • 404.html
  • index.html
  • favicon.ico
  • robots.txt
  • node_modules (contains node modules required for grunt, karma, etc.)
  • test (used for testing your code)
  • bower.json (where you define dependencies on other frameworks & libraries)
  • Gruntfile.js (tells Grunt how to work with our project)
  • karma.conf.js (used for testing)
  • karma-e2e.conf.js (used for testing)
  • package.json (used for node dependencies like grunt karma, etc.)

Understanding Folder Structure

App folder is the folder where you will spend most of your time as you will write your HTML, CSS and JavaScript in that folder only. Test folder is the folder where you can write your own test cases for unit testing.

The app/index.html file is where your application starts. It loads the JavaScript & CSS files you write (from app/scripts and app/styles), the JavaScript & CSS files that your application depends on (in app/bower_components), and sets up HTML elements for your AngularJS app to bind to.

Open your app/index.html file in some HTML editor and let’s have a close look in it. There are some <script> tags in two sections right before </body> tag. The scripts inside the <!– bower:js –> <!– endbower –> section are the ones which are included by bower as a part of dependency management. Don’t link any Javascript files here under this section manually as bower will automitaclly delete those if they are not mentioned as dependencies. Scripts under the <!– build:js({.tmp,app}) scripts/scripts.js –> <!– endbuild –> tag, are the ones which you will write by yourself. Please note that you have to include these files manually in your code. Currently there are two JS files scripts/controllers/main.js and scripts/app.js respectively. You can change these files according to your own need.

<!-- build:js scripts/vendor.js -->
 <!-- bower:js -->
 <script src="bower_components/jquery/dist/jquery.js"></script>
 <script src="bower_components/angular/angular.js"></script>
 <script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/affix.js"></script>
 <script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/alert.js"></script>
 <script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/button.js"></script>
 <script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/carousel.js"></script>
 <script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/collapse.js"></script>
 <script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/dropdown.js"></script>
 <script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/tab.js"></script>
 <script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/transition.js"></script>
 <script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/scrollspy.js"></script>
 <script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/modal.js"></script>
 <script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/tooltip.js"></script>
 <script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/popover.js"></script>
 <script src="bower_components/angular-resource/angular-resource.js"></script>
 <script src="bower_components/angular-cookies/angular-cookies.js"></script>
 <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
 <script src="bower_components/angular-route/angular-route.js"></script>
 <!-- endbower -->
 <!-- endbuild -->

<!-- build:js({.tmp,app}) scripts/scripts.js -->
 <script src="scripts/app.js"></script>
 <script src="scripts/controllers/main.js"></script>
 <!-- endbuild -->

To run your application now, open your terminal and navigate to the folder, where you scaffolded your app. Now type the following command in your terminal

grunt serve

This grunt task [serve] has been pulled in by yeoman to run a local server in your machine. This command starts a server on port 9000 that will serve the assets in your app folder. If you navigate to http://localhost:9000 you should see the HTML from app/views/main.html. Each time you make any changes in the HTML, CSS and JS files, it will automatically get reflected in your browser window. However, you can also create your own grunt task. To know more about it visit here

At this point, your boilerplate code is ready to use.

Example with Demo

I have created a demo repository for learning purpose only. You can clone download/clone it in your desktop and work with it. Please note that node_modules folder won’t be there in this folder. So, if you want to run all your grunt tasks and test cases then you have to follow the tutorial and create your own boilerplate code. The repository link is given below.

GitHub Link


There are ‘n’ number of ways to reduce the redundancy and in this era of bullet trains no one wants to ride a bullock cart. Yeoman is just another tool to reduce unnecessary human efforts, so that you can put all your productivity in creating something new and exciting. Again, there is no harm in following the conventional development approach; except for the fact the fact time is a finite entity in this beautiful world! Happy coding!