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

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?

CodePudding user response：

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;
  },
};

CodePudding user response：

I thing you can do that from your operating system to point your local domain to your react server, meaning that can create a local domain that points to the app server (host:port).

here's a guideline that may help: https://www.interserver.net/tips/kb/local-domain-names-ubuntu/

Relevant answers: How can I develop locally using a domain name instead of 'localhost:3000' in the url with create-react-app?