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.

Dimitrovo

check your app name should not be reserved words. like my-app – Cockoftherock

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.

Freemasonry

Thanks. I get it now. – Dimitrovo

In my case, in this moment slow internet, 140KB/s – Dekko

yarn create is not similar to npx – Lodhia

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

Enosis

Now I understand the reason. – Dimitrovo

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.

Headband

Answer 4

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.

1. Create your first react app my-react-app in the usual way.

2. When you want to create another project, create just a folder say new-react-app first.

3. Open the my-react-app folder and copy everything except the node_modules folder to the new app folder.

4. Cut and paste the node_modules folder into the new folder. (Cut and paste is instantaneous and it avoids duplication)

5. 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!

Twinscrew

Answer 5

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

Royall

Answer 6

Install react globally using the following command

npm install -g create-react-app

Barrelhouse

Answer 7

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

Restrainer

This was the case in my situation. – Plosive

Answer 8

I prefer using yarn to create a react project. npx will take forever to build one project.so I suggest trying yarn.

First run

npm install --global yarn

then

yarn create react-app your-project-name

I hope it helps:)

Morissa

Answer 9

Are you installing React on a removable drive (like a USB)? If so, then it will take forever but it will not install. Try installing in your Local Disk.

Bullshit

Answer 10

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

Efrainefram