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
1 2 3 4 5 6 7 8 9 10 11 12 | gulp.task( 'watch', function() { // Kick off BrowserSync. browserSync( { 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.
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
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…
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!!
Hi, I followed the steps and I get “Windows does not have enough information to verify this certificate”