Enhance your Ember apps with FastBoot

If, like me, you’re making SPAs (or native webapps, whatever name you pick), you probably had to face two major challenges: SEO & Loading time .

SEO (Search Engine Optimization) is a well known challenge and can be poorly summarized as the way to optimize an application for search engine indexation. JavaScript & AJAX has long resulted in important issues for major search engines to deal with. Times have changed and all of them have made great progress but even the most advanced ones are admitting that they are only “generally able to render and understand your web pages like modern browsers” and “recommend progressive enhancement” (see here).

Loading time is one of the strongest criticism of SPAs and a powerful troll feeder for people against them. SPAs are indeed client-side applications and you have to load many resources from a server before you can effectively use it. This may lead, at best, to a spinner, at worst, to a blank page during the transfer, especially for low bandwidth users.

I will not compare frameworks here but, as far I know, very few of them are providing powerful solutions to both of these problems. Ember does now with FastBoot. FastBoot initially renders your ember app server-side and the regular client-side app will take over as soon as the required assets are downloaded and available. Search engines are then able to crawl the server-side rendered content, even if JavaScript is disabled. On the other part, users will see the content faster.

Note: FastBoot is still under development and has serious limitations mainly related to DOM manipulations. Only read-only content is rendered server-side, meaning that updates are currently disabled.

Make your app compatible

Your Ember app, initially designed to be rendered client-side, should now be able to be rendered server-side. This obviously leads to new constraints, particularly regarding network requests.

If you are using ember-data to fetch and manipulate data models, Ember is already managing network requests for you. Otherwise, your app is probably relying on jQuery.ajax() and this has no chance to work on a Node.js server.

To handle that, you’ll have to move to ember-network’s API which is designed to work “ both in the browser and in Node.js

Install and run locally

Adding FastBoot to your existing Ember application is as simple as:

ember install ember-cli-fastboot

It installs the ember-cli-fastboot addon and allows you to run a fastboot server locally at http://localhost:3000:

ember fastboot --serve-assets --port 3000

Pass ‘port’ argument to set a different port (default is 3000) or ‘serve-assets’ to make fastboot also serve static assets.


Deploying & running the app in production is also pretty straightforward. Like any other Ember app, you can easily deploy a FastBoot enabled app to some standard infrastructures such as Heroku, AWS Elastic Beanstalk or AWS Lambda using ember-cli-deploy (see here).

But you might prefer using your own server on your own infrastructure and FastBoot provides several tools to help you :

You first have to build your app for production:

ember build --environment production

This will package your app in the dist directory. Upload this directory to your server and run npm install inside. You will then be able to run a standalone FastBoot server using one of the following methods:

  • Command line: Install fastboot-cli globally on your production server and run it to provide a dedicated HTTP Server
npm install -g fastboot-cli
ember-fastboot path/to/dist/
npm init
npm install --save fastboot-app-server

add a server.js file

// server.js
"use strict";
const FastBootAppServer = require('fastboot-app-server');
let server = new FastBootAppServer({
distPath: 'path/to/dist'

install it and run it in production:

node server.js

In both cases, FastBoot will automatically scale and spawn one worker per core on your system:

[2016–05–18T15:33:39.530Z][m12088] using distPath; path=path/to/dist/
[2016–05–18T15:33:39.544Z][m12088] forked worker 9876
[2016–05–18T15:33:39.545Z][m12088] worker online
[2016–05–18T15:33:39.551Z][m12088] forked worker 8128
[2016–05–18T15:33:39.551Z][m12088] worker online
[2016–05–18T15:33:39.557Z][m12088] forked worker 12664
[2016–05–18T15:33:39.557Z][m12088] worker online
[2016–05–18T15:33:39.566Z][m12088] forked worker 10808
[2016–05–18T15:33:39.577Z][m12088] worker online
DEBUG: — — — — — — — — — — — — — — — -
DEBUG: Ember : 2.5.1
DEBUG: Ember Data : 2.5.3
DEBUG: — — — — — — — — — — — — — — — -
[2016–05–18T15:33:40.925Z][w9876] starting HTTP server
[2016–05–18T15:33:40.943Z][w9876] HTTP server started; url=http://:::3000
DEBUG: — — — — — — — — — — — — — — — -
DEBUG: Ember : 2.5.1
DEBUG: Ember Data : 2.5.3
DEBUG: — — — — — — — — — — — — — — — -
[2016–05–18T15:33:40.961Z][w8128] starting HTTP server
[2016–05–18T15:33:40.972Z][w8128] HTTP server started; url=http://:::3000
DEBUG: — — — — — — — — — — — — — — — -
DEBUG: Ember : 2.5.1
DEBUG: Ember Data : 2.5.3
DEBUG: — — — — — — — — — — — — — — — -
[2016–05–18T15:33:41.013Z][w10808] starting HTTP server
[2016–05–18T15:33:41.021Z][w10808] HTTP server started; url=http://:::3000
DEBUG: — — — — — — — — — — — — — — — -
DEBUG: Ember : 2.5.1
DEBUG: Ember Data : 2.5.3
DEBUG: — — — — — — — — — — — — — — — -
[2016–05–18T15:33:41.094Z][w12664] starting HTTP server
[2016–05–18T15:33:41.103Z][w12664] HTTP server started; url=http://:::3000

FastBoot also serves assets but if you really want to serve your assets elsewhere, you can easily set up a nginx server in front of your FastBoot server:

server {
listen 80;
server_name localhost;
  location ~ ^/(assets|fonts)/ {
root path/to/dist;

location / {
proxy_pass http://localhost:3000;

Note that you can also integrate FastBoot into an existing Node.js Express server as a middleware thanks to fastboot-express-middleware.

More information and options to manage cookies, headers, etc. are available on FastBoot’s guides and much work remains to be done in order to provide a fully isomorphic experience but FastBoot already seems to be a pretty good start!

Example: I deployed here a really simple demo FastBoot app on Heroku to illustrate an Ember training I wrote (in french).

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.