Getting Started with Rails and Ember CLI

When I first became an Atom in January, I joined a team working on a web project with a Rails backend and an Ember frontend. I had no prior experience with either framework and went in search of tutorials to start learning.

I found good resources for each framework separately, like APIs on Rails by Abraham Kuri Vargas and Ember’s Quick Start Guide. Then I found Vic Ramon’s Ember Tutorial.

Vic’s tutorial was practically perfect. He explains how to build an Ember application with a Rails backend. The only difference from what I was looking for was he uses Ember Rails, not Ember CLI. Vic acknowledges in his introduction that Ember CLI has become standard since he wrote the tutorial and recommends anyone starting fresh to use it.

While working through his tutorial, I found that it would be helpful to have the steps to get things going in Ember CLI and Rails all in one place.


Before beginning, you should have all of the following installed:

Getting on Rails

First, let’s start by making a new Rails app. Run this command from the directory in which you want your application’s directory (in our case, ember-spin) to live.

$ rails new ember-spin -d postgresql
	create  Rakefile

And just like that, we have a fresh new Rails app. Sweet!

Next, navigate into the new directory that was created, perform a bundle, and create a database. Use the following commands to do that:

$ cd ember-spin
$ bundle
	Using ...
$ rake db:create
	Created database 'ember-spin_development'
	Created database 'ember-spin_test'

Now you can run your server with the command rails s. After you do that, you can navigate to localhost:3000 in your browser, and you should see a celebratory message that you’re officially on Rails!

Creating the Ember Frontend

Next, it’s time to venture into Ember land. To integrate Rails and Ember, we’ll be using Ember CLI Rails. We need to follow along with the Install, Setup and Mount instructions from the README, condensed here for convenience:

First, add this line to your Gemfile:

gem “ember-cli-rails”

Then, run bundle install to install that gem we just added. Then, let’s create an Ember application:

$ ember new frontend -skip-git
	installing app
  		create ...

Next, generate the gem’s initializer:

$ rails generate ember:init
	create  config/initializers/ember.rb

Then install the ember-cli-rails-addon:

$ cd frontend
$ ember install ember-cli-rails-addon

And finally, configure the Rails routes.rb file like so:

# ember-spin/config/routes.rb

Rails.application.routes.draw do
  mount_ember_app :frontend, to: "/"

Now, restart the server and visit localhost:3000 once again. You should be greeted with a message that your Ember app is working!

That’s all there is to get off the ground. Good luck with your new Rails and Ember application!

  • dirkdirk says:

    Awesome post! Thanks Laura … got me up and running in no time flat!

    Interesting that the ember welcome page didn’t show for me. But created `/frontend/app/templates/application.hbs`, threw some text in there, refreshed the browser, bam! in business.

    Now to get watchman on the job … no likey manual refresh.

  • Kiffin Gish says:

    Nice summary, it’s all so very easy if you know what you’re doing! One minor note, however. Since you’re using ember for the front-end, you only need the rails api components. Namely:

    $ rails new ember-spin -d postgresql –api

  • Jae Whan Woo says:

    Hi Laura! This tutorial has been very helpful to me! I’m wondering if you were going to do more tutorials? I’m specifically stuck at how to get the ember app (frontend) to send and receive json data from the rails app (ember-spin). Any pointers or resources that can teach me how to do this would be greatly appreciated! Thanks for the tutorial!

    • Laura Robb says:

      I’m glad this quick tutorial was helpful for you, and thank you for leaving this comment! It’s been a while since you left it, and you may not need the help any more, but I was encouraged by your request to go write a post on sending/receiving JSON data using Rails and Ember CLI. If you (or anyone else reading) would like more information on it, you can check out my post here:

  • shane says:

    Thanks for posting this – very helpful

  • Tally says:

    Super helpful!

    Just a note that the preceding hyphen in `ember new frontend —skip-git` on your page is an em-dash rather than a normal hyphen. I had copy-pasted this and was wondering for a few minutes why I was getting an error!


  • Clear, simple and an awesome step-by-step post. Greate job Laura and thank you! :)

  • manseed says:

    Vic Ramon’s Ember Tutorial..this link not working

  • Comments are closed.