Ember.js is a client-side framework that aims at single-page applications. It has several tools to abstract the most common patterns. The most used tool for running Ember apps nowadays is ember-cli, written with Node.js. It is the canonical way of running Ember apps, since the RFC formalizing the v2.0 release. But even with all these features, sometimes you just want to keep your workflow and use Rails.
In this article you’ll see how to set up Ember in a Ruby on Rails app, with testing support using QUnit.
First, install the latest stable version of
node (version 0.12.x). To do so, either follow the installation instructions on nodejs.org or install it using
brew. Once you’ve installed Node, you’ll need to install the
ember-cli package globally; this will give you access to the ember command-line runner.
$ npm install ember-cli -g $ ember -v version: 1.13.12 node: 0.12.7 npm: 2.14.10 os: darwin x64
The next step is to install the latest version of the
$ gem install rails $ rails -v Rails 4.2.5
Creating an Ember-ready Rails app
Create a new Rails project skipping
bundle (we need to adapt
$ rails new ember-rails-example --skip-bundle
Now add the ember-cli-rails gem to the
Gemfile Rails generated for us
At this point you can install the dependencies with
bundle install. The
ember-cli-rails gem provides a generator called
ember-cli:init, that will basically create an initializer file. Go ahead and generate it.
$ rails g ember-cli:init create config/initializers/ember.rb
You can use this initializer to setup your Ember apps. By default it’s configured to use an application called
frontend that must live under
# config/initializers/ember.rb EmberCli.configure do |c| c.app :frontend end
Now you need to let Rails know which path you want the Ember app mounted to; to this purpose, you can invoke
mount_ember_app in the routes file, like this:
# config/routes.rb Rails.application.routes.draw do mount_ember_app :frontend, to: '/' end
By default, routes defined by ember_app will be rendered with the internal
EmberCli::EmberController. Such controller renders the Ember application's index.html and injects the Rails-generated CSRF tags into the
<head>. For customization please follow ember-cli-rails documentation.
Creating the Rails-hosted Ember app
Everything we’ve done so far was configuring our Rails app. Now it’s time to generate the
frontend Ember application. You’ll have to use the ember command for this. From your Rails app root directory, just type:
$ ember new frontend --skip-git
You also need to install the ember-cli-rails-addon NPM package. Do it from your Ember app directory.
$ cd frontend $ npm install --save-dev ember-cli-rails-addon
Be sure that the addon's MAJOR and MINOR version matches the gem's MAJOR and MINOR versions.
Start it up!
We're now ready to start our app just like any other Rails app:
$ rails s => Booting WEBrick => Rails 4.2.0 application starting in development on http://localhost:3000 => Run `rails server -h` for more startup options => Ctrl-C to shutdown server [2015-03-12 16:50:13] INFO WEBrick 1.3.1 [2015-03-12 16:50:13] INFO ruby 2.2.0 (2014-12-25) [x86_64-darwin13] [2015-03-12 16:50:13] INFO WEBrick::HTTPServer#start: pid=6355 port=3000
Start your browser and open Developers Console, then access localhost:3000 and if you see Ember stuff logged like this, then congratulations! You're successfully up&running with Rails+Ember!