Proxying multiple subdomains

Hi,

I’m working on a project which uses multiple subdomains for local development.

root domain example: .ecommerce.domain.local specific site domain: gb.websitename.ecommerce.domain.local asset domain: css.websitename.ecommerce.domain.local

The subdomains all resolve to the root domain because they point at the same vm ip (via hosts file entries)

I can’t get browsersync to load my site on a device using the external url unless that device is a vm running on my machine. If it’s my iPhone it fails to load.

Here’s my browsersync Gulp settings

browserSync.init({
        proxy: gb.websitename.ecommerce.domain.local,
        notify: false,
        startPath: '/'
    });

I can manage to proxy this setup via proxylocal and proxyreverse. Proxy reverse takes the site domain and uses the --rewrite-domain flag pointing to the root domain.

Any ideas what I can configure to get this working BrowerSync?

[sclu1034]

Proxying subdomains is possible with http-proxy-middleware. Get the requested domain from req.headers.host and replace host/port/whatever with your proxy url:

let proxy = require('http-proxy-middleware');
bs.init({
    middleware: [
      function (req, res, next) {
        let target = 'http://' + req.headers.host.replace('localhost:3000', 'example.com');
        proxy({ target })(req, res, next);
      }
    ]
});

[nickpish]

To further highlight the above: for my project running a local WordPress multisite config via WAMP, I used the following slight modification of the above code by @SirAiedail and it works beautifully- in this case using any sub-domain of wp-multisite.local such as site1.multisite.local by accessing site1.localhost:3000 in the browser. I just needed to add changeOrigin: true as in @lukepolo’s post. Thank you for the wonderfully helpful thread!

middleware: [
    function(req, res, next) {
        let target = 'http://' + req.headers.host.replace('localhost:3000', 'wp-multisite.local');
        proxy({
            target,
            changeOrigin: true
        })(req, res, next);
    }
],