The No Nonsense Guide to Ember.js on Rails

Written by

This is a no nonsense, no steps skipped guide to getting a new Rails app running the latest version of Ember.js.

First, make sure you have the latest version of Rails. While this isn’t strictly necessary to necessary to run Ember, there have been quite a few security vulnerabilities in Rails recently and you’ll sleep better knowing you have the latest and greatest. Run gem update rails and grab a coffee, updating takes a couple of minutes.

Now, let’s get into it. At the terminal, start a new rails app:

> rails new app

Rails New

The name of your app is important because it’s what Ember will use for its namespace. For example if you call your Rails app photo_grid, then your ember namespace will be PhotoGrid. I’ve called the rails app, app. Since you’re usually building single page web apps with ember I like accessing Ember through the App namespace. It also makes sharing code between ember apps easier because App is a very common namespace.

Next, remove coffeescript from your Gemfile. You’re looking to delete the line that looks like this:

gem 'coffee-rails', '~> 3.2.1'

Remove Coffee Rails

The ember-rails generators will take advantage of coffeescript if it’s present. In the interest of having a no nonsense guide, let’s stick with pure Javascript.

And now the we add the real star of the show, ember-rails. In your Gemfile, in the assets group add this line:

gem 'ember-rails', git: 'git://github.com/emberjs/ember-rails.git'

Add Ember Rails

Back at the terminal, we’re now ready to install. Issue a bundle install to get ember-rails installed.

After ember is installed you need to tell Rails which version you’d like to use. Since we’re still not at 1.0, let’s use the development version. In your development.rb file add the following line at the end of the config section

config.ember.variant = :development

This sets ember to development mode and gives you, the developer, way more helpful error messages. If you’re planning to deploy this app to production, in you production.rb you should also add:

config.ember.variant = :production

Add Ember variant information

Next, at the terminal, install the latest version of Ember:

rails g ember:install --head

Add Ember head version

And, again at the terminal, bootstrap your app with all of the appropriate folders and file:

rails g ember:bootstrap

Bootstrap Ember

We’ve just walked through all of the steps you need to get Ember installed in your app. You’ve created a blank rails app, installed the latest version of ember, and created the directory structure and included the appropriate library files for Ember. Now it’s time to actually see Ember running on the page.

We’ll start by creating a controller and index action at the terminal:

rails g controller static index

Add static Controller

Then in config/routes.rb adding the following line to route “/” to the newly created controller and action:

root :to => 'static#index'

Add root Route

And then, finally, remove public/index.html with rm public/index.html.

Now, ember is installed and available on the root on the site. Start up rails (rails server) and navigate to your http://localhost:3000 and pop open the developer console. You should see something like:

DEBUG: ———————————————–
DEBUG: Ember.VERSION : 1.0.0-rc.1
DEBUG: Handlebars.VERSION : 1.0.0-rc.3
DEBUG: jQuery.VERSION : 1.9.1
DEBUG: ———————————————–

Ember Success

It’s possible you’ll see a warning: Uncaught Error: Error: The Ember Data library has had breaking API changes since the last time you updated the library. Please review the list of breaking changes at https://github.com/emberjs/data/blob/master/BREAKING_CHANGES.md, then update your store's revision property to 12. You can solve that by updating app/assets/javascripts/store.js to look like this:

1
2
3
App2.Store = DS.Store.extend({
  revision: 12
});

Ember JS is now setup in your Rails app. We covered a lot of ground here, we created a new rails app; add ember rails; added the latest version of ember; bootstrapped the app; and fixed a common error with ember data.


ember,, ember-for-rails,, rails

Comments or Questions? Contact Nick @nixterrimus on twitter.

Nick is a software engineer, geek, web enthusaist, open source contributor, home automation tinkerer, ocean admirer and all around general optimist living in San Francisco. Want to get in touch about professional matters? Nick Rowe is also available on LinkedIn.