Https browsersync with Sage 10?

sage
,
1

Hey, has anyone got https working locally with Sage 10? Might be something simple I’m missing?..

I’ve updated webpack.mix.js browsersync proxy:

mix.setPublicPath('./dist')
   .browserSync('mydomain.local');

https://mydomain.local/ works ok

But hot reloading / running yarn start - https://localhost:3000/ doesn’t work at all - seems browsersync isn’t proxying with ssl?

Any help much appreciated!

2

use .browserSync('https://mydomain.local') - ill probably add https:// to the config by default.

4

cheers @Log1x - even if it has http:// in there will provide a pretty good hint, thanks for the super quick reply!

6

Browsersync can be configured to either accept a custom cert (self-signed certs using a custom CA), or skip cert checks completely, this may be helpful: https://browsersync.io/docs/options#option-https

7

Working config with valid browserSync ssl/certs as @strarsis suggested.

Assuming you’re using Sage10 + Valet for local dev - update your browserSync config in webpack.mix.js to something like this:

// webpack.mix.js
...

+ const domain = 'sage.test';

mix
  .setPublicPath('./public')
- .browserSync('sage.test');
+ .browserSync({
+    proxy: `https://${domain}`,
+    host: domain,
+    open: 'external',
+    https: {
+      key:  `${process.env.HOME}/.config/valet/Certificates/${domain}.key`,
+      cert: `${process.env.HOME}/.config/valet/Certificates/${domain}.crt`,
+    },
+  })

Hope it helps someone!

8

I’ve had to tweak this for Bud in Sage v10.0.0. Hopefully helpful to anyone looking to enable SSL in dev with Valet or customise their browserSync config:

// bud.confg.ts
const browserSync = require('browser-sync-webpack-plugin');
const domain = 'example.test';

//...

/**
 * Target URL to be proxied by the dev server.
 *
 * This is your local dev server.
 */
// .proxy(`https://${domain}`)
.use({
  name: 'browser-sync-webpack-plugin',
  make: () => new browserSync({
    proxy: `https://${domain}`,
    host: domain,
    open: 'external',
    https: {
      key:  `${process.env.HOME}/.config/valet/Certificates/${domain}.key`,
      cert: `${process.env.HOME}/.config/valet/Certificates/${domain}.crt`,
    },
  }),
});

/**
 * Development URL
 */
// .serve(`https://${domain}:3000`);

The only weird thing is it starts up on port 3001 as though it’s running another instance of browserSync? If anyone (@kellymears :wink: ) has a better way to achieve this it’d be very much appreciated!

3 Likes