npx create-react-app takes too long every time - reactjs

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.
Hard disks (mostly 5400RPM) ones bottleneck the I/O performance and thus causing installation process to slow down.
Internet connectivity issues - slow internet or high latency.
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
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.
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.
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

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 4

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 5

Install react globally using the following command
npm install -g create-react-app

Answer 6

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

Answer 7

As a beginner to create several sample react apps, I followed the following method to avoid the delay and save disk space by not duplicating the node_modules folder.
Create your first react app my-react-app in the usual way.
When you want to create another project, create just a folder say new-react-app first.
Open the my-react-app folder and copy everything except the node_modules folder to the new app folder.
Cut and paste the node_modules folder into the new folder. (Cut and paste is instantaneous and it avoids duplication)
now run 'npm start' in the new folder.
For completeness (not needed for example projects), edit the package.json and package-lock.json files to change the names to new-react-app.
package.json:
{
"name": "new-react-app", //"my-react-app",
...
package-lock.json:
{
"name": "new-react-app", //"my-react-app",
...
"packages": {
"": {
"name": "new-react-app", //"my-react-app",
...
If you want to run the old project again, cut and paste the node_modules to that folder and run 'npm start' there.
Periodically remove my-react-app and create a new my-react-app. Follow the same method till it works!

Answer 8

run resmon command from command line
look for the cmd process if cmd process is suspended the resume the process, it worked for me.