How to get livereload working for localhost development, using a self-signed SSL certificate in a Gulpfile.
Combining a couple of tricks from around the webs. It’s easier than it seems.
The two combined sources of information are from gilluminate.com/2014/06/10/livereload-ssl-https-grunt-watch/ (using Grunt) and https://github.com/vohof/gulp-livereload/issues/82.
Step #1
Generate your self-signed SSL certificates, as described on the Grunt Watch page above.
openssl genrsa -out livereload.key 2048 openssl req -new -key livereload.key -out livereload.csr openssl x509 -req -in livereload.csr -signkey livereload.key -out livereload.crt
I had a “unable to write ‘random state'” error, which can be solved by running sudo rm -rf ~/.rnd. (It is caused by your user .rnd file being owned, and only read/writeable, by root.)
Step #2
Then add this to your livereload.listen():
livereload.listen({
key: fs.readFileSync(path.join(__dirname, 'livereload.key'), 'utf-8'),
cert: fs.readFileSync(path.join(__dirname, 'livereload.crt'), 'utf-8'),
});
Step #3
Visit https://localhost:35729/livereload.js to add it as a permanent exception.
Step #4
Change up your code to add the https in front:
<script>document.write('<script src="https://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js"></' + 'script>')</script>
Note: This works best when you are developing locally purely in SSL (not mixed HTTP and HTTPS), otherwise, you may want to look up how to do a reverse proxy in apache2 or nginx, and set it up on an alternative port, as someone did on nginx, as seen this page: http://feedback.livereload.com/forums/157942-general/suggestions/2988007-fix-livereload-to-work-with-https.