Deploying Ember Apps

with front_end_builds

Sam Selikoff

New York, NY  •  January 22, 2015

@samselikoff

Front-end engineer at

sam@ted.com

Deploying a static app?

Rails

JS

CSS

HTML

Data Layer

Frontend app

JS

CSS

HTML

Then

Now

JSON API

What does it mean to deploy a frontend app?

How do frontend apps get served?

When you visit gmail.com

Index

JS

CSS

<link href="...">
<script src="...">
{
  key: "value"
}

So serving a JS app means

  1. serving the index
  2. serving the index's assets
  3. responding to API requests

So what's in a deploy?

JS

CSS

Often, just

JS

CSS

Index

Step 1

Step 2

Frontend vs Backend Deploys

Server-side deployments involve

  • File transfers
  • Database migrations
  • Dependency installation
  • Booting up the app
  • Managing active connections
  • Warming up caches
  • ...

They're complex!

We should avoid all this

if we're only deploying a CSS change

Development, testing and deployments are

isolated, independent, fast

Frontend      Backend

Tradeoffs

Should every Ember app be deployed in this way?

Probably not.

The main cost here is complexity

Is it worth it?

Application Complexity

Worth it

development time

complexity

Architectural complexity

One to one

Many to many

Backends

Frontends

Worth it

Ultimately, it depends on

your environment.

A World of Many Services

Main idea:

Avoid redeploying the backend

Hosted vs. OSS options

Hosted options

Heroku Buildpack, Divshot, others

But, can get expensive, and proxying can involve extra hops

  • Static asset hosts
  • Simple deploys (git push)
  • Proxy to API (no CORS)

Open Source options

  • Sync `dist`
  • Build your own proxy server
  • Configure CORS

Roll your own

Some Ember CLI Addons exist for the frontend piece

Another way...

front_end_builds

Open Source options

(inspired by Luke Melia's 2014 RailsConf talk)

front_end_builds

BACKEND

FRONTEND

front_end_builds

A Rails engine that lets you

  • CRUD new frontends
  • Serves the frontends
  • Rollback/preview the frontends

ember-cli-front-end-builds

An Ember CLI addon that lets you

  • Deploy your assets to S3
  • Deploy your index to a feb-enabled Rails backend

front_end_builds: the Rails engine

Rails app

Index

Ember app

Index

Index

front_end_builds:  the Rails engine

Install

gem 'front_end_builds'
...
bundle install
rake front_end_builds:install:migrations
rake db:migrate

front_end_builds:  the Rails engine

Install

front_end_builds:  the Rails engine

Mount the Admin

# routes.rb

Rails.application.routes.draw do

  mount FrontEndBuilds::Engine, at: '/frontend-admin'

end

front_end_builds:  the Rails engine

Mount the Admin

front_end_builds:  the Rails engine

Create a new Frontend

front_end_builds:  the Rails engine

Create a route

# routes.rb

Rails.application.routes.draw do

  mount FrontEndBuilds::Engine, at: '/frontend-admin'

  front_end 'my-crm', '/acme/customers'

end

Time to push a build!

front_end_builds: the Ember CLI addon

Ember App

Index

front_end_builds

Rails app

S3

JS

CSS

front_end_builds: the Ember CLI addon

Install

ember install:addon ember-cli-front-end-builds

# or

npm install --save-dev ember-cli-front-end-builds
ember generate ember-cli-front-end-builds

front_end_builds: the Ember CLI addon

Install

front_end_builds: the Ember CLI addon

Setup

ember deploy:setup

front_end_builds: the Ember CLI addon

Setup

front_end_builds: the Ember CLI addon

Deploy!

ember deploy --environment staging

front_end_builds: the Ember CLI addon

Deploy!

So, is it worth it?

Front End Builds gives you

  • Fast deployment of your Ember app
  • Backend-independent deploys (fewer chances for hiccups)
  • A simple way to serve your Ember apps (no CORS)
  • An admin interface for smoke testing new builds/features, rolling back releases and more

More possibilities like...

ember-cli-new-build

Excited?

Join

Thanks!

samselikoff.com/talks/deploying-ember-apps

@samselikoff

sam@ted.com

Made with Slides.com