What is the purpose of the 'node_modules' folder?

Question

What exactly is the node_modules folder and what is it for?

I know when we download any library with npm, the library goes to folder node_modules. I also know that, when we are going to upload it (to GitHub, for example) we have to ignore the node_modules folder, because it takes a lot of space. Through file package.json we can download all dependencies using npm i.

Let's say I want to deploy my app/website to some server/host, do I have to upload the node_modules folder to server as well?

And another thing. Usually, I download my jQuery and Bootstrap files from the website and copy in the content to the css/js folder inside my project, but this time I tried with npm and everything goes to folder node_modules and I'm using Cordova. When I execute the command cordova build, neither my jQuery nor my Bootstrap files are generated.

So those are my questions:

• if I want to host my project, do I really have to upload the node_modules folder as well?
• And when it's Cordova or Ionic, do I also have to copy the node_modules folder to the www folder?
• If so, what is the point of using npm to download libraries? Is this how it's really done? Which one is better? Going to the website, download the file, and paste inside www, or download through npm?

Solution

What is the purpose of node_modules folder?

You can think of the node_modules folder like a cache for the external modules that your project depends upon. When you npm install them, they are downloaded from the web and copied into the node_modules folder and Node.js is trained to look for them there when you import them (without a specific path). I refer to it as a cache because the node_modules folder can be entirely recreated from scratch at any time by just reinstalling all the dependent modules (that should be listed in your project folders).

but I know when we are going to upload it to github we have to ignore the node_modules folder because it takes a lot of space.

This is because there's no reason to store copies of all your dependent modules in your own GitHub project. The exact version you were using is known and stored in your package.json or package-lock.json so at any time you or anyone else using your project can download your code and then retch all the other dependent modules from their original source (including even the exact same versions you were using). So, there isn't any reason to store a separate duplicate copy of all those dependent modules in your own project. That would just be wasteful and would complicate upgrading to a newer version of all those dependent modules.

So that's my question, if I want to host my project, Do I really have to upload the node_modules as well?

If you have your project running on your local machine and you now want to move it to your hosting location, it is best to reinstall all the dependent modules on the hosting machine and not copy them from your development machine. This is because the process of installing them on the hosting machine (which might be a different platform or OS than your development machine) may use a bit of a different install process for the specific hosting environment.

Comments

[izaac mendes]

And how do I reinstall them on the host sever? And when you say import them without a specific path you mean using require, right?

[jfriend00]

@izaacmendes - require() or import depending upon whether you're using ESM modules or CommonJS modules. If you have properly prepared your package.json file to contain your dependent modules, then you can just do npm install with no other arguments in the directory where you package.json is located and npm will fetch all the dependent modules and place them in the node_modules directory. See the --save-xxxx options for NPM for how to save your dependencies to your package.json file if you aren't already doing that.

[jfriend00]

@izaacmendes - If this answered your question, you can indicate that to the community by clicking the checkmark to the left of the answer. That will also earn you some reputation points for following the proper procedure here.

[izaac mendes]

But require is just for js files but what about when I have to include in html using <script src> inside? I just do this? <script> Require(“something”) </script>?

[izaac mendes]

Did I do wrong? Because my package.json file is outside my www, that’s why when I run the command Cordova build, none of my external library comes with it. But this is how Cordova set up the project, so should I move package.json to www folder? Because then node_modules will be there and all my problems would be gone, and when I deploy to firebase hosting I could deploy the node_modules as well?

[jfriend00]

@petermortensen - I rolled back your latest edits. Please do not edit the material in my question that I quoted from the question. That's not my content. It's how the question was written and quoted literally. Quotes should not be edited, even to fix grammatical errors.