holy moly

pangratz prattles

GitHub Dashboard #1

So I wanted to create an Ember.js application which uses the Router feature as well as Ember-Data.

I also think that the current GitHub Dashboard at github.com/dashboard is not that useful. It’s hard to keep up with what’s going on in a specific project you are following. Which issues have been created, what are the discussions on Pull Requests, when has a new download been created, etc. I’m currently following 372 repositories. Some of them are written in languages I’m not really interested in any more. But there is no way to filter repositories based on a written language. Or sort them by count of watchers. Or by fork count. Or whatever.

Well, those are enough reasons to change that. To implement an own version of GitHub Dashboard. Using Ember.js. And Ember-Data. And Twitter Bootstrap, because I suck at design. I think about a dashboard which will be easily hackable. Fork it and you have your own version of the Dashboard running.

I plan to develop the dashboard and post updates on this blog. This hopefully helps some developers to get to know Ember.js better and help them to understand, how to build awesome applications using this very handsome framework.

Initial setup

Before I start coding the actual dashboard, I want to create an environment which allows me to deploy, run and test the dashboard with a single command. There is already a basic template which offers these basics for an Ember.js application. It’s hosted at https://github.com/interline/ember-skeleton. So I cloned the repository into the dashboard folder:

1
2

git clone https://github.com/interline/ember-skeleton dashboard
cd dashboard

After the repository is checked out, the origin remote still points to the interline/ember-skeleton repository. I removed this and created a new repository on my GitHub account via the awesome hub command line utility:

1
2

git remote rm origin
hub create

So now there is a repository dashboard. The dev branch of the dashboard will be the one where the development will happen, where the master branch is always deployable. For this I created a new branch via git checkout -b dev and set this one as default on the GitHub repository. Ready for a push: git push -u origin dev.

Minor changes

To finalize the structure of the project I made some minor changes: I moved the index.html into the app folder and adapted the Assetfile to respect the new location of the index file. I also changed the output for the test files to be test_assets and updated the tests/index.html accordingly. This keeps the asset folded clean of any tests and only keeps application specific files.

I added a clean task and created a task deploy which builds the app using the available build task and then pushs the created application inside the assets folder to the gh-pages branch of the repository:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

desc "deploy app"
task :deploy => :build do
  origin = `git config remote.origin.url`.chomp
  cd "assets" do
    system "rm -rf .git"
    system "git init"
    system "git remote add origin #{origin}"
    system "git checkout -b gh-pages"
    system "git add ."
    puts "\n## Commiting: Site updated at #{Time.now.utc}"
    message = "Site updated at #{Time.now.utc}"
    system "git commit -m \"#{message}\""
    puts "\n## Pushing generated website"
    system "git push origin gh-pages --force"
    puts "\n## Github Pages deploy complete"
  end
end

I’ve also updated the QUnit Framework to version 1.9.0, Ember.js and Ember-Data to the latest version from GitHub and added Handlebars.js. To simplify further updates of those libraries, I’ve added a namespace upgrade which contains tasks to update these to their latest versions:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

namespace :upgrade do
  def download_ember(repo_name, source = repo_name, target = source)
    FileUtils.rm_rf "tmp/#{repo_name}"
    `git clone https://github.com/emberjs/#{repo_name} tmp/#{repo_name}`
    Dir.chdir("tmp/#{repo_name}") do
      `bundle install`
      `rake dist`
    end
    FileUtils.copy "tmp/#{repo_name}/dist/#{source}", "app/vendor/#{target}"
    FileUtils.rm_rf "tmp/#{repo_name}"
  end

  task :ember do
    download_ember("ember.js")
  end

  task :data do
    download_ember("data", "ember-data.js")
  end

  task :qunit do
    FileUtils.rm_rf "tmp/qunit"
    `git clone https://github.com/jquery/qunit tmp/qunit`
    Dir.chdir("tmp/qunit") do
      latest_tag = `git describe --abbrev=0 --tags`
      system "git checkout #{latest_tag}"
    end
    FileUtils.cp_r "tmp/qunit/qunit/.", "tests/qunit"
    FileUtils.rm_rf "tmp/qunit"
  end

  task :all => [:ember, :data, :qunit]
end

task :upgrade => ["upgrade:all"]

Roundup

Now the basic setup for developing the dashboard is done. For developing I’ll do a bundle exec rackup and go to http://localhost:9292. To test the app I can either go to http://localhost:9292/tests/index.html or do a rake test or bundle exec guard to execute the tests whenever a file changes. Nice.

To deploy the dashboard, just fork pangratz/dashboard, git clone it and do a rake deploy. The current status of the dashboard repository with the code from this blog post is available at tag v0.0.1.

In the next steps I will create an Ember.js application which renders information gathered from the GitHub API.

If you have any questions or suggestions, leave a comment or tweet me at @pangratz.

Comments