Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »


0.2.3 • Public • Published

Build Status


A light bootstrap for fast front-end development based on Backbone, Handlebars, RequireJS, SASS, and Twitter Bootstrap.


The focus of Assemble is to get up and running quickly with a collaborative application bootstrap, getting as much of the painful overhead out of the way without imposing too many dependencies. The HTML partials are Handlebars-compiled templates. I decided not to use JS preprocessing (Coffeescript, Typekit), and for CSS pre-processing, I decided to use Compass with the Twitter Bootstrap port for SASS.

I'd love to get feedback on whether this is too opinionated, or if there are better options to use. The goal is to allow for dependency options when building a project, similar to Yeoman.


As far as level of understanding, it would best to be familiar first with Backbone and RequireJS.

You must have the following installed:

nodejs >=v0.6.0

$ brew install node


$ gem install sass-globbing


$ gem install compass-rgbapng

It's highly recommended to have NPM to install all dependencies.


clone the repo

$ git clone
$ npm install -g

or direct from npm

$ npm install -g assemblejs


Create New Project

$ assemble init

Creates a new project in the current directory.

Watch Project

$ assemble watch

Automatically compiles your SASS files on save, lints your Javascript, starts a local http web-server, and opens your browser pointed to it.

Create new view

$ assemble view

Creates a Backbone View, SASS partial, and Handlebars Template based on a provided name and description

Build for production

$ assemble build

This will compile a production-ready build to www_public, doing the following steps:

  1. compile the SASS into a main.css file

  2. copies the entire app/ folder (except for the app/src/ folder to build/output/)

  3. runs r.js to optimize your Javascript source files into one file: build/output/assets/js/main-build.js

  4. in output/index.html, replaces the src attribute with the new compiled javascript file, and removes the require-js data-main property



This is your development/working directory. It includes your index.html, .hataccess, static asset files (compiled css, img, json, svg, video files), and your javascript application files are all within src.


This directory contains a useful bash script for updating the require.js library, the r.js compiler used by the build system, and which should map to app/src/config.js

Environment Specific Paths

You can set environment specific paths in utils/env.js. By setting the ajax_prefilter property, all AJAX requests will prepend this path to the request To get the environment id (i.e. "Local", "Dev", "Prod") at any point in the application, make sure you include utils/env in your module dependency array, and call


To get an environment value, you would call



router.js is where the routing is defined, and acts as the controller for the application. The .htaccess file included forces all requests to index.html. Push state is enabled by default, and falls back to #hash if the browser does not support it.


Inspiration along the way taken from Grunt, Yeoman & Roots.




npm i assemblejs

Downloadsweekly downloads








last publish


  • avatar