grunt watch no longer refreshes Chrome when using

Question

I just started up a new yo angular scaffolding and tried to configure grunt-contrib-connect to open a custom ssl domain name instead of localhost:9000. The custom domain is proxy_pass'd from https://api/ to http://localhost:9000 using nginx.

grunt-contrib-connect and grunt-contrib-watch are updated to 0.7.1 and 0.6.1, respectively.

The new setting works fine on initial launch (grunt serve), but now html/css/js/etc changes no longer trigger a browser reload. What else do I need to change? The console shows that the change was detected but the browser is not refreshed.

Full gist of Gruntfile.js with original and modified versions.

...snipped...
// The actual grunt server settings
connect: {
  options: {
    port: 9000,
    // Change this to '0.0.0.0' to access the server from outside.
    hostname: 'localhost',
    livereload: 35729
  },
  livereload: {
    options: {
      // default: open: true,
      // modified custom target
      open: {
        target: 'https://mydomain.dev'
      }
      base: [
        '.tmp',
        '<%= yeoman.app %>'
      ]
    }
  }
}
...snipped...

Looks like the main issue is the livereload.js file is attempting to be loaded from a port that is not SSL enabled. How can we configure watch or connect to serve this file up without a port?

Maybe the technique of injecting the script is not compatible with running a https nginx proxy_pass for a connect app? How to get rid of the port? Is it serve-able without a port?

Answer 1

livereload.js will setup a websocket connection to the same host the JS is served from, so you'll probably need to also configure nginx to do websocket proxying. http://nginx.org/en/docs/http/websocket.html It sounds like your websocket doesn't exist, since you're not seeing the reload (but see the JS load ok). I've noticed that in grunt-watch it'll output that it's reloading the file, but only if there is a connected client (you'll still see the output that the file changed, but not the ... Reload path/to/file ... lines.

From what I've seen in the grunt-contrib-watch and tiny-lr repos on github, livereload.js should be attempting to make a websocket connection that matches the protocol of the site the JS is loaded on. So if the page is https://, it'll try to make a wss:// connection, and for http://, a ws:// connection. So be sure nginx is configured to proxy the appropriate one (or both).

I believe you'll need to proxy the websocket requests to the same port as you're proxying the livereload.js file to.