Combining Express 4 and Vue CLI 3

Question

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.

mJehanno · Accepted Answer · 2019-03-15 08:48:46Z

1

You should give a try to Lerna. It allow you to have multiple js projects in one repo (or one folder) with a package.json at the root folder where you can add script to interact with all your project.

For exemple, you should be able to add a start script which will go in your differents apps folder, install your dependencies en run/build those project.

edited Mar 15, 2019 at 8:48

answered Mar 14, 2019 at 14:54

mJehanno

8761 gold badge14 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ealhad · Accepted Answer · 2019-03-18 14:52:15Z

1

You could use a script running both npm install, building the front and running the back.

const resolve = require('path').resolve
const cp = require('child_process')

const frontend = resolve(__dirname, 'Frontend')
const backend = resolve(__dirname, 'Backend')

cp.exec('npm install', { env: process.env, cwd: frontend }, () => {
  cp.exec('npm run build', { env: process.env, cwd: frontend })
})

cp.exec('npm install', { env: process.env, cwd: backend }, () => {
  cp.exec('npm run start', { env: process.env, cwd: backend })
})

answered Mar 18, 2019 at 14:52

Ealhad

2,31023 silver badges27 bronze badges

Collectives™ on Stack Overflow

Combining Express 4 and Vue CLI 3

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related