Get LiveReload Working on Localhost SSL (Self-Signed) Using Gulp

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 (using Grunt) and

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():

  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://' + ( || '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: