Skip to content

Instantly share code, notes, and snippets.

@lukemelia
Created April 4, 2015 04:49
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save lukemelia/3714b351c7865d091160 to your computer and use it in GitHub Desktop.
Save lukemelia/3714b351c7865d091160 to your computer and use it in GitHub Desktop.
ember-cli livereload, ssl and nginx (file from an in-repo addon)
'use strict';
/*
ember-cli's live-reload doesn't work out of the box for our configuration
because we run in local dev using www.yapp.dev over SSL. We use nginx to
terminate SSL and reverse proxy appropriate requests to ember-cli.
A configuration that gets live-reload working is implemented by this
addon plus nginx rules. This addon includes a script tag in index.html
as defined by the `contentFor` method below. Our standard nginx config
proxies the script to ember-cli.
When that script is requested, ember-cli will serve up the script in
the `dynamicScript` method below, which in turn loads the livereload.js
script.
Some nginx config proxies that to ember-cli's live-reload server running
in this project on port 37530:
server {
listen 80;
listen 443 ssl;
server_name cloudfront-standin-app.yapp.dev;
# ...
location ~ ^/apps/livereload.js {
rewrite ^/apps/(livereload.js) /$1 break;
proxy_pass http://localhost:37530;
}
# ...
}
livereload.js is requested with query params that cause it to make a
secure websocket connection to cloudfront-standin-app.yapp.dev and on
a port 100 greater than 37530 (37630). nginx config terminates SLL
and proxies that to ember-cli's live-reload server:
server {
listen 37630 ssl;
server_name cloudfront-standin-app.yapp.dev;
location / {
proxy_pass http://localhost:37530;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
}
*/
module.exports = {
name: 'live-reload',
isDevelopingAddon: function() {
return true;
},
contentFor: function(type) {
var liveReloadPort = process.env.EMBER_CLI_INJECT_LIVE_RELOAD_PORT;
if (liveReloadPort && type === 'head') {
return '<script src="//cloudfront-standin-app.yapp.dev/apps/ember-cli-live-reload.js" type="text/javascript"></script>';
}
},
dynamicScript: function(request) {
var liveReloadPort = process.env.EMBER_CLI_INJECT_LIVE_RELOAD_PORT;
return "(function() {\n " +
"var src = 'https://cloudfront-standin-app.yapp.dev/apps/livereload.js?snipver=1&host=cloudfront-standin-app.yapp.dev&port=" + (parseInt(liveReloadPort) + 100) + "';\n " +
"var script = document.createElement('script');\n " +
"script.type = 'text/javascript';\n " +
"script.src = src;\n " +
"document.getElementsByTagName('head')[0].appendChild(script);\n" +
"}());";
},
serverMiddleware: function(config) {
var self = this;
var app = config.app;
var options = config.options;
if (options.liveReload !== true) { return; }
process.env.EMBER_CLI_INJECT_LIVE_RELOAD_PORT = options.liveReloadPort;
process.env.EMBER_CLI_INJECT_LIVE_RELOAD_BASEURL = options.baseURL; // default is '/'
app.use(options.baseURL + 'ember-cli-live-reload.js', function(request, response, next) {
response.contentType('text/javascript');
response.send(self.dynamicScript());
});
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment