Develop Reference

Is there any difference between running rm -rf node_modules + npm i vs npm ci?

If I'm using a unix system and want to clear out my node modules folder, is there any difference or advantage to running
rm -rf node_modules
then
npm i
versus
npm ci
As I understand it they're producing the same result, but is what's going on under the hood the same?

Running npm help ci will give you the answer; in short it removes the node_modules as well but it's meant for the CI so some additional tasks are performed:
This command is similar to npm install, except it's meant to be used in automated environments such as test platforms, continuous integration, and deployment or any situation where you want to make sure you're doing a clean install of your dependencies. It can be significantly faster than a regular npm install by skipping certain user-oriented features. It is also more strict than a regular install, which can help catch errors or inconsistencies caused by the incrementally-installed local environments of most npm users.
In short, the main differences between using npm install and npm ci are:
The project must have an existing package-lock.json or npm-shrinkwrap.json.
If dependencies in the package lock do not match those in package.json, npm ci will exit with an error, instead of updating the package lock.
npm ci can only install entire projects at a time: individual dependencies cannot be added with this command.
If a node_modules is already present, it will be automatically removed before npm ci begins its install.
It will never write to package.json or any of the package-locks: installs are essentially frozen.

npm wont start a react app, requires a dependency: "webpack-dev-server": "3.1.14"

I am trying to create a new react-app and start it, I have created react apps before with no errors but this time when i npm start i get this error
There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix
locally.
The react-scripts package provided by Create React App requires a
dependency:
"webpack-dev-server": "3.1.14"
Don't try to install it manually: your package manager does it
automatically.
However, a different version of webpack-dev-server was detected higher up
in the tree:
C:\Users\ashraf\node_modules\webpack-dev-server (version: 3.1.9)
Manually installing incompatible versions is known to cause hard-to-debug
issues.
If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to
an .env file in your project.
That will permanently disable this message but you might encounter other
issues.
To fix the dependency tree, try following the steps below in the exact
order:
1. Delete package-lock.json (not package.json!) and/or yarn.lock in your
project folder.
2. Delete node_modules in your project folder.
3. Remove "webpack-dev-server" from dependencies and/or devDependencies in
the package.json file in your project folder.
4. Run npm install or yarn, depending on the package manager you use.
In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:
5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the
above steps with it instead.
This may help because npm has known issues with package hoisting which may
get resolved in future versions.
6. Check if C:\Users\ashraf\node_modules\webpack-dev-server is outside
your project directory.
For example, you might have accidentally installed something in your home
folder.
7. Try running npm ls webpack-dev-server in your project folder.
This will tell you which other package (apart from the expected react-
scripts) installed webpack-dev-server.
If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in
your project.
That would permanently disable this preflight check in case you want to
proceed anyway.
P.S. We know this message is long but please read the steps above :-) We
hope you find them helpful!
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! learnreact#0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the learnreact#0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely
additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\ashraf\AppData\Roaming\npm-cache\_logs\2019-02-
04T20_36_39_924Z-debug.log
PS C:\Users\ashraf\Desktop\Files\LearnReact\learnreact>
i have tried all the steps in detail in the error log but its still not working, any thoughts on what is causing this error? Thanks in advance

It seems like you want to depend on webpack-dev-server inside your local project.
Perhaps you need to run npm install in your project, instead of your ~ home directory?
from your output, notice these lines.
However, a different version of webpack-dev-server was detected higher up
in the tree:
C:\Users\ashraf\node_modules\webpack-dev-server (version: 3.1.9)
...
6. Check if C:\Users\ashraf\node_modules\webpack-dev-server is outside
your project directory.
For example, you might have accidentally installed something in your home
folder.
so I would
cd ./my-project
npm i

Did you install webpack-dev-server on its own? It seems it has been installed either by you or by another project install. Webpack is for your local development environment so the other install is close enough to your project to interfere with the copy that react is trying to install in your project folder. Steps 1-4 in your error message should resolve your issue. If you have done that and its still not working, did you get different error messages with your next attempt to install your react package?

I have faced the same issue and this method worked for me.
Do follow the steps:
Start terminal from the desktop and write this command:
npm uninstall webpack-dev-server
This will uninstall webpack-dev-server package globally from you node modules.
Go back to you the terminal of your project and install webpack-dev-server package:
npm install webpack-dev-server#version
Note: The version part (above) should equal the versions asked for in the error message.
npm install webpack-dev-server
Now start npm:
npm start
This error mostly occurs when you have created your project using the
npx create-react-app command instead of the npm create-react-app command.

In production, should i clean and reinstall node_modules everytime I deploy?

We have more than 10 instances of prod servers and each time we update our dependencies, so cleaning and re-installing sounds more controlled, but also a bit slower.
Problem is the devops team complain about the time taken to do a clean (after removing existing node_modules) npm install everytime package.json changes.
We have noticed sometimes our build breaks on prod if we do run update or install on existing node_modules.
Are there any best practices for production deployment?
How can i optimize the process of updating the node_modules safely here?

In newer npm version, there is a feature for locking the version of your dependencies.
There is a file called package-lock.json along with package.json. That lock file
will lock the dependency version while you install it on dev environment. So, when you install it on production from package.json using npm install, it will fetch locked version from package-lock.json file and will install specific version same as dev environment.
That means you don't need to clean node_module folder every time on production. You can just install new added dependency from package.json file and its version will be taken from package-lock.json file.
There is another package manager called "yarn" is there which provide same feature, but if you want to stick to npm, then its now possible with new npm version.

After a couple of months breaking my head on this. I came across this package on NPM:
npm-check-updates.
npm-check-updates allows you to upgrade your package.json dependencies to the latest versions.
All you have to do is run
npm install npm-check-updates --save
ncu -u
npm install
This works very nicely for me.

npm install vs npm install <library>

At work we had problem that wasn't displaying icon (from rc-menu lib) for menu block
Each time when we are running
mvn install
we are also running
npm install
inside package json we had this library
"rc-menu":"^5.10.0"
The way to fix it was to run
npm install rc-menu (Inside package.json directory)
My question why this solution works?
For me it is impossible but maybe I'm missing something?

Your version must be a missmatch.
With npm install {package_name} you are installing the latest version. And with npm install you are installing version that satisfies rules of your package.json.
As far as I can see that module doesn't have 5.10.0 version at all...
5.0.14 is the latest of 105 releases
You can try to see the version of that module if you install it with npm install by typing npm list afterwards.

How to install multiple gulp packages at once using node?

I just switched to gulp task runner to automate my workflow, but there is this problem whenever i want to start a new project i have to install all packages required in gulpfile.js using the following command:
npm install --save-dev {package name}
Imagine there are 20 of them, it's a bit boring. How can simplify this?

You can add multiple package names to npm install:
npm install --save-dev package1 package2 package3
npm will install and save the specified packages in your package.json.

Personally I use mostly the same gulp plugins for all of my projects. I copy the devDependencies bit from the package.json of one of my previous projects into my newly created package.json, then I run npm i which installs all dependencies listed in package.json. It's a huge timesaver, especially since I usually copy my gulpfile.js as well.
Note: don't forget to run npm outdated if it's been a while since your previous project started, to check if any of the dependencies have been updated in the meantime.

You can also use brace expansion for installing many similarly named packages:
npm i -D babel-{core,preset-es2015,preset-react}