Series: Journey to Ember-CLI


Published on Jan 31, 2015

ember-cli-rails can help make Ember and Rails work together in one repository. In this screencast, we set up a very simple app using the tool.




Hey, and welcome back to SparkCasts. Today we're going to be talking about ember-cli-rails. It's a way to use Ember CLI within your rails app so you get to have the add-ons and the conveniences of Ember CLI while still keeping everything in one application.

The ember-cli-rails ReadMe is pretty good if you already know your way around Rails and Ember CLI. What we're going to be doing today is making a very simple ember-cli-rails app from scratch. We're going to start by creating a Rails app and we're going to call it API since that is the purpose of it. We're not going to use Rails API because I've done this before. I ended up having some troubles with some gems that wouldn't work properly without some of the things that Rails API cut out.

Next, install Ember CLI if you haven't already. Then, generate a new Ember app by typing "ember new" and then the name of the app, which for us will be called "client." You'll notice, when we go in here that it's already created a git repository for us. We're going to want to remove that so that we can make our own git repository in the folder that contains both our rails app and our Ember app.

Now that we've initialized both our rails app and our Ember app we're going to make some changes so we can get them working together. First, we'll open up our editor and go to our gem file. Turbolinks is great for vanilla Rails apps but it messes up ones that rely heavily on AJAX, so we'll take it out. We'll replace it with ember-cli-rails. Then we will run bundle, we will go into our Rails folder and then run bundle, and it's installed.

Of course, before we forget, we should go to our Javascripts assets folder in application.js and remove turbolinks because Rails will complain if we don't.

ember-cli-rails comes with a Rails generator which will give use some of the things that we need to connect them. We will run the initialize generator. What this creates is an initializer file and this is showing that we have one Ember CLI app. You can have multiple apps and you can also change where they are. To make it recognize this one, we are going to have to move up a level and then to client since I'm doing my folder structure a little bit differently than ember-cli-rails expects.

Next, we're going to have to go into our Ember CLI folder and install the ember-cli-rails add-on using npm. This tells Ember CLI that it's going to be talking to rails through ember-cli-rails.

Now, let's get rails talking to Ember CLI. We'll first create a route and the root route will go to the applications controller, the index action. We'll create the index action and in here, we'll render the index view. We will then create a new folder called application in our Views folder and in there we will create index.html.erb. Here, we'll include these two tags which will bring in our Ember assets.

From there, we'll go back to the folder which has our rails and then we will start up the server. Go visit our website at localhost:3000, which is where your rails normally lives, and it works. If you bring up the developer console, you can see that it is indeed loading Ember. If you want to check out this app, then you can go to ember-cli-rails demo on my GitHub repository. I'll include this link in the show notes. Be sure to go to the commits and then check out what I had to change in order to make them work together.

This has been the first SparkCast of 2015 and I hope there will be many more. I'll see you soon.

Journey to Ember-CLI

Subscribe to our mailing list