Develop Reference

Should I upload "node_modules"?

I am making a web page, node_modules file is around 150 megabytes, should I upload it or not? Is there any way to make it smaller? I am using "filezilla" and it would take too long to upload it.

Node modules is where all the external libraries you use for your application are kept. The list of those libraries should be mentioned in package.json file.
You should, typically, not upload node modules folder manually. They are the external libraries and are easily available to install separately. So, when moving files through filezilla, move everything but node modules. Then, in your server, simple run npm i before running the application.

If you have a package.json file and used npm module -s <package_name> (with -s or --save) then everything was fine.
If you don't have it no worries.Transfer the files into your online services like AWS,Something like that.
Then give the commands.
// For install npm
npm i
(or)
npm install
// To start your server
npm start
Whatever you put in your package.json file Start Object the file will be triggered.
No need to copy the node_modules folder at all.

Conditionally include dist directory with NPM module

I have an NPM package that can be used with the browser. But in order to use it in the browser, I pre-package it using Webpack and put the browserified code in the /dist directory.
Normally, I don't feel it's necessary to include the /dist directory when publishing to NPM, unless someone wants to use the browser version instead of the Node.js version (most of my customers will be using my lib for Node.js not for front-end).
The dist is a huge directory (all the project's code, plus NPM deps) and I want to save people the disk space and install time.
Should I just create a separate package for the browser code, or is there some flag I can use for conditionally including the dist directory when people install my package?

I believe it's better to create two separate packages.

Generate JS from .jsx files using Babel

I'm sorry for even posting this, but I don't know how to ask this question otherwise since I'm a total novice on JS/React/Node/Babel/JSX.
How can I convert the react templates from the front directory from this repo into the pure JS/HTML/CSS artifacts found in the public folder?
Is this the correct approach? I've tried running Babel transpiler on the page.jsx file but it didn't generate a file similar to public/script.min.js.
Or another way to put it, is how can I generate public/script.min.js from the assets found in the front directory?

On every repository, you should find a package.json file with script available to build your app. From what I can read in the respository package.json, launch "npm run build" in a command line with the respository as root. Make sure you have nodeJS installed on your computer to launch npm

npm overhead - how to handle this?

When installing anything via npm, it downloads dozens of not needed files. Usually I am looking for a library final build, a *.min.js file or anything like that but the rest is useless.
How do you handle all these useless files? Do you remove them by hand or generate the final app with any build tool like gulp or grunt?
I'm quite confused as I have plenty of npm modules installed in my webapp and the folder size is about 50 megabytes but it could be 2mb only.

npm install --production
Just doing an npm install brings in both development and runtime dependencies. You could also set the ENV to production globally for the server: npm config set production.
See this github issue. Note that this won't get you only the final minified build of everything, but will greatly reduce the bloat. For instance, a library might rely on babel-cli, babel-preset-es2015, and uglifyjs to be built (devDependency), but you don't need any of that if it also includes the transpiled minified file.

Managing Packages
For front end non-development packages I prefer Bower. It maintains the minified and non-minified version of your packages.
Build Tool
Use either Gulp or Grunt. Gulp would be my tool of choice.
Gulp task that will greatly improve your code are:
minification of both css and js
optimization/compression of images
concatenation and caching to reduce the number of calls to the server
package versioning
automatic injection of project dependencies
automatic injection of external dependencies
static analysis of js and css
automatic builds on code changes
deployment
testing
Node
If you can, leave to node all your development tools and leave to bower all your release plugins. Most node packages that are used in released apps have a bower installation counterpart.
Edit
Don't delete anything from Node manually as you don't know which packages have other packages as dependencies. If you are afraid that you may have junk in there, use npm rimraf to delete the node_modules folder, and then run npm install. Most importantly check your package.json for unnecessary saved packages.

Can I exclude files from an NPM package on the installation side?

Is it possible to exclude files from a list of NPM packages in my package.json?
I have a non-browser environment that works a bit differently: every file in node_modules dir becomes part of the production package. So there's no smart treeshaking that imports only the files that I use in my code.
For instance, I use some packages which also carry a lot of tests and i18n files, most of which I don't need and like to remove from my packaged production version. However, they are still included in the end package because the whole package folder is included in the build.
I'm trying to remove as many files from the packages as I can (without doing it manually each time) to save space and compilation time. The environment I use is looping all files in the node_modules directory and adds them to the production package (all packaged using Javascript). I would like a JavaScript solution to remove these files on compilation so the end package is as small as it can be.

I would use bower to manage client-side javascript modules, instead of using npm directly.
Bower packages are simpler than npm equivalents and don't have subfolders with module dependencies. Most will include a "dist" folder with pre-minified javascript. Right out of the box your packages will be smaller than if you use npm.
If you want to go further, you can include some processing in your gulpjs or gruntjs scripts to either manually copy needed files to lib and css folder(s), or use a plugin like gulp-bower-normalize to (somewhat) automatically do the same thing.