Ember CLI and Super Easy™ Heroku Deployments

This is a showcase of a simple buildpack for Heroku that builds your Ember CLI application and serves it with Nginx as a static site.

Check it out at http://github.com/tonycoco/heroku-buildpack-ember-cli

Transcript

1. Ember CLI and Super Easy™ Heroku Deployments Tony Coconate
2. Who? @tonycoco
3. I work at DevMynd Software.
4. Backstory
5. Backstory.js There’s almost always a…
6. Building JavaScript Applications
7. Building JavaScript Applications
8. I could talk about that… but, I won’t.
10. jQuery
11. $.ready()
12. Garbage.
13. But, we already knew how to deploy the junk pile of JavaScript.
14. Slammed right there in the existing app structure.
15. Then, something better came along.
16. Backbone.js
17. Holy smokes.
18. Now, how do we deploy this?
19. More of the same?
20. Piles of files.
21. So, build tools…
22. Grunt
23. Gulp
24. Lots of different opinions.
25. Plus, that’s really just the glue step.
26. Still, we asked more questions…
27. How do we put this on The Internet?
28. Does this app stand alone?
29. We wanted more.
30. I’m going to quickly say the “R” word.
31. Everyone loves Rails.
32. Easy to deploy.
33. Conventions
34. So, should we Ember.js?
35. Yes.
36. I was pumped.
37. Let’s build everything ourselves…
38. Because… yeah, JavaScript.
39. Let’s Pick a Build Tool
40. (AP Photo/Damian Dovarganes)
41. Grunt
42. Gulp
43. EEEEEEEEEAK!
44. F words.
45. Ember CLI
46. The future is here.
47. “Tony, deploy this.”
48. “Can we use Heroku?”
49. So, I went digging…
50. And, documenting… https://github.com/ember-cli/ember-cli/pull/637
52. I’ll do this myself.
53. My first attempt…
54. GitHub Pages Style
55. Build. Switch the branch. Update the build. Push. Pray.
56. https://www.youtube.com/watch?v=PKIpCPS-oZc
57. Do less.
58. “What about a buildpack?”
59. “What the hell is a buildpack?”
60. $ ember serve
61. $ ember serve
62. Terrible Idea.
63. $ ember build --production
64. Initial ideas…
65. Shell scripts. Damnit.
66. Reverse Engineering
67. https://github.com/heroku/heroku-buildpack-nodejs
68. Slug compiled on Heroku in three basic steps…
69. i. Detect
70. ii. Compile
71. iii. Release
72. Ok, so I have Node…
73. I don’t want to serve with Node though…
74. Nginx?
75. https://github.com/ryandotsmith/nginx-buildpack https://github.com/cloudfoundry-community/nginx-buildpack https://github.com/CHH/heroku-buildpack-php https://github.com/envygeeks/heroku-nginx-buildpack
76. Half baked.
77. Not well maintained.
78. Multi-buildpack options
79. Do less.
80. What does it need to do?
81. 1. Build the application with NPM install and Bower
82. $ ember build --production
83. 2. Serve the dist
84. Nginx Configuration
85. “I’m in over my head.”
86. Research.
87. I need it to do a few things…
88. The Internet sorts of things.
89. Gzip
90. Authentication
91. “Fast” Headers
92. Yep. All of them. ogg, ogv, svgz, mp4, css, rss, atom, js, jpg, jpeg, gif, png, ico, zip, tgz, gz, rar, bz2, doc, xls, exe, ppt, tar, mid, midi, wav, bmp, rtf, txt, html, and htm
93. API Proxy
94. Take local requests…
95. /api/posts/1.json
96. /api/posts/1.json API_PREFIX_PATH
97. Redirect (server-side) to…
98. http://api.com/posts/1.json
99. http://api.com/posts/1.json Redirection Path
100. http://api.com/posts/1.json API_URL
101. Prerender.io
102. Force SSL
103. Naked Domain Redirects
104. That’s all in the default nginx.conf!
105. What about Compass?
106. Hooks.
107. Write your own shell scripts, people.
108. Share them too!
109. https://github.com/tonycoco/heroku-buildpack-ember-cli
110. Install the Heroku Toolbelt.
111. Now…
112. $ heroku create --buildpack https://github.com/tonycoco/heroku-buildpack-ember-cli.git
113. Or, even easier…
115. Need to proxy that API?
116. $ heroku config:set API_URL=http://api.com/ $ heroku config:set API_PREFIX_PATH=/api/
117. Our example before? Works.
118. Take local requests…
119. /api/posts/1.json
120. /api/posts/1.json API_PREFIX_PATH
121. Redirect (server-side) to…
122. http://api.com/posts/1.json
123. http://api.com/posts/1.json Redirection Path
124. http://api.com/posts/1.json API_URL
125. More coming soon…
126. Alternatives?
127. Yes! And, this is great!
128. https://github.com/rwjblue/ember-cli-divshot
129. https://github.com/ember-cli/ember-cli-deploy
130. I need help!
131. The Future
132. Thanks!
133. @tonycoco