Candidly Integrating EmberJs with Ruby on Rails API

When I first came to Mumbai, I was working in a Ruby on Rails CRM project which had Rails as an API and Embedded ruby files as views, some part of that project was built using ReactJs. I later joined a team working on a web project with a Rails backend and an Ember frontend. I had no prior experience with Ember to be frank but I had little understanding of Javascript frameworks such as ReactJs, so it became a little easier. I went in search of tutorials to start learning Ember.

I had a prior working experience in Ruby on Rails, so it was easy-going for me to grasp the API, but for Ember learning(despite the fact, that I knew some Javascript frameworks), in the beginning it was really tortuous. But later I found a good resource for EmberJs framework. I started with Ember’s Quick Start Guide. Then I found Vic Ramon’s Ember Tutorial.

Note: For people who also want to learn Rails framework, I will recommend APIs on Rails by Abraham Kuri or Ruby on Rails tutorial by Michael Hartl.

Vic’s tutorial was practically awesome. He explains how to build an Ember application with a Rails backend. While learning ember through his tutorial, I found that it would be helpful to have the steps to demonstrate how the things go in Ember CLI and Rails altogether in one place.

So I decided to write a blog, on integrating Rails API and EmberJs as frontend framework.

Pre Requisites

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

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

Creating the API

Let’s first begin with creating the Rails API.(I believe that you guys have already installed rails on your computers)

Run the following command in you directory wherever you want to create the project. Simply in the command line type and press enter.

$ rails new ember-rails-api -d postgresql
  create 
  create Readme
  .
  .
  .

Now lets install all the dependencies by running bundler. Enter the directory and type bundle install.

$ cd ember-rails-api
$ bundle install

Create the db for our API by running

rake db:create
Created database 'ember-rails-api_development'  
Created database 'ember-rails-api_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

Now as our backend has been created, now lets create our front-end. i.e. the Ember app. 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, the gist for all of that is extracted here for convenience:

First, add this line to your Gemfile:

.
gem “ember-cli-rails”
.
.

Run bundle install

This will install this library onto our Rails API. Now let’s create our Ember application.

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

Now let’s generate the gem’s initializer

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

Then install the ember-cli-rails-addon:

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

And finally let’s configure rails routes file,

# ember-spin/config/routes.rb  
Rails.application.routes.draw do   
  mount_ember_app :ember-frontend, to: "/"
end

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

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

Please share this blog to your peers if you find this blog helpful.

Thanks