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.

Preparation

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

• Homebrew
• Git
• rbenv
• Rails
• Node.js
• Bundler
• Ember CLI
• PostgreSQL

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
	create  README.md
	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: "/"
end

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!