Ember Fastboot

FastBoot allows Ember to be rendered on both a server and browser instead of only a browser. Ember is great after it’s downloaded however on first page load downloading and evaling javascript in the browser takes too long. FastBoot is the best of both worlds, you get a fast initial page load and fast interactions after loading.

ember-fastboot.com has a great tutorial on how to get started, so I’m going to focus on specific issues I ran into when trying to implement FastBoot.

Setting up the development environment

The development environment was the most frustrating part of working with FastBoot in my opinion. Currently, live reloading doesn’t work so any time I wanted to make a change I had to restart the FastBoot server. Also there’s no proxy option for ember fastboot so you need to add an adapter host.


Authentication with FastBoot isn’t too hard, really. The main issue I ran into was realizing that FastBoot makes API calls too and consequently it needs auth headers. So, if you’re authenticating with a cookie, you need to pull the cookie off of the request to the FastBoot server and then send that along with future requests. The easiest way I found to do this is with an adapter header.

What to defer

By deafult FastBoot tries to call all of your model hooks and renders the page based on those hooks. So if you have a widget on your page that makes an AJAX call that isn’t in a model hook it’s not going to get called. There’s a function called deferRendering that can get around this which I haven’t used yet but it’s something to be aware of.

The shoebox

When you’re using FastBoot a lot of work is duplicated because the same code is used for both the server and client. For example, when your route makes an API call it happens in both FastBoot and on the client. The solution to this is the shoebox. The shoebox lets fastboot render your model’s JSON on index.html and load that into the store from the client. I recommend taking a look at ember-data-fastboot and adapting to your needs.

Caching Middleman & Nginx

I recently setup a blog with Middleman served through Nginx. I always forget the best way to cache assets, so this is a nice reminder for me and anyone interested. In general you want to cache images, javascript, and css in the client users browser for a long time so no request has to be made. In nginx this is pretty simple to do

location ~* \.(?:ico|css|js|gif|jpe?g|png)$ {
  expires 30d; # expires after 30 days
  add_header Cache-Control "public"; # clients can cache

With Middleman you need a way to bust the cache, you can do this with fingerprints.

configure :build do
  activate :asset_hash

Now to test curl -I https://raymondjcox.com/images/face-d04725c4.png returns

HTTP/1.1 200 OK
Server: nginx/1.11.1
Date: Thu, 16 Jun 2016 01:33:18 GMT
Content-Type: image/png
Content-Length: 40257
Last-Modified: Thu, 16 Jun 2016 00:58:02 GMT
Connection: keep-alive
ETag: "5761f99a-9d41"
Expires: Sat, 16 Jul 2016 01:33:18 GMT
Cache-Control: max-age=2592000
Cache-Control: public
Accept-Ranges: bytes