Liam Kaufman

Software Developer and Entrepreneur

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

Getting Started
1
2
3
4
5
6
7
8
9
10
11
12
13
14

// 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:

line 49 - lib/backbone-boilerplate/build/config.js
1
2
3
4
5
6
7
8
9
10
11
12
13

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"
  ]
},
line 67 - lib/backbone-boilerplate/build/config.js
1
2
3
4
5
6
7
8
9

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:

bbapp.html.erb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1">

  <title>RailsBb</title>
  <%= stylesheet_link_tag    "application", :media => "all" %>
  <%= csrf_meta_tags %>
</head>
<body>

  <!-- Main container -->
  <div role="main" id="main"></div>

  <!-- Application source -->
  <%= javascript_include_tag "bbapp", "data-main" => "app/index" %>

</body>
</html>

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

bbapp.js
1
2

//
//= 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:

config\environments\production.rb
1

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: 

1

rails generate controller BackBoneBoilerplate app

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

app/controllers/back_bone_boilerplate_controller.rb
1
2
3
4
5
6
7

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: 

1
2
3
4
5
6
7

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.

Comments