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
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'
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'
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
Next, at the terminal, install the latest version of Ember:
rails g ember:install --head
And, again at the terminal, bootstrap your app with all of the appropriate folders and file:
rails g ember:bootstrap
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
config/routes.rb adding the following line to route “/” to the newly created controller and action:
root :to => 'static#index'
And then, finally, remove public/index.html with
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: Ember.VERSION : 1.0.0-rc.1
DEBUG: Handlebars.VERSION : 1.0.0-rc.3
DEBUG: jQuery.VERSION : 1.9.1
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
1 2 3
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.