Data with Rails and Ember CLI, Part 2: Building the Front End

In this post, we will finally be setting up the Ember front end to request data from the Rails back end we got up and running in my previous post: Data with Rails and Ember CLI, Part 1: Setting up the API. If you’ve already followed along with those steps, then you’re all set to get started here!

Adapters and Models and Routes, Oh My!

In order for our Rails server to actually send the information in a way that Ember Data will understand, we need to set up ActiveModelSerializers and specify an adapter. To do this, start by adding the following line to your Gemfile:

gem 'active_model_serializers', '~> 0.10.0'

Then, run a bundle command to update the dependencies. Next, add a new file, config/initializers/active_model_serializers.rb, and paste in this code:

require 'active_model_serializers'

ActiveModelSerializers.config.adapter = :json_api

Before we think about sending a request to the server, however, we need to have a model on the front end to represent the data we’ll be receiving. This model will go in frontend/app/models/dog.js:

import DS from 'ember-data';

export default DS.Model.extend({
  name: DS.attr(),
  age: DS.attr(),
  breed: DS.attr(),
});

Next, we need to update frontend/app/router.js and add a route for the dogs:

Router.map(function() {
	this.route('dogs');
});

Then we can define the route in frontend/app/routes/dogs.js, like so:

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return this.store.findAll('dog');
  }
});

We’re getting close, but this still won’t send the correct request. If you visit http://localhost:3000/dogs and watch the network traffic, the request for our dogs will come back with a 404 error.

To fix this, we’ll need to create another adapter on the front end. This will live in frontend/app/adapters/application.js. Go ahead and create that file. Then add the following code, which tells the data store which namespace to use when making requests:

import DS from 'ember-data';

export default DS.JSONAPIAdapter.extend({
  namespace: 'api/v1'
});

Now, if you refresh the route and check the network traffic, you’ll see the request succeed. That means we’re finally ready to do something with it!

Adding a Template

Before we add our own template, we’ll want to remove the standard welcome page that Ember displays. It’s not that we don’t enjoy the Tomster, but things might get a bit messy if we suddenly throw a bunch of dogs into the mix.

To remove the welcome message, simply open up frontend/app/templates/application.hbs and remove the {{welcome-page}} line and its surrounding comments. Be sure to leave the {{outlet}} in there, though!

Since we won’t be doing anything complex with our data or handling any actions, I’m going to skip adding a controller. If you do want more information on how to use controllers in Ember, you can check out the Ember.js Guides.

Now, all we need to do to display our information is to make a template file to match the route. Go ahead and create frontend/app/templates/dogs.hbs, and paste in the following markup:

<table>
  <tr>
    <th>Dog</th>
    <th>Breed</th>
    <th>Age</th>
  </tr>

  {{#each model as |dog|}}
    <tr>
      <td>{{dog.name}}</td>
      <td>{{dog.breed}}</td>
      <td>{{dog.age}}</td>
    </tr>
  {{/each}}
</table>

Now, refresh the page one last time, and you should be greeted by a table with all the information about your pups. Hooray!

Parting Words

Because this was just a simple two-part walkthrough, I did not spend any time covering testing. However, I would highly encourage everyone to include tests in their own applications.

If you’d like to get some more information on testing Rails applications, you can go here. For testing in Ember applications, you can check out more of the Ember.js Guides here.

Thank you for following along, and I hope you enjoy your shiny new Rails and Ember application!