Configure NGINX for FastBoot

My landing page topaxi.ch is a Server-Side rendered Ember.js application using Ember FastBoot.

I'm using NGINX as a reverse-proxy for FastBoot and to serve the Ember.js application assets.

Rendering your Ember.js application server-side gives you two major benefits. It is now crawlable by any search engine and the page load time should feel much faster, as browsers can render your content before all the JavaScript is downloaded and executed.

Here are the essential parts of my setup for topaxi.ch:

# Define the FastBoot server, in my example,
# FastBoot is running on port 8000
upstream fastboot.topaxi.ch {
    server 127.0.0.1:8000;
}

# Define the HTTP server for topaxi.ch
server {
  listen 80;
  server_name topaxi.ch;

  # Define 404 page for undefined Ember FastBoot routes.
  error_page 404 /404.html;

  # Define proxy settings to FastBoot
  location @fastboot {
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header Host $http_host;
      proxy_set_header X-NginX-Proxy true;

      proxy_pass http://fastboot.topaxi.ch;
      proxy_redirect off;
  }

  # Try-files before proxying to FastBoot,
  # fallback to our defined 404 page,
  # if FastBoot returns a 404 error.
  location / {
    root /path/to/emberapp/dist;
    try_files $uri $uri/ @fastboot =404;
  }

  # Optional, add some aggressive caching headers for fingerprinted assets
  location ~* "^/assets/.*-([a-z0-9]{32})\.(?:css|js|gif|png|jpe?g)$" {
    root /path/to/emberapp/dist;
    expires max;
    add_header Cache-Control public;
    access_log off;
    try_files $uri =404;
  }
}

Now all we need is to setup and run FastBoot.

$ cd /path/to/emberapp
$ ember install ember-cli-fastboot
$ ember fastboot --port=8000 --prod

Your Ember.js application should now be rendered server-side by FastBoot and served by NGINX.