Ember setup

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