Ember setup

heartsentwined edited this page Oct 18, 2013 · 11 revisions

Ember setup


CHANGES This page has been updated for the 9.x branch. Legacy instructions are gone - clone this wiki repo and checkout the 8.x tag.


Seed the database

Just so our ember app will have some sample data to work on, let's create some users and some posts.

db/seeds.rb:

User.create([
  { email: 'foo@example.com', password: 'foopassword' },
  { email: 'bar@example.com', password: 'barpassword' }
])
Post.create([
  { title: 'post 1' },
  { title: 'post 2' },
  { title: 'post 3' }
])

Seed it.

$ rake db:seed

Optional: manual testing

Before starting on the ember part, you can start the server and use the APIs yourself, if you want to get a feel of what the ember app will be facing.

Start the server by

$ foreman start

This is different from commands like

$ rails server
$ unicorn

in that we utilize same setup, via foreman, as our heroku app. This is made possible by the Procfile we created - foreman will read this file and determine what child processes to fork when initializing.

Access your API end points from a RestClient browser plugin, from curl, or whatever you like.

Stop the server by Ctrl+C.

Server setup

Make a dummy home#index action to serve as the entry point for our app.

spec/controllers/home_controller_spec.rb:

require 'spec_helper'

describe HomeController do

  describe 'GET index' do
    before { get :index }
    it 'returns http success' do
      response.should be_success
    end
  end

end

The route. config/routes.rb:

  root to: 'home#index'

The controller. app/controllers/home_controller.rb:

class HomeController < ApplicationController
  def index
  end
end

The view. It should normally just be an empty file. app/views/home/index.html:

<!-- nothing in here -->

The wildcard route

We will be using the history API to enable prettier URLs for users. Unfortunately, this will create a myriad of possible entry routes for our app.

Our spec will generate a random GET request each time, and expect it to be routed to our home#index controller.

spec/routing/ember_spec.rb:

require 'spec_helper'
require 'securerandom'

describe 'ember wildcard route' do
  let(:route) { SecureRandom.hex(16) }

  it 'routes to home#index' do
    expect(get route).to route_to(
      controller: 'home',
      action: 'index',
      ember: route # see note below
    )
  end
end

Define a wildcard route for rails to catch all these entry routes. Unfortunately, you must capture the wildcard portion in a route param - any route param; you cannot just declare a * part and disregard the portion. We'll thus capture it into a ember param, and this has to be reflected in the specs too. (Try removing that line, see what happens.)

config/routes.rb:

  get '*ember' => 'home#index'

Make sure that this line is at the bottom of all your routes, otherwise everything will be captured by it.

Ember setup

Let ember-rails generate a set of skeleton files for us.

$ rails g ember:bootstrap

We will be working in app/assets/javascripts from this point onwards.

We will also be using *.coffee for default *.js files, and *.emblem for default *.handlebars files.

Another convention adopted is to drop the redundant _controller for controllers: controllers/foo_controller.js becomes controllers/foo.coffee. Same for _view and _route.

Add ember-auth to sprockets. Also remove the not needed jquery_ujs.

application.coffee:

#= require jquery
#= require handlebars
#= require ember
#= require ember-data
#
#= require ember-auth
#
#= require_self
#= require ember-auth-rails-demo

window.EmberAuthRailsDemo = Em.Application.create()

#= require_tree .

Em is a useful shorthand for Ember.

Here I have also renamed the default ember_auth_rails_demo.js|coffee to ember-auth-rails-demo.js|coffee. Just looks nicer and more consistent to me.

Continue to Auth UI