0

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?

enter image description here

notbrain
  • 3,366
  • 2
  • 32
  • 42
  • Oh I think I see what needs to happen - an nginx server block listening on https to hostname:35729 so the livereload script can be found. grunt serve is running two servers, one on 9000 for the app and another on 35729 for livereload, and they each need a proxy over ssl. – notbrain Apr 09 '14 at 02:46
  • Got all scripts to work over SSL via nginx proxies, but seems like the proxying prevents livereload from working. Don't have time right now to dig into connect-livereload inside grunt-contrib-connect, so appreciate any help with this. Just want to have a local dev env that launches over proxied https and has full livereload functionality. Chrome might be getting in the way here too, with strict SSL limitations (can't seem to get ssl over localhost:35729, Chrome aborts the connection). – notbrain Apr 09 '14 at 17:45

1 Answers1

0

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.

Jay Klehr
  • 469
  • 3
  • 7