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 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:
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!
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.
Thanks, dirkdirk! That’s definitely good to know. I did a little looking and it seems like older versions of Ember CLI were not generating that template file (https://github.com/emberjs/guides/issues/1491), but it should be generated in v2.11.0+ (https://github.com/ember-cli/ember-new-output). I wonder if that may be why the file wasn’t present in your application? For reference, I had v2.11.1 when writing this post.
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
Thank you for the advice, Kiffin! I was not aware of that option. While looking up more information on this I also found the following page, which might help some others (like myself) who are still learning: http://edgeguides.rubyonrails.org/api_app.html
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!
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: https://spin.atomicobject.com/2017/10/02/rails-ember-cli-data-api/
Thanks for posting this – very helpful
You’re welcome. Thanks for reading!
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!
Thank you for bringing that to my attention. Fixed!
I’m glad the guide was helpful for you. If you need want more detail on getting the server set up and making requests from the client, you can check out my post here, which picks up where this post left off: https://spin.atomicobject.com/2017/10/02/rails-ember-cli-data-api/
Clear, simple and an awesome step-by-step post. Greate job Laura and thank you! :)
Vic Ramon’s Ember Tutorial..this link not working
Comments are closed.