Browser-sync: Proxying multiple subdomains

[markweston]

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?

[lleaff]

Interested in this as well.

[dsnoeck]

Hello, does anyone found a solution for handling multiple subdomains ?

[osilviotti]

I also need support for this. I've got it proxying a site, injecting my script, and rewriting all links, but going to shop.localhost:3000 isn't reacting how I'd expect - I'd expect it to point at shop.site.com

[dejwid]

+1

[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);
      }
    ]
});

[dejwid]

It is possible to create several instances of browserSync

[lukepolo]

For anyone else who struggled with this, i used @SirAiedail with changeOrigin also didn't need to create a proxy to a proxy so I checked if it was the same target~

middleware: [
      function (req, res, next) {
        let target = 'http://' + req.headers.host.replace('codepier.test:3000', 'codepier.test');
        if(target !== 'http://codepier.test') {
          proxy({
            target,
            changeOrigin: true,
          })(req, res, next);
        } else {
          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);
    }
],

[sharathp22]

From the above mentioned comments it is clear that by using http-proxy-middleware with browser sync and using the piece of mentioned above will help with subdomain usage but i am basically a tester i am using browser-sync tool to ease my process of Testing i don't have access to Application Source Code in that case then the above mentioned solution would not be feasible solution for me .Please suggest i am struggling to get valid solution
Thanks in Advance.

[sclu1034]

@sharathp22 You don't need to change your application's code, just the bit that initializes BrowserSync (which is usually part of the development tool chain).
If you can't access/change that either, but can reach the application's port directly (e.g. if the test environment is hosted on your local machine), you could create your own instance of BrowserSync to use instead of the one provided by your development team.

[sharathp22]

@SirAiedail Thank you for your reply but i know to create own instance's of Browser sync without any problem it even work's but my problem is we have multiple environment for Testing like Development,Stage and Prod environment for me browser-sync works fine as expected with my Development serve where the applications is deployed on single server and there is no involvement of multiple subdomain where as when we have the application deployed on Staging Server application gets deployed over multiple server and there when the multiple subdomain gets into picture.I hope you understood my scenario.

[sclu1034]

@sharathp22 BrowserSync is intended for development workflow only. It should definitely not be used in customer facing deployments (i.e. production). And since "staging" environments are usually intended to replicate the production system, BrowserSync shouldn't be used there either.
If you have issues with subdomains in your staging or production environments, they need to be resolved with something else.

Additionally, you seem to be using subdomains as a way to address (maybe even load balance) _multiple instances_ of the same application. However, this thread is about handling subdomains (serving entirely different content) within _a single instance_ of an application. That's two very different concepts.