NPM Init and Start - npm

I'm using npm for a local project and I want to know if I have to use npm init every time I start a session? I think the answer is yes.
If I restart my machine for example, do I have to do npm init? Do I have to do npm install and npm start each time?
Thanks

No, you only have to do npm init when you're first creating a project. It essentially just creates the package.json file (https://docs.npmjs.com/cli/init.html).
And you should only have to run npm install when you first set up a project for local development, or when changes are made to the project's dependencies. So, usually just once, unless you've made changes. (https://docs.npmjs.com/cli/install.html)
npm start is a script that should be defined in your package.json, and you will likely need to run that every time you begin local development on your project.

When you are creating a node project, you need to have package.json. npm init is a convenient way of scaffolding your package.json; you may need to run it everytime you are starting a new project.
npm install, however, installs your dependencies in node_modules folder. You may need to run this everytime you manually add a dependency to your package.json file.
If you need extra information, check here: https://nodesource.com/blog/an-absolute-beginners-guide-to-using-npm/

npm init is to make new modules you dont ever need to run npm init to start a session at all as far as I can tell

Related

npm start install my package, but i'm running my project with yarn start

If I installed some package with NPM it will work and recognize it if I run my project with yarn start instead npm start?
Yes, it will still work after all the required packages are installed.
But you should not switch package Managers like that since you will generate two lock files if you use both to install packages. npm generates the package-lock.json and yarn will generate the yarn.lock file. I recommend you to stay with one or switch completely.
In runtime, it does not make any difference if you use yarn or npm.
npm run start and yarn start will do exactly the same.

Install package from npm after linking to another local package with updated version

I'm sure others have this workflow, so I must be missing something here.
How does one go about developing a new version of a package, linking it to test in another app, and then installing another (unrelated) package?
What I've done:
Run git clone git#package-to-update && cd package-to-update.
Edit package, update package-to-update/package.json version to 2.0.0.
Update my-app/package.json to use package-to-update#2.0.0.
cd package-to-update && npm link && cd my-appp && npm link package-to-update.
Test out my-app, see that package-to-update#2.0.0 resolves the issue, have a small party.
Push to package-to-update's upstream, create a merge request, and wait for maintainers to merge in my changes.
Use my local, linked version in the meantime as it's required for the feature I'm working on.
Notice I need another package other-unrelated-package in my-app.
Run cd my-app && npm install other-unrelated-package.
NPM fails because it's trying to pull package-to-update#2.0.0, which is not yet published.
Cry.
Is the only option here to run the following process every time you want to npm install?
Downgrade package-to-update in my-app/package.json.
Run npm install other-package.
Run npm link package-to-update.
Upgrade package-to-update in my-app/package.json".
I generally only use npm link for development. If I want to use a local version and not have to deal with re-linking, I install it by path rather than by version.
npm install /file/path/to/your/module
Then you'll end up with a file: URL like this in your package.json:
"slug": "file:../../slug"
Subsequent npm install won't search the registry in that case. (Since it will avoid the registry on future npm install runs, it also means you need to remember to change it back to the registry when the version with your patch is released!)
I haven't tested, but this method may require that you only care about it as an immediate dependency and not a dependency of another dependency. Based on your workflow above, that seems to be the case, but mentioning it here for other folks.

Patching a NPM package locally with patch-package, not working

I'm working on a vue.js frontend, and I need to patch a package to fit the special needs of the app. The package I'm trying to patch is 'vue-youtube' (not that it really matters). I'm trying to patch it with patch-package (https://www.npmjs.com/package/patch-package)
So basically :
I edited locally the /node_modules/vue-youtube/src/vue-youtube.js to fit my needs
I did add the postinstall script in my package.json : "scripts": { "postinstall": "patch-package" }
I did npm install patch-package --save-dev
Then I ran npx patch-package vue-youtube
It did create a vue-youtube+1.4.0.patch file in a /patches folder with my modifications
BUT, my modifications are not seen. When I do npm run serve and launch my webapp, the package used is still the one not edited. I tried running npm install before, without success. When I go to the /node_modules/vue-youtube/dist/vue-youtube.js (thankfully it is a small package so it is readable), I can see that indeed my modifications have not been "compiled".
What am I missing here ? I feel like I have followed eveything in the patch-package npm page..
Thanks
EDIT : Still investigating.. few more informations/questions :
my patch name is patches/vue-youtube+1.4.0.patch
when i run npm ls vue-youtube it returns just one element : vue-youtube#1.4.0
in my package.json the dependency listed is "vue-youtube": "^1.4.0", should it be different ? should it mention that it needs to be patched ?
EDIT 2 : I realized that I am not editing the node_modules/vue-youtube/dist/vue-youtube.js, but the node_modules/vue-youtube/src/vue-youtube.
If you edit the files in the dist folder, the patch works. (however I thought patch-package would allow me to edit the files in the src folder, in readable JS...)
WORKING SOLUTION :
If you edit the files directly in the dist/ folder of the package instead of the src/ folder, the patch works fine.
Adding below npm script in package.json after patching worked for me.
scripts: {
"prepare": "patch-package",
}
The lines from yarn documentation explains about prepare
For compatibility reasons, scripts called install, postinstall, prepublish, and prepare will all be called after your package has finished installing.
After adding this script in package.json, the changes of module file in patches folder has been patched into respective node module.
I was trying to do the exact same thing with some package, let's call it "some_package". When I saw the EDIT 2 my mind just connected the dots...
To test changes locally
Modify the files in node_modules/some_package/src folder and then, go to the node_modules/some_package and run:
$ npm install
$ npm run <name of the script that generates the dist folder>
No need to run npx patch-package nor postinstall step.
I think that this approach doesn't work for all packages, it depends on how the modified package's package.json is configured. Specifically, pay attention where the browser field is pointing (in my case ./dist/some_package.js).
CAVEAT: You will have to run npm install and npm run every time you make an update to the package.
To test changes and be able to share it among team members (when the package is on Github)
Make a fork of the package you want to modify.
Make all the changes you want to your forked version of the package.
Run the following to automatically update the package.json file to make the dependency point to your forked version:
$ npm install <github's user name>/<package's name of the forked repository>#<branch name> --save-prod
For instance, if your Github's user name is "johndoe", and you forked https://github.com/aurelia/framework, and you made a branch named "mycoolbranch" containing your changes, then it would be:
$ npm install johndoe/aurelia-framework#mycoolbranch --save-prod
Note that the --save-prod flag could be replaced with --save-dev if the dependency is just for development.
Take a look at this answer, it may help.
https://stackoverflow.com/a/71153240/9981565
For me it was happening because of version mismatch between package.json intended version of package and yarn.lock / package-lock.json

HRM module stop working on the same project on which it is working earlier

Hot reload module stop working on my project because of which i have to run this command each time i make any changes.
npm run serve
This usually is npm packages problem and is often remedied by reinstallation
first remove the node_modules directory in project root
also you can clear the npm cache npm cache clean --force(this is optional)
then reinstall packages npm i

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.