Enable HTTPS on localhost with BrowserSync

I wanted to get my local development site working with SSL with BrowserSync recently and managed to figure it out.

Here’s what you need to do.

Step 1: Create a self-signed SSL certificate for localhost

I’m going to let you figure out this bit by yourself, because this tutorial is more about BrowserSync rather than the SSL. Here are 2 guides that you can follow:

Self-signed SSL Certificate on Mac Yosemite

Never see localhost HTTPS warnings again

When you’re done, you’ll have localhost.crt and localhost.key files. These can go anywhere, but I put them in

~/.localhost-ssl/localhost.key
~/.localhost-ssl/localhost.crt

 

Step 2: Tell BrowserSync to use your SSL certificate

I use Gulp. If you’re using Grunt, please adapt the code yourself.

In your BrowserSync config section, use this

gulp.task( 'watch', function() {

    // Kick off BrowserSync.
    browserSync( {
	proxy: "https://mysite.dev",
	https: {
	    key: "/path/to/localhost.key",
	    cert: "/path/to/localhost.crt"
        }
    } );

    ...

The key is to include https:// in your proxy URL, and also to add the https argument. Now type gulp watch and you should be able to visit https://localhost:3000 with no warnings.

Leave a Reply

Share This