Create-react-app: npm start use hostname instead of localhost on Linux

[guoyunhe]

My laptop uses openSUSE Linux with hostname "Guos-Kudu". When I created a react app and run npm start, it opens http://guos-kudu:3000 in browser. When I visit http://localhost:3000 it cannot be accessed.

Some HTTP API only allows localhost to access. Or the API administrator only enabled localhost in OAuth configuration. In this situation, a non-standard URL will have many troubles.

Even when I changed the hostname to localhost or remove it, react-scripts still looks for http://guos-kudu:3000 instead of localhost. Have no idea what caused this.

[Timer]

The HOST variable is probably set in your env. Try to unset it in your terminal session.

If that works, create a .env.local file which contains the following:

HOST=localhost

You can now run npm start without worrying about unsetting HOST.

---

To achieve the default CRA behavior, use 0.0.0.0 instead of localhost.

[guoyunhe]

@Timer Thanks! This works. I do not know why the $HOST variable is not updated after I changed my hostname and rebooted the system.

[Timer]

You might want to check your ~/.bashrc or similar (~/.profile, ~/.bash_profile, ~/.bash_profile, ~/.login, etc).

[guoyunhe]

About .env file, it doesn't really support Linux system variable. Only those variables started with REACT_APP_ will be considered while others will be ignored. So I still have to write it in package.json:

{
  ...
  "scripts": {
    "start": "HOST=localhost react-scripts start",
    ...
  }
}

[Timer]

Ah yes, it does support HOST but doesn't overwrite it if it's already set -- my bad! So what you did is the correct fix but might get weird sharing between machines.

Maybe we can add a force overwrite...

[mcmillhj]

You could add an entry in your /etc/hosts file for your hostname that points to 127.0.0.1 to get around this.