Award Confetti logo-bs logo-dxn logo-odl Magento Piggy Bank 09AEAE68-D07E-4D40-8D42-8F832C1A04EC 79C8C7E9-0D9D-48AB-B03B-2589EFEE9380 1A734D92-E752-46DD-AA03-14CE6F5DAD57 E622E2D4-3B9C-4211-8FC3-A1CE90B7DFB2 Group 19

HTTPS support added to BrowserSync

BrowserSync HTTPS support

The implications of this are huge if you are developing a website locally using SSL (with self-signed certs, or the real-deal) and need to access your website
through HTTPS (such as https://wordpress.dev:8890), as it means you can now use BrowserSync in exactly the same way as everyone else.

We’ve made it super-easy to use and there’s no special configuration needed — you provide your secure address to the proxy option of BrowserSync as you normally
would. So, if you’re using the command line, it’s as simple as:

$ browser-sync start --proxy="https://wordpress.dev:8890"

…or if you configure BrowserSync through Gulp, Grunt or the API, it’s as simple as this:

var browserSync = require("browser-sync");

browserSync({
    proxy: "https://wordpress.dev:8890"
});

How does it work?

BrowserSync ships with self-signed SSL certificates. When we spot a proxy target starting with https, we boot up a secure server instead of the regular one, and use those self-signed certificates to verify it. This will present you with a warning the first time you access the URL in a browser (as they are self-signed), but given that BrowserSync is a development tool, this is perfectly acceptable (plus you can provide your own certificates, should you have them).

Full HTTPS support, across the board

One of the key benefits of using BrowserSync, is that behind the scenes we smooth over all of the differences between use-cases. We’ve gone to extreme lengths to ensure that HTTPS support works seamlessly in all three modes. So, whether you’re serving static HTML files, proxying your own server, or even just copy/pasting the snippet into your code, you can benefit from this new feature.

Let’s look at an example from each use-case to fully understand this new feature.

Static files – HTTPS support

If your website only requires static files, set https: true in your configuration to enable the secure server.

// Serve static files from the `./app` directory over HTTPS

browserSync({
    server: "./app",
    https: true
});

Proxy – HTTPS support

As an example, let’s say you are building a WordPress site, and you’ve configured a vhost + SSL through Mamp pro. The address you use locally to view website might be https://wordpress.dev:8890. To run BrowserSync against this address, you provide the entire url as the proxy option.

Note: You don’t need to provide the https option here, as it’s inferred from the proxy target.

// Proxy https://wordpress.dev:8890 over HTTPS

browserSync({
    proxy: "https://wordpress.dev:8890"
});

Snippet – HTTPS support

A large number of BrowserSync users do not utilise the server or proxy options, and instead choose to copy/paste the html snippet into their website manually. Previously, if one of these websites were running over HTTPS, then the BrowserSync snippet would not have worked (as the script would count as a http resource on a secure site, and would therefore be blocked by the browser).

In version 2.2, this is no longer a problem — all you need is the https option and you’ll be good to go.

// Serve the BrowserSync script file over HTTPS

browserSync({
    https: true
});

Working with the community

This feature has been the direct result of people requesting it via twitter and on github. We are always open to feedback and suggestions and are happy to provide such features/changes that can help to improve the workflow for designers and developers. We are confident that this big addition will be beneficial to a lot of people and it’s been our pleasure to work on implementing it.

How to get BrowserSync 2.2

The HTTPS support is available from BrowserSync version 2.2 onwards – you can update easily by running.

npm install browser-sync@latest

For more information on BrowserSync, please take a look at some of our previous posts:

Previous post
View all
Next post