Yarn Start - Proxy URL is going to the wrong place?

I’m not sure what’s going wrong when I visit my virtual host URL it loads, but when I try to run yarn-start it just keeps serving the wrong URL: https://studiohealth.dev:8888/

I am using MAMP Pro for the virtual host. And this is my config.json

{
  "entry": {
"main": ["./scripts/main.js", "./styles/main.scss"],
"customizer": ["./scripts/customizer.js"]
  },
  "publicPath": "/wp-content/themes/studiohealth",
  "devUrl": "http://studiohealth.local",
  "proxyUrl": "http://localhost:3000",
  "cacheBusting": "[name]_[hash:8]",
  "watch": ["app/**/*.php", "config/**/*.php", "resources/views/**/*.php"]
}

Did you recently change your site’s development URL in MAMP?

I did but this was quite a while ago and I have since restarted my computer and MAMP multiple times. I was originally using .dev because I was unaware of the issue in Chrome where it forces HTTPS on .dev domains, so I removed that virtual host and created .local instead.

Did you update the site_url and home in the wp_options table of the database to have the correct TLD?

Yeah I did a full SQL search and replace using: https://wpbeaches.com/updating-wordpress-mysql-database-after-moving-to-a-new-url/

To update it all to http://studiohealth.local

It’s very bizarre that this is happening because https://studiohealth.dev:8888/ is not set anywhere. If I enter localhost:3000 directly it redirects to https://studiohealth.dev:8888/ as well I just can’t figure out where it’s getting that from.

Here’s something interesting, when I change the webpack.config.watch.js to:

module.exports = {
  output: {
    pathinfo: true,
    publicPath: config.proxyUrl + config.publicPath
  },
  devtool: '#cheap-module-source-map',
  stats: false,
  plugins: [
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new BrowserSyncPlugin({
      target,
      //open: config.open,
      open: 'external',
      proxyUrl: config.proxyUrl,
      watch: config.watch,
      delay: 500
    })
  ]
};

So open is set to external, then it loads up but to: http://10.0.0.16:3000/

So Browsersync works in that instance, it’s just not honoring my proxy URL…

Does it behave like this in another browser? I do know sometimes browsers cache redirects.

Also, you don’t happen to have a config-local.json in your project, do you? If so, whatever is in it will override config.json.

You don’t need to set open: 'external' for what you want to do.