Ember Rails Basic Application Setup

I had some problems setting up an ember-rails project to do the most basic thing of displaying a model on the page. Without a working base to start from I found it hard to do a lot of the more advanced things as I didn’t know where the bugs were coming up. So, I decided to record the exact commands I used to create a core “working” application so if I needed to start from scratch again I could do it easily. Here is the process:

Console:
rails _3.2.13_ new app_name -d postgresql
cd app_name

add ember gems to Gemfile:
gem 'ember-rails'
gem 'ember-source', '1.0.0.rc6'
gem 'handlebars-source', '1.0.0.rc4'

Console:
bundle install

Create your database

Console:
rails g ember:bootstrap -g --javascript-engine coffee

add following to development/production environment files
config.ember.variant = :development

Console:
rails g model contact first_name:string last_name:string
rails g controller contacts index
rails g serializer contact first_name last_name
bundle exec rake db:migrate
rails runner "Contact.create(:first_name => 'Tim', :last_name => 'West')"

set routes in routes.rb:
resources :contacts
root :to => 'application#index'

send json from contacts_controller index:
def index
render :json => Contact.all
end

Create a blank file app/views/application/index.html.erb

Console:
rails g ember:model contact first_name:string last_name:string
rails g ember:controller contacts index
rails g ember:view contacts
rails g ember:template contacts
rails g ember:route contacts

The view generator may not be necessary, I haven’t quite figured that out yet.

In application.js make sure the application variable is set to what are going to use throughout the rest of the application e.g. App = Ember.Application.create();

router.js.coffee :
App.Router.map ()->
@resource('contacts') #set contacts resource

#add index route to redirect to contacts
App.IndexRoute = Ember.Route.extend
redirect: ->
@transitionTo('contacts')

contacts.handlebars :
{{#each model}}
{{firstName}} {{lastName}}
{{/each}}

contacts_route.js.coffee :
App.ContactsRoute = Ember.Route.extend({
model: ->
return App.Contact.find()
})