Using Subdomain Proxies with BrowserSync in Laravel Mix

UPDATE - As of Laravel 8.40, this setup doesn’t seem to be working… I haven’t figured out why yet… Stay tuned.

Code First

.env

MIX_SITE_URL=mysite.valet
MIX_PROXY_URL=https://mysite.valet

webpack.mix.js

const mix = require('laravel-mix');
const proxy = process.env.MIX_PROXY_URL;
// ... your mix setup
if (proxy) {
  mix.browserSync({
    proxy: {
      target: proxy,
      proxyReq: [
        function (proxyReq, req, res) {
          let [subdomain] = req.client.servername.split('.');
          if (subdomain !== 'localhost') {
            proxyReq.setHeader('X-Forwarded-Host', `${subdomain}.${process.env.MIX_SITE_URL}`);
          }
        },
      ],
    },
  });
}

Explanation Second

Before each request, browser sync checks if there’s a subdomain. If there is, then it sets the header responsible for proxy requests, X-Forwarded-Host, using two .env properties.