Public | Automated Build

Last pushed: 3 years ago
Short Description
Short description is empty for this repo.
Full Description

Front-end Boilerplate.

Because repeating yourself is suck.

Modular, easy to use boilerplate for building web applications


Frontend Boilerplate is a simple Gruntfile and directory structure for an easy starting point with web applications using: Grunt and Bower.
It is designed to give you a quick and organized way to start developing web apps with best practices in mind.


As a developer, everytime you need to start a new web project you must follow the same steps.
Write a lot of JavaScript code, using a CSS pre-processor, start a server, open your browser to see the page, go
back to the editor made some changes, go back to the browser e repeat this flow many, many times a day.
For this we created this repository to collect the best practice around the web community and put all together
in one place. Be cool, share your experience too.


All code here are based on lessons learned and good practices, however many of them are fruits of research in several blog, tutorials, lectures and other sources.



Getting Started

To get you started you can simply clone or download the repository and install the dependencies, very simple!
Quick start.

Also you can using the Yeoman Generator to start even fast.


You need Git to clone the repository.

Also you must have Node.js and its package manager (npm) installed.

And Bower the package manager

Installing frontendboilerplate

Clone the repository using git:

git clone
cd frontendboilerplate

If you just want to start from zero commit history, you need to do:

git clone --depth=1 <your-project-name>

The depth=1 tells git to only pull down one commit worth of historical data.

Install Dependencies

Open your Terminal window inside the project folder and type the following command:

npm install

The npm command will install all the dependencies listed on package.json file.

Your application is ready to go


The step-by-step is very simple but if you find some issue please let us know at: issues.

Application Directory Layout

We propose a folder structure for web projects from the scratch, because all web projects have CSS, JS and Images folders.

    assets/                    --> all of the files to be used in production
        css                    --> css files
        fonts                --> Font-face folder
        images                --> image files
        js/                    --> javascript files
            vendor             --> third party libraries copied from src/vendor
    lib/                    --> 3rd party bower libraries
    src/                    --> scripts for development
        scripts/            --> hand made JavaScript files, plugins and others
        preprocessor/        --> your choice for Sass or Less
        vendor/                --> third party libraries like: respond, mçodernizer
    test                    --> test source files and libraries
        mocha                --> mocha folder structure for visual test results
            js/                --> testing frameworks file
        spec                --> specs for testing
            app-test.js        --> example on how to write tests
        test.html            --> visual page for tests
    index.html                --> base layout file
    Gruntfile.js            --> where the magic happens

Grunt commands available


grunt dev

This command will run two tasks:

  • connect
  • watch

Using the concurrent and livereload plugins.


grunt lint

This command will run two tasks:

  • jshint
  • csshint


grunt less
grunt sass

Using less task will compile less files, using sass task will compile sass files.


grunt test

This command will run one task:

  • mocha


grunt build

This command will run four tasks:

  • lint
  • concat
  • uglify
  • test

Helpers Tasks


grunt bower

Grunt will install all bower dependencies from the bower.json file.


grunt injector

Grunt will inject all bower dependencies from the bower.json file into index.html.

After include some bower denpendecy on bower.json file, optionally run grunt bower and grunt injector.

Docker Pull Command
Source Repository