Ufdjrw

I built a project with Vue CLI 3 and Express 4 and this went straight forward so far, as I had the backend server in one folder and the frontend in another, but now I'm coming to a halt trying to deploy both on a single Node hosting service. Let me tell more in a bit.

My project structure so far:

Project:
 - node_modules/
 - package.json

Project/Frontend (Vue CLI 3):
 - node_modules/
 - package.json
 - app.js
 - dist/
 - <other folders like "public","tests","src",etc> 

Project/Backend (Express 4):
 - node_modules/
 - package.json
 - app.js
 - <other folders like "controllers" and stuff>

Now, the problem is that I need to combine both in one Node app, in order to deploy it on a hosting serice.

I'd like to let Express (Backend) run the server and serve dist/ from the Frontend, but the problem is that the hosting service that I've chosen just runs npm install on the root folder, which isn't helpful, as I need the "Express" (and some others) package to run the server. Since it's not in the root folder, it doesn't install any packages and obviously fails to run.

I've created a root-level npm config to try to compile the Frontend and then copy dist/ to the Express backend. But since the hosting service doesn't install anything other than the root npm config, cd'ing into the Frontend and then building fails, as it misses node_modules.

I somehow managed to make this work by installing webpack on the backend folder's npm, configuring it to bundle the Express app and copying the bundle and the dist/ from the frontend in the root Project's folder and then running on the root-level npm:

cd frontend && npm run build && cd ../backend && webpack

and after that pushing the root dist/ to the hosting service, which kinda worked, but it's "fiddly" and not optimal, even more because I need to build it everytime on the local computer and only then upload it. If I somehow could utilize the root npm's packages to build frontend and backend on the hosting service, it would be great, but I believe here versioning is another issue, since both would share the same npm packages.

Is there any better and/or cleaner solution to this?

If any detail is missing, just let me know.

Thanks for any help in advance.