Deploying a Location-Aware Ember Application

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

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

3. Ben LimmerEmberJS Meetup - 5/27/2015 ember.party !== Dev/Staging Production

4. Ben LimmerEmberJS Meetup - 5/27/2015 ember.party data/servers can differ

5. Ben LimmerEmberJS Meetup - 5/27/2015 ember.party data/servers can differ db sharding mini/ugliﬁcation caching latency

6. Ben LimmerEmberJS Meetup - 5/27/2015 ember.party

7. Ben LimmerEmberJS Meetup - 5/27/2015 ember.party us testing > users testing

8. Ben LimmerEmberJS Meetup - 5/27/2015 ember.party dev/qa/stakeholder testing in prod > users testing in prod

10. Ben LimmerEmberJS Meetup - 5/27/2015 ember.party enter ember-cli-deploy

11. Ben LimmerEmberJS Meetup - 5/27/2015 ember.party – Michael Klein “Lightning Fast Deployments of Ember-CLI Apps” LevelbossMike

12. Ben LimmerEmberJS Meetup - 5/27/2015 ember.party – Ben Limmer “Easy, Lightning Fast, Sleep-Better-at-Night, Deployments of Ember-CLI Apps” blimmer

13. Ben LimmerEmberJS Meetup - 5/27/2015 ember.party how does it work?

15. Ben LimmerEmberJS Meetup - 5/27/2015 ember.party “abc123”: “<html>...</html>” what’s current? contents of abc123 example.org “current”: “abc123”

16. Ben LimmerEmberJS Meetup - 5/27/2015 ember.party “def456”: “<html>...</html>” app-hash.css, app-hash.js, ... what’s current? contents of abc123 “abc123”: “<html>...</html>” example.org “current”: “abc123”

17. Ben LimmerEmberJS Meetup - 5/27/2015 ember.party “def456”: “<html>...</html>” what’s def456? contents of def456 “abc123”: “<html>...</html>” example.org/? secret=def456 “current”: “abc123”

18. Ben LimmerEmberJS Meetup - 5/27/2015 ember.party “def456”: “<html>...</html>” what’s current? contents of def456 “abc123”: “<html>...</html>” example.org “current”: “def456”

19. Ben LimmerEmberJS Meetup - 5/27/2015 ember.party 💩!

20. Ben LimmerEmberJS Meetup - 5/27/2015 ember.party “def456”: “<html>...</html>” what’s current? contents of abc123 “abc123”: “<html>...</html>” example.org “current”: “abc123”

21. Ben LimmerEmberJS Meetup - 5/27/2015 ember.party demo project

22. Ben LimmerEmberJS Meetup - 5/27/2015 ember.party Español English

25. Ben LimmerEmberJS Meetup - 5/27/2015 ember.party ip address mexican user

26. Ben LimmerEmberJS Meetup - 5/27/2015 ember.party ember-cli-server-variables

27. Ben LimmerEmberJS Meetup - 5/27/2015 ember.party Client Stack • EmberJS 1.12 • ember-i18n • ember-cli-deploy (redis + s3 adapters) • ember-cli-server-variables

28. Ben LimmerEmberJS Meetup - 5/27/2015 ember.party client code

29. 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 }

30. 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

31. 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 });

32. 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 }

33. 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 };

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

35. 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>

36. Ben LimmerEmberJS Meetup - 5/27/2015 ember.party demo

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

38. Ben LimmerEmberJS Meetup - 5/27/2015 ember.party server code

39. 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 });

40. 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 };

41. 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 };

42. Ben LimmerEmberJS Meetup - 5/27/2015 ember.party running in prod

43. Ben LimmerEmberJS Meetup - 5/27/2015 ember.party feature request: change locale in realtime

44. 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>

45. 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 });

46. 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 };

47. Ben LimmerEmberJS Meetup - 5/27/2015 ember.party demo

48. Ben LimmerEmberJS Meetup - 5/27/2015 ember.party thank you! blimmer l1m5 hello@benlimmer.com ember.party

49. Ben LimmerEmberJS Meetup - 5/27/2015 ember.party demo project code • location-aware-ember • location-aware-ember-server

50. Ben LimmerEmberJS Meetup - 5/27/2015 ember.party demo project libs (client) • ember-cli-deploy • s3 adapter • redis adapter • ember-cli-server-variables • ember-i18n

51. Ben LimmerEmberJS Meetup - 5/27/2015 ember.party demo project libs (server) • express js • geoip-lite • redis • cheerio • node-ember-cli-deploy-redis