Laravel Valet not playing nice with BrowserSync

I'm having the same issue. Let me know if you come up with a solution. I'm gonna try to figure it out later on today.

It looks like my issue was only occurring when the site was secured via HTTPS. That might help.

Mine was conflicting with another server I had running on :3000... Thanks!

Still not working for me, it only work on :3000 not on valet domain ?

I was having issues getting BrowserSync to play nice with Valet (Caddy server) using HTTPS. Chrome couldn't verify the certificate to the proxy (localhost:3000) so it would give me the terrible "do you want to proceed" error and show the red X over the padlock in my URL bar.

So I followed the directions here: https://certsimple.com/blog/localhost-ssl-fix and since I was using gulp to initiate browsersync, added my new key and cert paths in my gulp.js file

browserSync.init({
  proxy:  "https://domain.dev",
  https: {
    key: "/Users/chase/.localhost-ssl/key.pem",
    cert: "/Users/chase/.localhost-ssl/cert.pem"
  }
});

Now it works like a charm!

@chasegiunta how to use laravel mix... where to put the certificate . thank you...

@chasegiunta Thank you +1000

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';
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',
      },
  })

On npm run watch this will load "https://yourdomain.test:3000" with valid certificates.

Maybe this helps someone stumbling across this. :-)

This helped me tremendously. Thanks!

It works! Thanks!

THANK YOU SOO MUCH!!!!! @vanderbake and @schnetzi !!!!!

If you use MAMP this can be solved with the certificates generated by MAMP like this

const domain = 'yourdomain.test';
const certsPath = '/Applications/MAMP/Library/OpenSSL/certs/';

mix.browserSync({
    proxy: 'https://' + domain,
    host: domain,
    open: false,
    https: {
        key: certsPath + domain + '.key',
        cert: certsPath + domain + '.crt',
    },
});