Creating A Metrics Dashboard With Ember.js, Bootstrap, and Rails - Part 1

This is part one of a series on building a metrics dashboard with Ember, Bootstrap, and Rails. Over the next few weeks
I will be building out more functionality and writing posts to cover that. You can find part two
here.

There are some services that will provide dashboards and visualizations for you like
Geckoboard, but once you need to provide custom analytics and graphs to clients or
co-workers you will need something a little more flexible.

Today we’re going to assemble the first pieces of this app by creating a Rails server, an Ember.js App and some basic
Bootstrap styling.

You can find all of the code for this post at
github.com/jtescher/example-ember-rails-dashboard.

The Rails Server #

We want to be able to expose all of our stats from various internal and third party services with a consistent API so
this server will primarily handle authentication and data transformation. This server could just as easily be written
in Node.js or any language/framework, but for now we’ll stick with Rails.

Create the server (skipping ActiveRecord and TestUnit because we don’t need a database for this app and we will be
testing with Rspec):

$ rails new dashboard --skip-test-unit --skip-active-record

Then we want to add the route that will render our dashboard. We will use the home controller and the index action:

$ rails generate controller Home index --no-helper --no-assets

We wil route everything to Ember, so replace your config/routes.rb file with the following:

# config/routes.rb
Rails.application.routes.draw do
  root 'home#index'
end

If you start your server now with $ rails server and open up localhost:3000 you should see
the following:

The Theme #

We will be using stock Twitter Bootstrap for this project so let’s add the bootstrap-sass
gem to our Gemfile.

...
# Front-end framework for developing responsive, mobile first projects on the web.
gem 'bootstrap-sass', '~> 3.1.1'

And configure it by creating a bootstrap_config.css.scss file.

// app/assets/stylesheets/bootstrap_config.css.scss
@import "bootstrap";

Then we can change the home/index.html.erb view to the following:

<div class='container'>
  <div class='jumbotron'>
    <h1>Hello from Twitter Bootstrap!</h1>
    <p>Lots of predefined style that makes things easy to prototype!</p>
  </div>
</div>

And when you restart the server you should see:

The Ember.js App #

We can now add the ember-rails and ember-source gems for Ember assets and scaffolding to our Gemfile.

...
# JS framework for creating ambitious web applications.
gem 'ember-rails',  '~> 0.14.1'
gem 'ember-source', '~> 1.5.0'

And install the Ember assets with:

$ rails generate ember:bootstrap

We can also remove turbolinks as ember will handle all the routing after the first page load. Your application.js file
should look like this:

//= require jquery
//= require_tree .

I also renamed the generated app/assets/javascripts/application.js.coffee file to be
app/assets/javascripts/app.js.coffee to not conflict with the first application.js file.

Next move the html from home/index.html.erb and replace it with the following:

<% # Rendered Entirely in EmberJS. See app/assets/javascripts %>

Then we can move the html generation to ember by placing it in the top level application.hbs handlebars file.

<!-- app/assets/javascripts/templates/application.hbs -->
<div class='container'>
  <div class='jumbotron'>
    <h1>Hello from Ember.js!</h1>
    <p>The link to the home page is {{#link-to 'application'}}here{{/link-to}}</p>
  </div>
</div>

And the end of part one should be rendered by Ember looking like this:

You can now go on to part two and start building dynamic
tables!