React CRA: When adding subdomain on localhost it says: The development server has disconnected

Question

I am on a project with create-react-app without ejecting. I wanted to have subdomains on localhost or a fake host for development. When I added my host in windows hosts file it said invalid host header even if I add HOST=mydevhost.com DANGEROUSLY_DISABLE_HOST_CHECK=true in .env file. I couldn't make it work without using third party apps so I used Fiddler and it worked as expected now the sites comes up but instantly says:

The development server has disconnected. Refresh the page if necessary.

The problem is that the fast refresh doesn't work now and I have to refresh the site every time I make a change. Is there anything that I'm doing wrong here? Should I even use something like Fiddler here?

Answer 1

I ended up using react-app-rewired and in config-overrides.js I added the subdomain to allowed host. The final config looks like this:

module.exports = {
  webpack: (config, env) => {
    return config;
  },
  devServer: (configFunction) => (proxy, allowedHost) => {
    const devServerConfig = configFunction(proxy, allowedHost);

    devServerConfig.allowedHosts = ["subdomain.localhost"];
    return devServerConfig;
  },
};