0

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.

enter image description here

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.

Estus Flask
  • 206,104
  • 70
  • 425
  • 565
V S Vuca
  • 31
  • 1
  • 5
  • The question is about Vite, not Vue. I'd expect it to work naturally for node_modules but not env files. Vite uses dotenv and likely needs to be fixed somehow, probably like this https://stackoverflow.com/questions/42335016/dotenv-file-is-not-loading-environment-variables in Vite config file, but this won't handle .env.* files – Estus Flask Jan 18 '23 at 15:44
  • Thanks for the help, it won't work naturally though! Vite adds its own node modules folder to the project root folder when starting a project. Must be a simple solution, I just can't figure it out! – V S Vuca Feb 06 '23 at 07:39
  • Why is node_modules a problem? The question lacks clear problem statement, "no success" doesn't explain what's wrong. I had no problems in a similar setup. Root folder is supposed to be Node project i.e. have package.json, it's unclear if it's the case here. Also I wouldn't expect that there will be a lot of shared deps between client and server app, even if there are, their versions can be mismatched, may not worth it just for 1 BE and 1 FE app – Estus Flask Feb 06 '23 at 08:00
  • Ye that's right root is a node backend, and the client fr-end is in it! No problem , with the project per se, I just end up with two node_modules folders (on in client, one from node in the root). I am talking about running vue@latest command than the npm install which sets up a vue client project. So there's the catch. How to reuse the node_modules from backend – V S Vuca Feb 06 '23 at 08:26
  • How exactly reuse? It's reused by default by Node due to how module resolution works. If a dep isn't found in child node_modules, it's seeked in parent node_modules. Are you trying to move all deps from client/node_modules to root? This is a bad practice, you're mixing unrelated deps together this way – Estus Flask Feb 06 '23 at 09:58
  • Yes, that's what I wanted to do. (root/node_modules === croot/client/node_modules)Didn't know it's a bad practice? If it is a bad practice ill keep it as default. I thought its a bad practise to have duplicate packages. Thank you for your time and effort! – V S Vuca Feb 06 '23 at 13:07
  • The question doesn't contain enough info. Which packages are dupe? As mentioned, there shouldn't be much for a project with BE and FE app. It would make more sense to do this for several FE apps that share the same versions of deps. Even then it's preferable to avoid a single pool of deps and make root project contain only shared deps, check how JS monorepo projects are organized for more – Estus Flask Feb 06 '23 at 15:54

0 Answers0