I'm developing a template for create-react-app. To test the template i run
npx create-react-app my-app --template file:<path-to-my-template>
This also installs all the dependencies in the node_module folder, making the whole process quite slow if I make frequent changes.
Is there a way to bootstrap the application without automatically installing the dependencies?
To keep it simple; you may create the app and then delete the node_modules:
npx create-react-app my-app
rm -rf node_modules
Related
To reproduce what I'm talking about
Create an empty directory
cd into the directory and run npm init
run npm install react-scripts
look at the node_modules directory. react-scripts exists inside node_modules, but it also installs many other dependencies required to run a project with create-react-app.
Looking at react-scripts directory in node_modules, I don't see any pre or post install scripts. I do see a react-scripts/bin/react-scripts.js script that im assuming is the entrypoint for the code installing these extra dependencies.
How is that file being run?
I am trying to migrate from NPM to Yarn for the sole reason of getting rid of 'node_modules' folder.
I am trying to use CRA tool. However, on CRA it advises to use yarn create, which is not a command found in Yarn 2 documentation. After some research I found out that I should use yarn dlx command, which is equivalent to npx.
The problem is that to use yarn dlx, I must have Yarn 2 first. Yarn 2 requires that I install it locally in my project directory. This way, I am forced to have a second layer of folder structure.
I want to create-react-app in a folder on my Desktop called myApp. But, I need to create myApp folder to install Yarn 2 before I can even start using dlx to run create-react-app.
Am I missing something?
Thank you.
I faced the same situation recently... my solution was:
yarn create react-app myApp (yes, is yarn 1.22 in my case)
rename the package.json for a while
yarn init -2 # this will create another package.json
merge the old package.json with the newly created one
yarn install
now you can configure PnP as is described on the Yarn documentation or...
you can create directly whit npx:
npx create-react-app your-app-name --use-pnp
Yes, for now, you have to use the second layer of the folder structure.
Assuming you have the latest version of Node 14.x, 16.x or any higher versions, the minimal instructions are the following.
Prerequisites:
Ensure that corepack is enabled via corepack enable command. This needs to be done only once.
Steps:
mkdir enclosing; cd enclosing - to create enclosing directory
yarn set version stable - to use latest stable Yarn version in the eclosing directory and all of its subdirectories
rm package.json - delete package.json in the enclosing directory, generated by the previous command to not confuse Yarn that the enclosing directory is the root of the project.
yarn create react-app my-app - the project will be generated with Yarn 3 and by default will use PnP install scheme
cd my-app; yarn set version latest - to attach Yarn 3+ to my-app project
Optional step, if you want to use node_modules install scheme with Yarn 3+, inside my-app run yarn config set nodeLinker node-modules
After that, you can move out my-app anywhere and delete enclosing directory.
In order to simplify all this into yarn dlx create-react-app I have opened pull request to create-react-app, please place a thumb up emojo for it here:
https://github.com/facebook/create-react-app/pull/12366
Let's say you're running this command:
npx gulp
npx will search for gulp within node_modules/.bin, and if it doesn't find it there, it will use a central cache. If it is missing, npx will install it.
How do I clear the central cache to force npx to reinstall gulp in this case?
On macOS (and likely Linux) it's ~/.npm/_npx, you can drop it with:
rm -rf ~/.npm/_npx
On Windows it should be %LocalAppData%/npm-cache/_npx
Either way, you can find npm’s cache by running npm config get cache and then finding an npx folder in there.
I needed to do this, due to an error in create-react-app saying 'We no longer support global installation of Create React App.' despite there being no global install. It was stuck in the npx cache, and I removed it like this
npx clear-npx-cache
Today I tried to do things differently, and launched a react-native project with npx, and went into troubleshooting issues like react-native command not found, are you sure this is an android project, etc. while things were easier with expo and react-native init.
So I'm wondering, according to you, what are the advantages, what does npx more ?
npm:
npm create-react-app my-app executes the local create-react-app package from your machine, so you first have to install it globally on your system with npm install -g create-react-app.
npx:
If you run npx create-react-app my-app and don’t have create-react-app globally on your system, it will get downloaded and not installed globally.
As you are getting "react-native command not found", first make sure to have react-native cli installed globally. For that,
npm i -g react-native-cli
Then create your react-native project.
In yarn v1 we initialize create react app using yarn create react-app my-app. How to initialize the same in yan v2.
The above command gives the error
Usage Error: No project found in <<directory>>
$ yarn run <scriptName> ...
Check your yarn version:
yarn --version
If it's below 1.22 you may need to upgrade it to use yarn 2:
npm install -g yarn
You can then create your app:
yarn create react-app my-app
cd my-app
yarn set version berry
yarn
yarn start
This should have your react app up and running using yarn 2. You may want to remove the node_modules folder:
rm -R node_modules
Also, you need the next line on .yarnrc.yml
nodeLinker: "node-modules"
You can use yarn dlx create-react-app my-app. It will work.
There are a lot of changes came with the yarn version2 update.
check this also for additional info: https://dev.to/arcanis/introducing-yarn-2-4eh1