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 is a guide that you can follow:

How to Setup HTTPS Locally Without Getting Annoying Browser Privacy Errors

 

Save your certificate and key files as 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.


7 Comments on "Enable HTTPS on localhost with BrowserSync"

  • Filip says

    Thanks for the share David!

    What would be the consequences if you haven’t enabled https?

    • You don’t have to enable https – it’s optional. But sometimes you may want to if you are developing a site that requires https e.g. a WooCommerce store

  • hirasso says

    Looks promising! Any idea how to do that with only the CLI of browser-sync? I don’t use gulp or grunt, but npm scripts…

  • rory says

    Thanks – I’ve been in web dev hell trying to figure this out!

  • Never got it to work, Can’t believe in the end it’s that simple.
    Thank you for this!

  • If you were close enough I’d kiss you right now! Been trying to work this out for ages!!

  • KevinOb says

    Hi, I followed the steps and I get “Windows does not have enough information to verify this certificate”

Leave a Reply

%d bloggers like this: