Wrong HOST is shown in the console

[Bessonov]

Describe the bug

$ cat .env 
BROWSER=false
PORT=8080
HOST=0.0.0.0
SKIP_PREFLIGHT_CHECK=true

$ cat package.json | grep react-scripts
                "react-scripts": "3.4.1",

After start it still shows localhost:

Starting the development server...
Compiled successfully!
You can now view test in the browser.
  Local:            http://localhost:8080
  On Your Network:  http://172.30.0.6:8080
Note that the development build is not optimized.
To create a production build, use npm run build.

Did you try recovering your dependencies?

No.

Which terms did you search for in User Guide?

https://github.com/facebook/create-react-app/issues?q=%22On+Your+Network%3A%22+host

Environment

Environment Info:

  current version of create-react-app: 3.4.1
  running from /home/redacted/.npm/_npx/18523/pnpm-global/4/node_modules/.pnpm/create-react-app@3.4.1/node_modules/create-react-app

  System:
    OS: Linux 4.15 Ubuntu 18.04.3 LTS (Bionic Beaver)
    CPU: (8) x64 Intel(R) Xeon(R) CPU E3-1246 v3 @ 3.50GHz
  Binaries:
    Node: 12.17.0 - ~/.nvm/versions/node/v12.17.0/bin/node
    Yarn: 1.22.4 - ~/.yvm/shim/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v12.17.0/bin/npm
  Browsers:
    Chrome: 81.0.4044.138
    Firefox: Not Found
  npmPackages:
    react: 16.13.1 => 16.13.1 
    react-dom: 16.13.1 => 16.13.1 
    react-scripts: 3.4.1 => 3.4.1 
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

(Write your steps here:)

Expected behavior

It shows 0.0.0.0:

Starting the development server...
Compiled successfully!
You can now view test in the browser.
  Local:            http://0.0.0.0:8080
  On Your Network:  http://172.30.0.6:8080
Note that the development build is not optimized.
To create a production build, use npm run build.

Actual behavior

It shows always localhost.

Reproducible demo

(Paste the link to an example project and exact instructions to reproduce the issue.)

[Bessonov]

Why this is important? We use OAuth2 (callback url) and CORS, which are set to 0.0.0.0:8080. The localhost message is very misleading and if someone try to use localhost, they lose time to debug a non-existing problem.

[petetnt]

There's an explicit check for prettifying the value in

create-react-app/packages/react-dev-utils/WebpackDevServerUtils.js

Lines 41 to 43 in f5c3bdb

	const isUnspecifiedHost = host === '0.0.0.0' || host === '::';
	let prettyHost, lanUrlForConfig, lanUrlForTerminal;
	if (isUnspecifiedHost) {

Changing this to

 const isUnspecifiedHost = (host === '0.0.0.0' && process.env.HOST !== '0.0.0.0') || host === '::'; 

could be a fix

[eddiemonge]

This is the correct output. 0.0.0.0 is not an actual IP address. It means listen on all hosts that come into this machine, whether that is localhost for you or 172.30.0.6 for people not on your machine. You should not be setting 0.0.0.0 for OAuth as like I said, it isn't an actual IP address.

Look at the output you gave:

  Local:            http://localhost:8080
  On Your Network:  http://172.30.0.6:8080

Local is for you on your computer. On your network is for everyone else.

[geowasim]

I have similar issue ,
data from console before a time

Local:            http://localhost:3000
On Your Network:  http://192.168.0:66:3000

now in the console

Local:            http://localhost:3000
On Your Network:  http://192.168.137.1:3000

I don't know how it change but I noticed it 3 days ago

from my phone on the same network

the old localhost still working http://192.168.0:66:3000

previously I was accessing my projects from other devices (phone) on the same network at http://192.168.0.66:3000 (till now It's still accessable ) but the link that gave me from the console (http://192.168.137.1:3000) is not accessable for other devices anymore only from the same device I work on
if i create any new react app I get the same issue
the host that given from the console is unknow for other devices
I checked the ping from another phone

in short: the localhost that given by create-react-app and should be accessable on the same network is unknow
for other devices