GET https://app-name.local/livereload.js net::ERR_ABORTED 404 (Not Found)

[rinoldsimon]

I'm serving my ember app in https. Followed the example which was given in https://github.com/ember-cli/ember-cli-inject-live-reload at the bottom of the page. It was working fine in ember 2.18.0

.ember-cli:

{
...
 "liveReloadPort": 37531,

  // This `liveReloadOptions` property becomes `window.LiveReloadOptions`
  "liveReloadOptions": {
    "port": 37631,
    "https": true,
    "host": "livereload.app-name.local"
  },

  "liveReloadJsUrl": "https://app-name.local/livereload.js"
}

after updating ember to 3.7.1 and ember-cli-inject-live-reload to 2.0.1 getting error in browser console

GET https://app-name.local/livereload.js net::ERR_ABORTED 404 (Not Found)
(anonymous) @ ember-cli-live-reload.js:14
(anonymous) @ ember-cli-live-reload.js:15

Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' localhost:37531 0.0.0.0:37531 undefined:37531".

ember-cli-live-reload.js:

(function() {
  window.LiveReloadOptions = {"port":37631,"https":true,"host":"app-name.local","snipver":1};
  var srcUrl = 'https://app-name.local/livereload.js';
  var host= location.hostname || 'localhost';
  var liveReloadPort = 37531;
  var defaultPort = location.protocol === 'https:' ? 443 : 80;
  var port = liveReloadPort || location.port || defaultPort;
  var path = '&path=_lr/livereload';
  var prefixURL = (location.protocol || 'http:') + '//' + host + ':' + 37531;
  var src = srcUrl || prefixURL + '/_lr/livereload.js?port=' + port + '&host=' + host + path;
  var script    = document.createElement('script');
  script.type   = 'text/javascript';
  script.src    = src;
  "line 14" document.getElementsByTagName('head')[0].appendChild(script);
}());

[rwjblue]

I think the first step here would be to get a failing test going. This is the basic structure:

ember-cli-inject-live-reload/tests/inject-live-reload-test.js

Lines 114 to 120 in 750bc27

	it('liveReloadOptions are provided', assert => {
	options.liveReloadOptions = { test: "wowza" };
	let script = InjectLiveReload.dynamicScript(options);
	let actual = evaluate(script);
	assert.deepEqual(actual.LiveReloadOptions, Object.assign({ snipver: 1 }, options.liveReloadOptions));
	});

You'd just need to tweak it to match the arguments for liveReloadOptions you are using, and update the expectation to match your URL.

From there we can try to dig into what is going awry...

[rwjblue]

FWIW, I find the options that you've used to be pretty confusing:

{
...
 "liveReloadPort": 37531,

  // This `liveReloadOptions` property becomes `window.LiveReloadOptions`
  "liveReloadOptions": {
    "port": 37631,
    "https": true,
    "host": "livereload.app-name.local"
  },

  "liveReloadJsUrl": "https://app-name.local/livereload.js"
}

Specifically, having liveReloadJsUrl use a different host than liveReloadOptions.host (I just checked the README example and it does not do this). Where are you actually trying to load the asset from?

[rinoldsimon]

Even after changing liveReloadJsUrl and liveReloadOptions.host to same name throws error

GET https://livereload.app-name.local/livereload.js net::ERR_ABORTED 404 (Not Found)

.ember-cli

{
  /**
    Ember CLI sends analytics information by default. The data is completely
    anonymous, but there are times when you might want to disable this behavior.

    Setting `disableAnalytics` to true will prevent any data from being sent.
  */
  "disableAnalytics": true,
  "liveReloadPort": 37531,

  // This `liveReloadOptions` property becomes `window.LiveReloadOptions`
  "liveReloadOptions": {
    "port": 37631,
    "https": true,
    "host": "livereload.app-name.local"
  },

  "liveReloadJsUrl": "https://livereload.app-name.local/livereload.js"
}

Here are my nginx config files
nginx/servers/app-name_local.conf

upstream app {
  server localhost:4200;
}

server {
  listen       80;
  server_name app-name.local;
  return 302 https://$server_name$request_uri;
}

server {
  listen 443 ssl;
  server_name app-name.local;
  ssl_certificate <path_to_ssl_cert>;
  ssl_certificate_key <path_to_ssl_cert_key>
  #create assess and error log files 
  access_log /usr/local/var/log/nginx/app-name/access.log;
  error_log /usr/local/var/log/nginx/app-name/error.log;
  try_files $uri /index.html $uri @app;
  #change path here
  root <path_to_ember_app>;
  #the following code is only for dev
  location ~ ^/livereload.js {
    rewrite  ^/(livereload.js)  /$1 break;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";   
    proxy_pass http://localhost:37531;
  }
  #end of dev only code
  location @app {
    proxy_pass http://app;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_redirect off;
  }
}

nginx/servers/livereload_app-name_local.conf

upstream livereload {
  server localhost:37531;
}

server {
  listen 37631 ssl;
  server_name livereload.app-name.local;
  ssl_certificate <path_to_ssl_cert>;
  ssl_certificate_key <path_to_ssl_cert_key>;
  access_log /usr/local/var/log/nginx/app-name/access.log;
  error_log /usr/local/var/log/nginx/app-name/error.log;
  try_files $uri /index.html $uri @livereload;
  root <path_to_ember_app>;
  location /{
    proxy_pass http://localhost:37531;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
  }
  error_page   500 502 503 504  /50x.html;
  location = /50x.html {
    root   html;
  }
}

[rwjblue]

I don’t fully grok what your nginx config is trying to do, is it trying to forward livereload requests to a separate port (37531)? Also, it seems odd that you are specifying liveReloadPort of 37531 but liveReloadOptions.port of 37631 in .ember-cli file. Shouldn’t they be the same?

Also, FYI, in [email protected] we made it possible for live reload to use the same port, and we do not start a second one any more (unless you specify liveReloadPort). So it may be possible to make your setup work without as much customization...

[rinoldsimon]

I just followed the example given at the readme page. since they used different port for liveReloadPort and liveReloadOptions.port. Now i'm confused how my nginx config to be. I don't get any proper setup guide though.

My only requirement is I need to serve my locally running ember app under https://your-app-name.local. So how be my nginx configs look ? Any suggestions or help or example ?

[rwjblue]

Not sure, I have only a “stack overflow answers” based understanding of nginx config.

Hopefully others can chime in and help...

[rinoldsimon]

updating with the below code solves the issue,
.ember-cli

"liveReloadJsUrl": "https://livereload.app-name.local/_lr/livereload.js"

app-name_local.conf

...
  location ~ ^/_lr/livereload.js {
  rewrite  ^/(_lr/livereload.js)  /$1 break;

Closing this for now !!