Browsersync + Laravel Valet Secure

Im using browser-sync to serve up my local dev sites. Im also using Laravel Valet. When I use valet secure to serve a dev site over https, Im getting those ugly Chrome Privacy Error pages. Is there a way to stop this?

My browser-sync config is as follows:

    browserSync.init({
	    host: "https://mysite.dev",
            proxy: "https://mysite.dev",
            ...

mysite.dev changes from site to site, I have a lot of local dev sites Im working on.

When I run npm start browser-sync outputs this:

    [BS] Proxying: https://mysite.dev
    [BS] Access URLs:
    ------------------------------------------
          Local: https://localhost:3000
       External: https://https://mysite.dev:3000
     ------------------------------------------
             UI: http://localhost:3001
    UI External: http://https:3001

As you can see its correctly mapping the URL, and if I ignore Chromes privacy error warnings I can see the website fine. Im just wondering why the https is not working properly.

If I access https://mysite.dev without browser-syncs :3000 port, it works fine in Chrome, and says “Secure” on the address bar

[vanderbake]

If you’re using valet secure and want browserSync play nicely with your test domain, here is a snippet which will make it secure without any errors:

// At the top of you webpack.mix.js file
const domain = 'yourdomain.test'; // <== edit this one
const homedir = require('os').homedir();

// The mix script:
mix.browserSync({
      proxy: 'https://' + domain,
      host: domain,
      open: 'external',
      https: {
        key: homedir + '/.valet/Certificates/' + domain + '.key',
        cert: homedir + '/.valet/Certificates/' + domain + '.crt',
      },
  })

This will load “https://yourdomain.test:3000” with valid certificates.

Maybe this helps someone stumbling across this. 😃

[brianlarson]

Maybe it has to do with the version of Valet but on my setup (v 2.8.0) the location of the cert and key files is different. Works like a charm though! Goodbye SSL for friggin’ localhost!

https: { key: homedir + '/.config/valet/Certificates/' + domain + '.key', cert: homedir + '/.config/valet/Certificates/' + domain + '.crt', },