Ember.js runs in the browser. It uses JavaScript to handle all the routing and rendering of data. It only talks to the server on the initial page load and to retrieve JSON data. This can have some limitations. Larger applications might take longer to load on slower connections and there is still some concern around search engine optimization.
To help alleviate these concerns, the Ember team created FastBoot. FastBoot is an Ember CLI add-on that allows Ember.js to render and serve applications on the server. It's a work in progress as of writing this and has some limitations. It's not recommended for production and doesn't work with jQuery or didInsertElement. It will hopefully be production-ready by Ember v2.4.
Nevertheless, it's improving and is an important add-on for Ember.
- In a new application, run these commands:
$ ember install ember-cli-fastboot $ rm –rf bower_components $ bower install --save ember#canary
FastBoot requires the
canaryversion of Ember to work. We must delete thebower_componentsfolder before installing. During installation, you may get a message that Bower cannot find a suitable version of Ember. This is normal; make sure to chooseember#canaryfrom the list. - Build the application for production:
$ ember build –prodThis will build the production server and minify all the files.
- Run the Ember FastBoot server:
$ ember fastboot --serve-assets --port 4200 --environment productionThis will run the FastBoot server. Let's break down these arguments:
- --serve-assets: This serves the assets out of the
distfolder. - --port 4200: This specifies the port. The default is 3000. In this case, we can use
4200to match the test server that we normally use. - --environment production: The default is development. Use production. It works better as Ember FastBoot is faster with minified files.
- --serve-assets: This serves the assets out of the
- Open up localhost at port
4200to see the web page load:
The page doesn't look any different. However, if you look at the browser console, you'll notice that the Ember application rendered without downloading all the JavaScript it normally needs to run in the browser.
Ember FastBoot is an Ember add-on that's being worked on. As of writing this, it has a lot of limitations. With this said, it will eventually allow you to render your Ember.js application on the server, or at least part of the application, for the initial page load. This will help reduce page load times significantly. To learn more about Ember FastBoot, check out their website at https://github.com/tildeio/ember-cli-fastboot.