Middleman one of my favorite ways to build single page web applications these days. It is a simple static site generator that uses Sprokets. It is a really wonderful way to develop small applications.
This post is going to walk you through the process of setting up all the dependencies of an Ember.js App.
There are some builders and gems floating around these days. For the most part they fall behind Ember.js development too quickly. This ends up meaning that you spend more fixing dependencies than you do developing your app.
1. Install the middleman gem
2. Generate a middleman application
3. Add handlebars templates to the Gemfile
1 2 3 4
4. Configure the handlebars templates gem
1 2 3
This line of code tells our template compiler to strip out the
template path from our file names. So any file with the path
app/templates/template.hbs will be converted to
1 2 3 4 5 6 7 8 9 10 11
This is the project layout that I prefer to use. All application code
gets tucked away in the
app directory and all external libraries gets
tucked away in
Also note that I build these two files separately. This is because the
vendor file changes much less frequently than the
app.js file. This means
that the browser only has to update the
vendor.js when we change a
dependency, not when we change a line of application code.
6. Grab Dependencies
1 2 3 4
These four commands will get you the latest and greatest builds of Ember.js.
I personally like to work off the master branch. Bugs are getting fixed quickly these days, so it pays to be up to date.
7. Setup app.js and vendor.js
1 2 3 4
The require comments are part of sprokets.
require_self includes the
require_tree includes all the files alphabetically in
the directory specified.
1 2 3 4 5
vendor code needs to be loaded in a specific order.
8. Update layout.html.erb
We need to include our
app.js on the web page. Middleman
makes this pretty easy by providing the
9. Clear out index.html.erb
Empty the contents of
10. Handlebars template application.hbs
You did it! Checkout your masterpiece
If you followed all the steps then you should see Hello Ember.js when
When Ember.js has a stable release I will gladly turn this into a more full featured middleman template.