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.
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.
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
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.
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
Install react globally using the following command
npm install -g create-react-app
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
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!
run resmon command from command line
look for the cmd process if cmd process is suspended the resume the process, it worked for me.
I was getting below error while committing the changes.
Simply adding .pre-commit-config.yaml file or deleting .git\hooks folder was not resolving my problem. So I added --no-verify option while committing and it solved my problem.
Now, I am trying to deploy my react app to Github Pages. When I run npm run deploy I get the same error as shown in the below picture.
How I can add --no-verify option while npm run deploy? Simply adding .pre-commit-config.yaml file or deleting .git\hooks folder is not resolving the problem.
I don't want to try pre-commit uninstall command because the command might uninstall the pre-commit globally.
Is there any alternative to disable the hooks locally specific to the current repository?
Edit:
I tried pre-commit uninstall as well. Still throws the same error when I do npm run deploy.
That message should come from c:\dev\react-apps\find-my-event\.git\hooks\pre-commit
For testing, you can rename pre-commit to pre-commit.old and see if the npm run deploy is still affected by the same error message.
That being said, if you are using the pre-commit/pre-commit python frmaework for managing and maintaining multi-language pre-commit hooks., then issues 457 cleary states:
You need one of those to tell pre-commit what hooks you want to run.
To see how to configure one, see http://pre-commit.com
For instance, at a minimum:
Create a file named .pre-commit-config.yaml
you can generate a very basic configuration using pre-commit sample-config
I have a functional commit-msg git hook that takes the string from beginning up to the first underscore from a git branch's name and prepends it to the commit message.
For better understanding: The branch name is JIRA-123_fix_problem, the commit command goes: git commit -m 'Fix problem' and through the commit-msg hook the commit message will automatically be changed into JIRA-123: Fix problem.
Now we're using Nuxt for our current Vuejs project and this makes use of husky. We want to keep husky in this project. Unfortunately (and, I guess, intentionally), husky works by overwriting the git commit hooks, and thus the file .git/hooks/commit-msg I use will be overwritten by husky and the original commit-msg hook does not work any more.
How can I either prevent husky from overwriting the commit-msg hook or instruct husky to do the same thing?
I can't find any documentation for this problem.
Ok, I finally found (and verified) the soution:
In this husky issue ("Support custom git hooks to be not overridden by husky #323") typicode says:
Husky is overwriting file, because there [is] # husky in it. It checks for this string to know if it's a user script or if it has been generared by husky.
If you delete # husky, it will never overwrite them again.
After I removed the # husky line, re-installing all node modules in our project finally keeps the commit-msg hook I want to use. I originally just copied & pasted the code while maintaining the # husky line from the scaffolding of the project.
I am making a react js project and i am using docker. as the ubuntu restart all the dependencies start download again. i am not able to understand why dependencies not saving in the project folder. I don't want that every time my dependencies download again and again on restart.
Pull everytime on database:start in docker
latest: Pulling from library/mysql
aa18ad1a0d33: Pull complete fdb8d83dece3: Pull complete 75b6ce7b50d3: Pull complete ed1d0a3a64e4: Pull complete 8eb36a82c85b: Pull complete 41be6f1a1c40: Pull complete 0e1b414eac71: Pull complete 914c28654a91: Pull complete 587693eb988c: Pull complete b183c3585729: Pull complete 315e21657aa4: Pull complete
Digest: sha256:0dc3dacb751ef46a6647234abdec2d47400f0
Docker has a way to store things in cache: It checks for modifications in each lines of instruction of the Dockerfile and when it finds a difference at a line it re-runs it and all the instructions below. For the COPY instruction it works the same except it also checks if the files themselves have changed.
I assume that you are copying your project files before installing your dependencies in your Dockerfile.
You should instead copy your package.json first, then install the dependencies, then copy all your project's files. That way it will download new dependencies only if your package.json file changed.
Here is an example of what I mean:
FROM node:latest
COPY package.json .
RUN npm install
COPY . .
EXEC npm run
I'm trying to write a git hook that fires on git pull, git merge, and git checkout, when my .emacs file changes. For some reason, the hook never seems to fire.
https://github.com/mcandre/dotfiles/blob/master/hooks/post-merge-checkout
osse on #git / #bash helped me identify the issue: I was using the wrong git command to search for file changes. The new one works:
https://github.com/mcandre/dotfiles/blob/594e24d28e599e57b401d3c163d72498b8a3c1f0/hooks/post-merge-checkout