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
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
You can find all of the code for this post at
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 Theme #
We will be using stock Twitter Bootstrap for this project so let’s add the
gem to our
... # Front-end framework for developing responsive, mobile first projects on the web. gem 'bootstrap-sass', '~> 3.1.1'
And configure it by creating a
// 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-source gems for Ember assets and scaffolding to our
... # 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
should look like this:
//= require jquery //= require_tree .
I also renamed the generated
Next move the html from
home/index.html.erb and replace it with the following:
Then we can move the html generation to ember by placing it in the top level
application.hbs handlebars file.
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