Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

gulp-livereload over https?

I've been using livereload chrome extension that inserts a http://[...]/livereload.js into the document. Unfortunately, I'm working on a project that requires https and I expected to replicate that locally but I don't necessary have to do it as I can change the protocol for different environments, but I'm wondering if it's possible to set gulp-livereload to load via https instead ?

There's a few things I tried, such as adding the script manually without success, as I get a connection error (GET https://127.0.0.1:35729/livereload.js?snipver=1 net::ERR_CONNECTION_CLOSED):

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://127.0.0.1:35729/livereload.js?snipver=1';
document.getElementsByTagName('body')[0].appendChild(script)
like image 624
punkbit Avatar asked Apr 23 '15 09:04

punkbit


2 Answers

There are two solutions off the top of my head:

1. Host the client yourself

https://github.com/livereload/livereload-js

Install it as a dependency:

bower install livereload-js --save-dev

or

npm install livereload-js --save

Then just include it like you include a regular script. However be aware of these caveats.

/path/to/dist/livereload.js?host=localhost

2. Proxy the client script

This is pretty involved but it would definitely work. Create an HTTPS server in your gulpfile (perhaps in the watch task).

https://github.com/nodejitsu/node-http-proxy

https://github.com/nodejitsu/node-http-proxy#using-https

httpProxy.createServer({
  ssl: {
    key: fs.readFileSync('valid-ssl-key.pem', 'utf8'),
    cert: fs.readFileSync('valid-ssl-cert.pem', 'utf8')
  },
  target: 'https://localhost:35729',
  secure: true // Depends on your needs, could be false.
}).listen(443);

Then you can reference the proxied script.

https://127.0.0.1:443/livereload.js?snipver=1
like image 87
Austin Pray Avatar answered Nov 16 '22 07:11

Austin Pray


Although not in the API docs adding key/cert parameters works

gulp.task('run-reload-server', function() {
  livereload.listen({
    host: "my.domain.com",
    port: 35729,
    key: fs.readFileSync(path.join(__dirname, 'livereload.key'), 'utf-8'),
    cert: fs.readFileSync(path.join(__dirname, 'livereload.crt'), 'utf-8'),
  });
});
like image 45
Ben Mirkhah Avatar answered Nov 16 '22 09:11

Ben Mirkhah