CODEWITHSUNDEEP
node.jssslhttpsbrowser-synclaravel-valet
Matthew
Matthew

Reputation: 962

Browser-sync and 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 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

Upvotes: 4

Views: 1531

Answers (1)

vanderbake
vanderbake

Reputation: 356

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.

Upvotes: 6

Related Questions