My vue.js + Sails.js app won't run on Heroku - heroku

Question

I've created a web app (Vue JS frontend, Sails JS backend) that runs fine on my local server. However, when I try to run it, I get errors; mostly dependency errors. I've deployed it on Heroku. I had to create a package.json file in the root of my app folder.
Here's what the app tree looks like:
root folder
|---frontend
|---package.json file
|---backend
|---package.json file
|---package.json file
I created the frontend app with vue cli webpack.
"name": "zigy-demo-store",
"version": "1.0.0",
"description": "A demo online store with Admin functions.",
"main": "backend/app.js",
"scripts": {
"dev": "cd backend && npm i && npm run dev & cd frontend && npm i && npm run build",
"start": "cd backend && npm i && npm run dev & cd frontend && npm i && npm start"
},
"dependencies": {
"sails": ""
},
"repository": {
"type": "git",
},
"engines": {
"node": "^10.15",
"npm": "6.7.0"
}
}
Here are some errors
0 info it worked if it ends with ok
1 verbose cli [ '/usr/bin/node', '/home/adesuwa/.npm-global/bin/npm', 'start' ]
2 info using npm#6.7.0
3 info using node#v10.15.0
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle zigy-demo-store#1.0.0~prestart: zigy-demo-store#1.0.0
6 info lifecycle zigy-demo-store#1.0.0~start: zigy-demo-store#1.0.0
7 verbose lifecycle zigy-demo-store#1.0.0~start: unsafe-perm in lifecycle true
8 verbose lifecycle zigy-demo-store#1.0.0~start: PATH: /home/adesuwa/.npm-global/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/media/adesuwa/Files/Programming/Dev test/zigy-demo-store/node_modules/.bin:/home/adesuwa/dart-sass/:/home/adesuwa/.npm-global/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin
9 verbose lifecycle zigy-demo-store#1.0.0~start: CWD: /media/adesuwa/Files/Programming/Dev test/zigy-demo-store
10 silly lifecycle zigy-demo-store#1.0.0~start: Args: [ '-c',
10 silly lifecycle 'cd backend && npm i && npm run dev & cd frontend && npm i && npm start' ]
11 silly lifecycle zigy-demo-store#1.0.0~start: Returned: code: 1 signal: null
12 info lifecycle zigy-demo-store#1.0.0~start: Failed to exec start script
13 verbose stack Error: zigy-demo-store#1.0.0 start: `cd backend && npm i && npm run dev & cd frontend && npm i && npm start`
13 verbose stack Exit status 1
13 verbose stack at EventEmitter.<anonymous> (/home/adesuwa/.npm-global/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:301:16)
13 verbose stack at EventEmitter.emit (events.js:182:13)
13 verbose stack at ChildProcess.<anonymous> (/home/adesuwa/.npm-global/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack at ChildProcess.emit (events.js:182:13)
13 verbose stack at maybeClose (internal/child_process.js:962:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:251:5)
14 verbose pkgid zigy-demo-store#1.0.0
15 verbose cwd /media/adesuwa/Files/Programming/Dev test/zigy-demo-store
16 verbose Linux 4.15.0-45-generic
17 verbose argv "/usr/bin/node" "/home/adesuwa/.npm-global/bin/npm" "start"
18 verbose node v10.15.0
19 verbose npm v6.7.0
20 error code ELIFECYCLE
21 error errno 1
22 error zigy-demo-store#1.0.0 start: `cd backend && npm i && npm run dev & cd frontend && npm i && npm start`
22 error Exit status 1
23 error Failed at the zigy-demo-store#1.0.0 start script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

Answer 1

Looks to me to be a problem with your paths. In the error log I see that the chained command is:
cd backend && npm i && npm run dev & cd frontend && npm i && npm start
According to your tree structure there is no frontend directory inside backend directory, which makes cd frontend fail. Try adding a ../ in there to go up one level before you go into frontend:
cd backend && npm i && npm run dev & cd ../frontend && npm i && npm start

Answer 2

Ok so I just deployed the frontend and backend as separate apps on Heroku. I followed this tutorial for making a Vue.js + webpack deploy on Heroku: https://codeburst.io/quick-n-clean-way-to-deploy-vue-webpack-apps-on-heroku-b522d3904bc8
Instead of pushing the frontend folder though, I push only the dist/ folder located in the frontend folder. I followed the steps from the article except the git init part. I cd'ed into the dist folder and did my git init there instead.