4

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 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

Matthew
  • 952
  • 7
  • 20

1 Answers1

6

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
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.

vanderbake
  • 356
  • 2
  • 11
  • 6
    On my mojave I had to change the path to `key: homedir + '/.config/valet/Certificates/' + domain + '.key', cert: homedir + '/.config/valet/Certificates/' + domain + '.crt',` – metaxos May 20 '20 at 19:40
  • Thanks for your answer, I wonder if there is any way to use 80 port for browserSync? – mcanvar Sep 03 '20 at 19:06
  • For me, this method breaks BrowserSync's ability to view the site on another device using the "external" link. – Mike Mella Mar 26 '21 at 19:02
  • In my case I don't need another port. It's just that with Valet you don't specify the port. When I use Valet I only set the name of the folder and the .test extension and that's it. Fore example, in my case I'm using https://test1.test, but your code is taking me now to test1.test:3000, which doesn't works of course as is not served that way. I'm not serving my Laravel website locally using artisan. I'm using Valet only. This way: https://test1.test How can I solve this? – Reinier Garcia Jun 17 '21 at 16:12
  • You are saying that: On npm run watch this will load "https://yourdomain.test:3000" with valid certificates. But Matthew is saying that he is not using the port 3000. He is using Valet. He says: "If I access https://mysite.dev without browser-syncs :3000 port, it works fine in Chrome, and says "Secure" on the address bar" – Reinier Garcia Jun 17 '21 at 16:14