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.
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
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:
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.
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
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
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.
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.