Create-react-app: Slow start script

[sdn90]

Node: v5.4.1
OS: OS X 10.11.5 / Darwin Stevens-MBP 15.5.0 Darwin Kernel Version 15.5.0: Tue Apr 19 18:36:36 PDT 2016; root:xnu-3248.50.21~8/RELEASE_X86_64 x86_64

I've narrowed it down to the detect-port library used. I tested out the library's CLI and got similar results.

Added a timer to the start script:

console.time('detect')

detect(DEFAULT_PORT).then(port => {
  console.timeEnd('detect')
  ...
})

Result of running npm run start

/Users/steven/my_projects/autocomplete steven@Stevens-MBP% npm run start

> [email protected] start /Users/steven/my_projects/autocomplete
> react-scripts start

detect: 75279.878ms

[gaearon]

Wow, a minute? 😮

Is there anything unusual about your setup? Could you put some logs in its source and check where it’s spending the time? Could it be that a lot of ports after 3000 are busy on your computer for some reason?

[sdn90]

I'm pretty sure I have a vanilla setup.

The problem is on this line:
https://github.com/xudafeng/detect-port/blob/master/lib/index.js#L64

My understanding is that the ipv4 library returns my local IP assigned by DHCP.

If I change this to 'host': '127.0.0.1', start time is almost instant. I get the Something else is running at port 3000 prompt if I run it while port 3000 is assigned.

The network stuff is out the scope of my knowledge.. Not sure what the implications are if this was just hardcoded to something like 127.0.0.1 and why using the local IP has any effect on it.

If anyone else is having this problem on OS X, easy fix is disconnect from your network and run start.

[patbaker82]

To note, I have the same experience.

❯ create-react-app --version
create-react-app version: 0.2.0

❯ npm -v
3.10.3

❯ node -v
v6.3.1

❯ uname -ra
Darwin bonk.local 15.6.0 Darwin Kernel Version 15.6.0: Thu Jun 23 18:25:34 PDT 2016; root:xnu-3248.60.10~1/RELEASE_X86_64 x86_64

[patbaker82]

Just a little diagnostic.

❯ npm i detect-port -g
❯ detect --port 3000

This takes about 1 minute to execute. It looks like if you have the OSX firewall enabled it will cause the long lag. I disabled the OSX firewall and it returns instantly.

[gaearon]

It looks like if you have the OSX firewall enabled it will cause the long lag

Thanks, this is very valuable info!

Can you check if the fix in https://github.com/facebookincubator/create-react-app/issues/302#issuecomment-236403638 also works for you?

[philstrong]

Yea also long startup and I also have firewall enabled.

real    1m21.762s

[gaearon]

@philstrong Does the fix in https://github.com/facebookincubator/create-react-app/issues/302#issuecomment-236403638 work for you?

[gaearon]

I can reproduce this by turning on the firewall and enabling “block all incoming connections”.

[philstrong]

Yes it does fix the issue @gaearon

[gaearon]

OK, I’ll test this on Windows and release a patch today if it works cross platform.

[gaearon]

This should be fixed in the new version. Can you please verify?
Please find the upgrade instructions here.

[xudafeng]

@gaearon https://github.com/xudafeng/detect-port/pull/4

[gaearon]

Thank you so much! I will revert my commit and bump the version so we use detect-port again in 0.3.0.

[sdn90]

Working for me 👍