Integrating Backbone Boilerplate with Rails 3

Despite making several small Backbone.js apps in the past year, Backbone.js had never really clicked with me. I wasn't crazy about having to spend time thinking about file and folder organizing for JavaScript and template files. I was also unsure how all the pieces would fit together. Thanks to Tim Branyen's Backbone Boilerplate those issues have been significantly reduced. According to Backbone Boilerplate's documentation: "This boilerplate is the product of much research and frustration. Existing boilerplates freely modify Backbone core, lack a build process, and are very prescriptive; this boilerplate changes that."

While I was excited to use Backbone Boilerplate, it wasn't immediately clear how I'd integrate it with Rails 3. After several hours of tinkering I came up with an approach that places the build product of your backbone app in the lib/assets folder. This approach means that the application can be integrated into the assets pipeline and easily deployed to heroku.

Code on Github

Creating the Rails App

```bash Getting Started // create a new rails app rails new rails-bb cd rails-bb/lib //remove the index file rm -r public/index.html cd lib git clone https://github.com/tbranyen/backbone-boilerplate.git cd backbone-boilerplate //switch to the amd branch git checkout amd rm -rf .git ```

Changing Build Settings

In biolerplate's config.js file modify the following to:

```javascript line 49 - lib/backbone-boilerplate/build/config.js concat: { "dist/debug/require.js": [ "assets/js/libs/almond.js", "dist/debug/templates.js", "dist/debug/require.js" ], "../assets/javascripts/require-app.js": [ "assets/js/libs/almond.js", "dist/debug/templates.js", "dist/debug/require.js" ] }, ``` ```javascript line 67 - lib/backbone-boilerplate/build/config.js mincss: { "dist/release/index.css": [ "assets/css/style.css" ], "../assets/stylesheets/index.css": [ "assets/css/style.css" ] }, ```

Creating a Rails Layout and Controller

To build the app, go to lib/backbone-boilerplate and run node build default mincss. The build script will create lib/assets/javascripts/require-app.js that includes both the backbone-boilerplate application and the template files. In next step create a rails layout file app/views/layouts/bbapp.html.erb with the following content:

```html bbapp.html.erb<%= stylesheet_link_tag "application", :media => "all" %> <%= csrf_meta_tags %><%= javascript_include_tag "bbapp", "data-main" => "app/index" %>```

To plug the backbone app into the asset pipeline create assets/javascript/bbapp.js with the following contents:

```javascript bbapp.js // //= require require-app ```

Now we need to let rails know that it needs to compile bbapp.js for production. To do this open config/environments/production.rb and after config.assets.compile = false add:

```ruby config\environments\production.rb config.assets.precompile += %w( bbapp.js ) ```

To test that this works, we'll create a controller that has a single action that uses the bbapp.html.erb layout. From the root of the rails-bb application:

```bash rails generate controller BackBoneBoilerplate app ```

Go to the controller that was just created: back_bone_boilerplate_controller.rb and specify the layout:

```ruby app/controllers/back_bone_boilerplate_controller.rb class BackBoneBoilerplateController < ApplicationController layout 'bbapp' def app end end ```

Final Steps

In config/routes.rb a root route is added to point to the controller actiona associated with the backbone app: root :to => 'back_bone_boilerplate#app' At this point we're nearly done. Unfortunately to get the backbone.png to load I changed the src attribute, of the img tag on line 2, in lib/backbone-boilerplate/templates/example.html to src="/assets/backbone.png" and then from lib/backbone-boilerplate:

```bash cp assets/img/backbone.png ../app/assets/images/backbone.png \\recompile node build default mincss cd .. rails server ```

If all went well, when you go to http://0.0.0.0:3000 you should see:

While the above approach works, it was laborious and requires rebuilding the application with each change. Watching for changes with node build watch would certainly help. I think the advantage of this approach is that in development you can debug the JavaScript, while in production the javascript is minified and goes through the asset pipeline like any other JavaScript file in a Rails app.