Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?


Failed to load latest commit information.


Build status Code coverage Gitter

Backbone Boilerplate

This boilerplate is the product of much research and frustration. Existing boilerplates freely modify Backbone core, lack a build process, and are very prescriptive; Backbone Boilerplate changes that.

The Backbone Boilerplate is a way of organizing a web application with some opinionated defaults, such as: Backbone, jQuery, Lodash, Grunt, Babel, Combyne, Karma, Mocha, and PureCSS for styles.

Organize your application with a logical file structure, develop your Models/Collections/Views/Routers inside modules, and build knowing you have efficient code that will not bottleneck your users.

Thanks to our Contributors! Special Thanks to: cowboy, iros, nimbupani, wookiehangover, and jugglinmike for helping me create this project. Extra Special Thanks to: Paul Guinan for giving me usage rights to his fantastic Boilerplate character.


Backbone Boilerplate Wiki

Getting started

The easiest way to get started is to install Git and clone the repository:

# Using Git, fetch only the latest commits.  You won't need the full history
# for your project.
git clone --depth 1

# Move the repository to your own project name.
mv backbone-boilerplate my-project

You will need to download and install Node to fetch the dependencies and use the build tools.

Updating dependencies

Third party packages may update independently from this main repo, so it's a good idea to update after fetching.

npm install

Build process

The build process consists of numerous Grunt plugin tasks that work together to optimize your application.

# To run the build process, run the NPM start script. This will automatically
# run JSHint, the development Connect server, and watch your files for changes.
npm start

# Run a build and test the now optimized assets.
npm run test-prod

Working with tests

Create an ES6 module in the test/tests directory and add an import in the test/runner.js file. You'll see existing examples in there to make it easy to follow.

Run the tests with:

npm test

If you want to continuously test, run npm start and open the test/index.html file in your browser. The tests will re-run whenever you change source files.

By default, the test runner is BDD Mocha and uses Node's assert.


Copyright © 2015 Tim Branyen (@tbranyen)
Licensed under the MIT license.