When accessing WordPress through BrowserSync using the external url, it redirects to localhost

Question

I am working on a WordPress site from my local system and using Gulp with Browsersync to automatically refresh my browser on changes. For this I am using a proxy to my local Apache server.

This works fine from my local machine, but when I try to access the site from the external url I have an issue. I am able to access the homepage just fine through the external url but when I then click on any link it redirects to localhost even though the href points to the external url.

I know that WordPress always provides the full url and this can cause a link to bypass browsersync but to ensure this doesn't happen I have configured WP_HOME and WP_SITEURL to point to port 3000, which BrowserSync listens to.

define( 'WP_HOME', 'http://flare-dev.local:3000' );
define('WP_SITEURL','http://flare-dev.local:3000' );

Here is my browsersync setup: Relevant sections in gulpfile.js

var browserSync = require( 'browser-sync' ).create();
var cfg = require( './gulpconfig.json' );
gulp.task( 'browser-sync', function() {
  browserSync.init( cfg.browserSyncWatchFiles, cfg.browserSyncOptions );
} );

Relevant sections in gulpconfig.json:

  "browserSyncOptions" : {
    "proxy": {
      "target": "localhost:80/"
    },
    "notify": false,
    "open": false,
    "host": "flare-dev.local",
    "port": 3000
  },
  "browserSyncWatchFiles" : [
    "./css/*.min.css",
    "./js/*.min.js",
    "./**/*.php"
  ]

I've tried multiple different settings in BrowserSyncOptions for proxy, middleware and rewriteRules but nothing changes this behaviour. Any help would be much appreciated!

Answer 1

Probably You are running on localhost:80 and you are not using correct proxy url. Dont write localhost:80/yoursite instead write localhost/yoursite only

browserSync.init({
        proxy: {
            target: "http://localhost/yoursite/"
        }
});

Rest you know, use reload with gulp.watch.

export const reload = (done) => {
    browserSync.reload();
    done();
}

Rest you know, use reload with gulp.watch. e.g. gulp.watch('**/*.php', reload);

Answer 2

You are experiencing this problem because Wordpress reference stylesheets and some other files via full URL like http://localhost:80/wp-content/theme/some.css and these requests are made outside of the BrowserSync's proxy (i.e. http://localhost:3000/wp-content/theme/some.css).

To fix this, you will need to ask BrowserSync to rewrite these links using rewriteRules.

The following will rewrite all localhost:80 to localhost:3000, forcing all traffic to go through BroswerSync instead of Apache directly.

rewriteRules: [
    {
        match: /localhost:80/g,
        fn: function (req, res, match) {
            return 'localhost:3000';
        }
    }
]

PS: Having the right proxy settings as suggested by the other answer here is also essential.

proxy: {
    target: "http://localhost/yoursite/"
}

Please also note that since the rewrite function is a Javascript and not a JSON object, you will need to have it outside of gulpconfig.json. You will need to merge it directly in gulpfile.js. Instead of:

browserSync.init( cfg.browserSyncWatchFiles, cfg.browserSyncOptions );

You will need something like

browserSync.init(
    cfg.browserSyncWatchFiles, 
    Object.assign(
        cfg.browserSyncOptions, {
            rewriteRules: [
                {
                    match: /localhost:80/g,
                    fn: function (req, res, match) {
                         return 'localhost:3000';
                    }
                }
            ]
        }
    ) 
 );