npx create-react-app takes too long every time

Question

I am new to React. Whenever I use npx create-react-app, it takes too long to download all the packages like "react, react-dom and react-scripts". Is it what happens every time or is there something that I can do to so that it doesn't take too long every time.

Answer 1

There are few factors which might have an impact on the performance of npm or npx commands in general.

1. Hard disks (mostly 5400RPM) ones bottleneck the I/O performance and thus causing installation process to slow down.

2. Internet connectivity issues - slow internet or high latency.

3. The terminal used also plays a crucial role. For example, Git Bash is known to have better performance than the Command Prompt on Windows platform.

Solution

1. Install CRA globally. npm install -g create-react-app and create-react-app my-app. Make sure you regularly update the package to ensure latest patches are applied.

2. Optionally, You can try OS level optimizations such as disk defragmentation to ensure there are no bottlenecks. Upgrading to an SSD would yield better performance.

3. You can use Yarn which in my experience, has better I/O performance. Similar to npx, Yarn has yarn create. You can do yarn create react-app my-app to create a React app.

Answer 2

npx always uses the latest version so it downloads packages each time you want to create new app so you should check your connection, otherwise you can use npm install -g create-react-app, it is not recommended though. see instructions for older npm versions

Answer 3

You might use local cache for npm packages. There is an open source cache, should be relatively straightforward to use. Install the cache software, and configure it. Basically it uses disk space, to trade for faster speed. If the bus (net) betwene your machine and the cache is faster than your Internet connection to npm repository, the cache is useful.

These caches act as in-between, they sit between you (your "yarn" or "npm" which wants to install a package) and the npm repository. The cache checks, whether it already has the package on its disk, and if so, serves it faster than the actual npm repository. Check out eg: https://github.com/mixu/npm_lazy

Answer 4

So, there are two fixes for this,

FIX 1:

This problem is observed with 12.16.2-x64.msi node version. If you installed x64 version then you just need to uninstall this version and install x32 bit version. Or try updating to the latest version.This fix should solve your problem.

FIX 2: If you don't want to reinstall the node and continue with the current version then this fix would work.

• Open a new cmd window and run resmon command. This command opens resource monitor and you would see something like this -

• Once you could see the resource monitor. You need to start looking for cmd.exe processes (because there would be more than one cmd.exe based on how many windows you have got open) which are suspended.
• If you find any cmd.exe suspended resume it. Your cmd process would also get resumed. There might be a case where cmd again stops, you just follow the above steps again.
• Sometimes you may need to resume cmd.exe multiple times if it's suspense. And make sure you disable your anti-virus, it may prevent creating react npm app.

Answer 5

I faced the same issue and able to fix it like below.

Issue: My organisation had set different repository URL in the global config when I run setup scripts for dev environment.

I was using work laptop to do something else and it was the problem.

How to check Run this command

cat ./~npmrc

You should see something like this registry=https://blah blah/npm-all/

change this to default registry by running the command

npm config set registry https://registry.npmjs.org/

check the same

cat ./~npmrc

Now run the command to create react app

npx create-react-app --template cra-template-rb app-name