Project structure for a src to dist folder using node_modules - node.js

I'm working on an project that makes use of npm's node_modules. In my case it's an Angular 2 project with Typescript, but I don't think that relevant.
My project structure looks like this:
/
dist/
main.js
index.html
node_modules/
** all node modules
src/
main.ts
index.html
The sources are in the src folder, and everything is automatically copied to the dist folder on save (Grunt tasks).
The only problem is, how do I reference the node_modules from the index.html file?
I could put a ../ in front of the path of every script that I reference in the index.html. But in a production environment the index.html will be in the root directory like the node_modules folder is. That means I have to update all the style and script references and remove the ../ infront of all paths.
I have the feeling there is a better way to setup my work environment. I couldn't find any pleasing examples.
How do other projects do this? Is there some sort of a uniform standard that seems to work well?

Related

How can a (vue/vite) (node/express) share same .env and node_modules files and foolder structure?

How to make vue (npm init vue#latest) and node/express server/api in root folder in a way that there are no duplicate
folders and files, like node_modules, .env files, etc.
Plan is to build client(spa) to public folder inside server(api), so everything is neat!
Is that usual practice?
I tried usual approach to generate everything separately, but no success in telling vite to install dependencies in node_modules outside client folder.

How to properly eslint from root folder for node.js project

I have a project structure that looks like:
root/
controllers/
database/
app.js
server.js
.eslintrc.json
package.json
etc...
I want to run eslint from command line to lint all .js files in root and subdirectories, but trying to use global patterns at this level is giving different errors:
If I try: eslint ./**/*.js, I start getting errors from node_modules, references from config files inside the modules..., which I assume means eslint is for some reason not ignoring the modules folder as it should by default.
The only way to get it working is by individually listing the files in the root and subdirectories, like:
yarn run eslint controllers/** server.js app.js database/**
Doing this works, but is not a very clean solution. Is this behavior expected? Must I necessarily put everything inside a src folder as usually done?
Not sure how to eslint properly from root folder but in order to check all files at once, one option I could see is to put all the project files and folders (other than eslint.json, package*.json etc) in a new folder "src".
Post which project structure would be :-
root/
src/
controllers/
database/
app.js
server.js
.eslintrc.json
package.json
etc...
Then doing npx eslint src

How to correctly setup folders / files in nodejs?

I am currently starting out in node.js and I am a bit confused with the folder/file setups. Let´s say I have a main folder where all my different projects are located, and those are folders too. Now where do I need to keep my node-modules folder? Also how about the package.json file, do I need that inside each project folder?
use npm init first
it will make a package.json file.
Install the dependencies which be stored in Node_modules folder
Now make a folder named Public
with subfolders assets, css, js, index.html -- the FrontEnd part

Load custom modules from root directory with NPM

Probably a really simple answer but I'm lost. If I'm in a file several directories below root is there a way I can require ('mylib/module1') in that file and have it search for the 'mylib/module1.js' from the root rather than the relative path of where I'm using the require statement?
Obviously if I require('underscore') it will just look for it inpackage.json, but I couldn't find any way to set up a reference inpackage.json` to point the right folder, something like:
dependencies: {
"mylib/module1" : "./mylib/module1.js"
}
I did find a reference to browser that allows you to map to client-side files, but I'm looking for something that will work on the back-end.
One way of doing it without needing npm support is to rename your mylib folder to node_modules. You can then simply require('module').
The reason this works is because require searches recursively up the directory structure until / looking for folders called node_modules. This very simple mechanism allows node to have multiple levels of lib directories which can be overridden at multiple "local" level where necessary. For example, you can have the following directory structure:
/usr
/home
/diplosaurus
/node_modules
module1.js <-------- version 1
/code
/node_modules
module1.js <-------- version 2
/projectA
/node_modules
module1.js <------- beta version
main.js
/projetB
main.js
All code in your home directory would use version 1 of module1 but code in the code directory would use version 2 and projectA uses the beta version.
This also means that you can let npm manage your project's node_modules directory yet maintain a manually managed, higher level node_modules directory for your personal libraries.

Node.js npm dependencies in subfolder

I have a project in which I use node-webkit. node-webkit allows npm packages to be used for developing desktop applications. I make use of grunt to build my application.
My folder structure looks like this at the moment:
project root
node_modules/ (1)
package.json (1)
App/
node_modules/ (2)
package.json (2)
bower.json
bower_components/
...
controllers/
filters/
...
app.js
The npm dependencies for the application itself are kept within the App folder, but the dev dependencies for building the project are not related to the application source code, so i keep them in node_modules (1) inside the root folder. I also know that in a package.json file one can express dependencies and dev dependencies, exactly for this reason. I would rather have one package.json file in the root expressing ALL dependencies, including dev dependencies, but i would rather have a separation of those dependencies on folder level.
Two questions arise:
Is this a good way to organize my npm dependencies? If yes, awesome? If no, which I expect:
What is a better way to organize my dependencies? Is it possible to specify that dev dependencies go into folder a, and 'regular' dependencies go into folder b? If so, how do I do this?
In case anyone is wondering, this is the project i am talking about:
https://github.com/michahell/pinbored-webkit
[updated folder structure to include app.js for clarity]
It is perfectly fine to keep more than one package.json file and multiple node_module directories for a project. If you consider the parts as separate components.
An example might be if, you have one directory containing a node server, another containing a react app, and a third containing some kind of deployment script written in javascript.
#Michael package.json file contains all the dependencies related to that project.There is no need for multiple package files and multiple node_modules folders..
But you need to check where is your App.js file!!
your App.js , package.json must be in same folder unless configured.

Resources