Deploying a Location-Aware Ember Application

Deploying a
location-aware EmberJS app
Ben Limmer
EmberJS Denver Meetup
5/27/2015

Ben LimmerEmberJS Meetup - 5/27/2015 ember.party
deployment can be
scary

!==
Dev/Staging Production

data/servers can differ

data/servers can differ
db sharding
mini/ugliﬁcation
caching
latency

us testing
>
users testing

dev/qa/stakeholder testing in prod
>
users testing in prod

enter ember-cli-deploy

– Michael Klein
“Lightning Fast Deployments of Ember-CLI
Apps”
LevelbossMike

– Ben Limmer
“Easy, Lightning Fast, Sleep-Better-at-Night,
Deployments of Ember-CLI Apps”
blimmer

how does it work?

“abc123”: “<html>...</html>”
what’s current?
contents of abc123
example.org
“current”: “abc123”

“def456”: “<html>...</html>”
app-hash.css, app-hash.js, ...
what’s current?
contents of abc123
“abc123”: “<html>...</html>”
example.org

“def456”: “<html>...</html>”
what’s def456?
contents of def456
“abc123”: “<html>...</html>”
example.org/?
secret=def456

“def456”: “<html>...</html>”
what’s current?
contents of def456
“abc123”: “<html>...</html>”
example.org
“current”: “def456”

💩!

“def456”: “<html>...</html>”
what’s current?
contents of abc123
“abc123”: “<html>...</html>”
example.org

demo project

Español English

ip address mexican user

ember-cli-server-variables

Client Stack
• EmberJS 1.12
• ember-i18n
• ember-cli-deploy (redis + s3 adapters)
• ember-cli-server-variables

client code

ember-cli-server-variables
conﬁg/environment.js
1 module.exports = function(environment) {
2 var ENV = {
3 modulePrefix: 'location-aware-ember',
4
5 serverVariables: {
6 tagPrefix: 'var',
7 vars: ['country']
8 }
9 };
10
11 if (environment === 'development') {
12 ENV.serverVariables.defaults = {
13 'country': 'US'
14 };
15 }
16 }

session initialization
1 export default Ember.Service.extend({
2 serverVariables: Ember.inject.service(),
3
4 countryCode: 'US',
5
6 forceInitialization: function () {
7 const country = this.get('serverVariables.country');
8 if (country) {
9 this.set('countryCode', country);
10 }
11 }
12 });
app/services/session.js

app initialization
app/routes/application.js
1 export default Ember.Route.extend({
2 i18n: Ember.inject.service(),
3 session: Ember.inject.service(),
4
5 beforeModel: function () {
6 this.set(
7 'i18n.locale',
8 languageForCountryCode(this.get('session.countryCode'))
9 );
10 }
11 });

languageForCountryCode
app/utils/language-for-country-code.js
1 export default function languageForCountryCode(countryCode) {
2 switch(countryCode.toLowerCase()) {
3 case 'es':
4 case 'mx':
5 return 'es';
6 case 'gb':
7 case 'us':
8 return 'en';
9 default:
10 return 'en';
11 }
12 }

translations (en)
app/locales/en/translations.js
1 export default {
2 'home': {
3 'greeting': 'Hello!',
4 'secondaryGreeting': 'Thank you for visiting from
{{countryName}}.'
5 }
6 };

translations (es)
app/locales/es/translations.js
1 export default {
2 'home': {
3 'greeting': ‘¡Hola!',
4 'secondaryGreeting': 'Gracias por visitar desde
{{countryName}}.'
5 }
6 };

template
app/templates/index.hbs
1 <div class='row'>
2 <h2 class='text-center' id="greeting">
3 {{t 'home.greeting'}}
4 </h2>
5 </div>
6 <div class='row'>
7 <h4 class='text-center' id="secondary-greeting">
8 {{t 'home.secondaryGreeting' countryName=countryName}}
9 </h4>
10 </div>

demo

Server Stack
Hosting
• heroku
• heroku-redis
Server Tech
• express 4
• geoip-lite
• redis
• cheerio
• node-ember-cli-
deploy-redis

server code

server routing
index.js
1 app.get('/', function(req, res) {
2 nodeEmberCliDeployRedis.
3 fetchIndex(‘location-aware-ember’, req, client).
4 then(function (indexHtml) {
5 indexHtml = serverVarInjectHelper.
6 injectServerVariables(indexHtml, req);
7 res.status(200).send(indexHtml);
8 }).catch(function(err) {
9 res.status(500).send('Oh noes!n' + err.message);
10 });
11 });

inject server variables
lib/server-var-inject-helper.js
1 var injectServerVariables = function (htmlString, req) {
2 var $ = cheerio.load(htmlString);
3 $('meta[name=var-country]').
4 attr('content', locationHelper.getCountry(req));
5
6 return $.html();
7 };

geocode ip address
lib/location-helper.js
1 var getCountry = function (req) {
2 var ipAddr = req.headers["x-forwarded-for"];
3 if (ipAddr){
4 var list = ipAddr.split(",");
5 ipAddr = list[list.length-1];
6 } else {
7 ipAddr = req.connection.remoteAddress;
8 }
9
10 var geo = geoip.lookup(ipAddr);
11
12 if (geo && geo.country) {
13 return geo.country;
14 } else {
15 return 'US';
16 }
17 };

running in prod

feature request:
change locale in realtime

git diff
++app/templates/index.hbs
1 <div class='row language-chooser'>
2 <h6>{{t 'home.chooseLang'}}</h6>
3 <a id='set-en' {{action 'setLanguage' 'en'}}>EN</a>
4 <a id='set-es' {{action 'setLanguage' 'es'}}>ES</a>
5 </div>

git diff
++app/routes/application.js
1 export default Ember.Route.extend({
2 i18n: Ember.inject.service(),
3 ...
4 actions: {
5 setLanguage: function (locale) {
6 this.set('i18n.locale', locale);
7 }
8 }
9 });

deloyment conﬁg
conﬁg/deploy.js
1 module.exports = {
2 "production": {
3 buildEnv: "production",
4 store: {
5 host: 'ec2-107-22-167-67.compute-1.amazonaws.com',
6 port: 6929,
7 password: process.env.REDIS_PW,
8 },
9 assets: {
10 "type": "s3",
11 "accessKeyId": "AKIAIFM7MT2JTIHV6HBA",
12 "secretAccessKey": process.env.S3_SECRET_ACCESS_KEY,
13 "bucket": "location-aware-ember"
14 }
15 }
16 };

thank you!
blimmer
l1m5
hello@benlimmer.com
ember.party

demo project code
• location-aware-ember
• location-aware-ember-server

demo project libs (client)
• ember-cli-deploy
• s3 adapter
• redis adapter
• ember-cli-server-variables
• ember-i18n

demo project libs (server)
• express js
• geoip-lite
• redis
• cheerio
• node-ember-cli-deploy-redis

Deploying a Location-Aware Ember Application

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Deploying a Location-Aware Ember Application

Ähnlich wie Deploying a Location-Aware Ember Application (20)

Mehr von Ben Limmer

Mehr von Ben Limmer (8)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Deploying a Location-Aware Ember Application