How to use Yarn 2 (or 3) to run create-react-app without specifying a new directory? - npm

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

Related

Upgrade/update a node package in package.json without installing it?

This question applies to either npm or yarn and I would like to know if what I need to do can be done with one or the other or both. For the sake of clarity I will only refer to yarn commands as I would prefer the yarn solution.
I have a bash script where I conditionally yarn upgrade a node package that is guaranteed to be in the package.json file but has not yet been installed. I would like to potentially reduce the number of times I call yarn install. As it stands I need to call yarn install and then yarn upgrade but I don't need to because I will be calling yarn install later in the script.
I think I can save a call to yarn install (via a yarn upgrade) in my script by simply updating the version number for the node package I want upgraded in package.json but then do not actually install any of those files since I will be calling yarn install at a later time in the script.
I would simply like to change the version number of a specific node package without installing any files using either a yarn or npm command. If this is not possible is this a good use case to parse package.json by hand and insert the version number with brute force?
Dependencies can be added to your package.json without installing them by using npm-add-dependencies
You can use it on-they-fly via npx, for example:
npx add-dependencies browser-sync-webpack-plugin#^2 browser-sync#^2 --dev
This will add browser-sync-webpack-plugin version ^2 and browser-sync version 2^ to devDependencies in your package.json

How can I clear the central cache for `npx`?

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

Vuetify Offline Docs

I have started using Vuetify to add ui-components and use pre-defined layouts. The problem is that I have to look into online-docs every now and then, and requires me to be connected to internet perpetually.
Is there a way to get offline docs for Vuetify? Like an html built with doxygen/javadocs, or a CHM? PDF? LaTEX? Anything really helps.
Update
git clone https://github.com/vuetifyjs/vuetifyjs.com.git has become a private project. The docs are now in the packages/docs/ directory. Instructions have been updated.
You can download the project from the vuetifyjs site repo, install and run locally.
git repo: https://github.com/vuetifyjs/vuetify
The instructions (for vue-cli-2 based project):
cd /tmp/
git clone https://github.com/vuetifyjs/vuetify.git
cd vuetify/packages/docs
yarn
# option 1 - build and serve
yarn build
yarn start
# option 2 - run dev instance
yarn dev
See the docs on how to run the docs.
git clone https://github.com/vuetifyjs/vuetify.git
cd vuetify
yarn
yarn build
yarn dev docs
Then head over to http://localhost:8095/en/getting-started/quick-start
git clone https://github.com/vuetifyjs/vuetify.git
yarn
yarn build
yarn start
http://localhost:8095
download zip from https://github.com/vuetifyjs/vuetify
extract it to any place like i put it in d:\xampp\htdcos\vuetify-master
than open command prompt (cmd) and type this path d:\xampp\htdcos\vuetify-master
run this command yarn here D:\xampp\htdocs\vuetify-master>yarn
than run yarn build here D:\xampp\htdocs\vuetify-master>yarn build
than yarn start here D:\xampp\htdocs\vuetify-master>yarn start
it will start vuetify local docs at 0.0.0.0:8095
now open browser and type http://localhost:8095 and enjoy
node module is required
also install yarn from https://yarnpkg.com/lang/en/docs/install/#windows-stable before running yarn commands and make sure check yarn version in cmd via yarn -v
The Vuetify website allows you to view it offline there by typing its website and pressing enter when not connected to the internet. It works and I do that all the time.

react-native: switch from yarn to npm

Is there a step-by-step process to change a react-native project from using yarn as the package manager to using npm? All I can find after several days of searching are instructions to go from npm to yarn and a package called deyarn which doesn't seem to fully work for me. Does anyone have a good resource on this?
Try this :
Remove yarn.lock (don't need this file).
Remove folder node_modules
In package.json, change script use yarn to the same command with npm
Remove all global package of yarn (don't need to remove if you want to use npm for one project)
Remove yarn if you don't want to use it again.
Install npm (if you installed, ignore this step)
Install global and local package you need
Can you upload some error, you said that not fully work.
Edit:
If you want to change npm to yarn, it same:
Remove package-lock.json (don't need this file).
Remove folder node_modules
In package.json, change script uses npm to the same command with yarn
Remove all global package of npm (don't need to remove if you want to use yarn for one project)
Remove npm if you don't want to use it again.
Install yarn (if you installed, ignore this step)
Install global and local package you need
You can see CLI commands comparison for 3rd step
You can try taking the following steps:
Remove node_modules
Run npm install
This should work because npm and yarn use the same package.json.
The deyarn package worked brilliantly for me.
Note that it will only flag (not auto-update) any package-lock.json scripts that you may need to update.
Depending on your environment needs, you may also want to strip out the engines: yarn: '..' entry it adds to your package-lock.json.
You don't need to do anything just run npm start cmd then follow the same step as suggest.
I've covert my yarn project To npm see the image.
enter image description here
enter image description here
hope is work for you.
thanks happy coding.

Command invalid: run always ask to create a project

I have a project about 4 months and suddenly the aurelia's CLI commands are not working.
When I try to execute au run --watch I receive a message with options to create a new project under the path.
I have already tried to uninstall and reinstall the aurelia CLI, It's not work.
The last thing I have done was to execute a git clean -xdf
I think that could be something on my project. Someone could help me?
ANSWER
After some attempts I fixed the problem:
1) I reinstall Git and Node;
2) I have deleted all the files under the \AppData\Roaming\npm-cache path;
3) I have checked if the Git and Node were in the PATH of environment variables;
4) I run the npm install command;
Is aurelia-cli included in the devDependencies of the project and also installed globally?
First, install globally:
npm i -g aurelia-cli
Then, in the project directory, install & save to devDependencies:
npm i --save-dev aurelia-cli
You should then be able to run au in the project directory and see that the build and run commands are now available.
Note that you'll also need to install the necessary gulp dependencies required by the tasks in your project devDependencies.
EDIT: See aurelia/cli/issues/485 which confirms that installing aurelia-cli as a local dependency fixes this issue.