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
- serving the index
- serving the index's assets
- 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
A Rails engine that lets you
- CRUD new frontends
- Serves the frontends
- Rollback/preview the frontends
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
sam@ted.com
Deploying Ember Apps with front_end_builds
By Sam Selikoff
Deploying Ember Apps with front_end_builds
- 4,860