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:
$ 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 https://github.com/nick-jonas/assemblejs.git $ npm install -g
or direct from npm
$ npm install -g assemblejs
Create New Project
$ assemble init
Creates a new project in the current directory.
$ assemble watch
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:
compile the SASS into a main.css file
copies the entire app/ folder (except for the app/src/ folder to build/output/)
in output/index.html, replaces the
This directory contains a useful bash script
update_requirejs.sh for updating the require.js library, the
r.js compiler used by the build system, and
app.build.js which should map to
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 https://github.com/nick-jonas/assemblejs. 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.