How to configure webpack to compile Vuejs and Laravel in different folders - laravel

Question

My problem: npm run watch (running in the backend side of the server) returns a blank html page, any updates that I make in the frontend are not compiled. The problem started to occur randomly, the only thing that changed is that I installed auth ui in Laravel.
My directory setup:
www
- frontend (Vuejs)
- standard vue files/folders
- package.json
- vue.config.js
- babel.config.js
- etc.
- backend (Laravel)
- standard laravel files/folders
- package.json
- webpack.mix.js
I know this is not an nginx problem but just in case you need to know, nginx rootfolder is pointing to /var/www/backend/public and is using a let's encrypt ssl certificate.
vue.config.js
module.exports = {
lintOnSave: false,
runtimeCompiler: true,
configureWebpack: {
resolve: {
symlinks: false
}
}
};
package.json (frontend)
{
"name": "a random name",
"author": "that will be me :)",
"description": "nice description",
"version": "1.0.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test:unit": "vue-cli-service test:unit",
"test:e2e": "vue-cli-service test:e2e",
"clearCache": "jest --clearCache",
"release": "npm-run-all clearCache lint build test:unit test:e2e"
},
"dependencies": {
"axios": "^0.19.2",
"cesium": "^1.71.0",
"core-js": "3.5.0",
"html-webpack-plugin": "^4.3.0",
"html-webpack-template": "^6.2.0",
"nouislider": "14.1.0",
"requirejs": "^2.3.6",
"v-tooltip": "2.0.2",
"vue": "2.6.10",
"vue-carousel": "0.18.0",
"vue-clickaway": "2.2.2",
"vue-kinesis": "^1.1.5",
"vue-lazyload": "1.3.3",
"vue-material": "1.0.0-beta-11",
"vue-router": "3.1.3"
},
"devDependencies": {
"#vue/cli-plugin-babel": "4.1.1",
"#vue/cli-plugin-eslint": "4.1.1",
"#vue/cli-plugin-router": "4.1.1",
"#vue/cli-service": "4.1.1",
"#vue/eslint-config-prettier": "6.0.0",
"babel-eslint": "10.0.3",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "3.1.1",
"eslint-plugin-vue": "^6.2.2",
"gulp": "^4.0.2",
"gulp-append-prepend": "1.0.8",
"prettier": "1.19.1",
"sass": "1.23.7",
"sass-loader": "8.0.0",
"vue-template-compiler": "2.6.10",
"webpack": "^4.44.0",
"webpack-cli": "^3.3.12"
}
}
package.json (backend)
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.19",
"bootstrap": "^4.0.0",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^4.0.7",
"lodash": "^4.17.13",
"popper.js": "^1.12",
"resolve-url-loader": "^2.3.1",
"sass": "^1.20.1",
"sass-loader": "7.*",
"vue": "^2.5.17",
"vue-template-compiler": "^2.6.10"
},
"dependencies": {
"animo-core": "^1.0.8",
"bootstrap": "^4.5.0",
"gsap": "^3.4.2",
"jquery": "^3.5.1",
"paper": "^0.12.11",
"popper": "^1.0.1",
"popper.js": "^1.16.1",
"requirejs": "^2.3.6",
"simplex-noise": "^2.4.0",
"vue": "^2.6.11",
"vue-axios": "^2.1.5",
"vue-kinesis": "^1.1.5",
"vue-roller": "^1.12.1",
"vue-router": "^3.3.4",
"vue-text-transition": "^1.0.19",
"vuex": "^3.5.1"
}
}
webpack.mix.js
const path = require('path');
const mix = require('laravel-mix');
mix.webpackConfig({
resolve: {
alias: {
"#": path.resolve(__dirname, "resources/js/")
}
}
});
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sourceMaps();
mix.copy('../frontend/public', 'public');
What I would like to happen (again)
Run npm run watch within the backend. Then it auto compiles my frontend to the public directory in the frontend. The backend then uses mix.copy to copy the compiled app.js and app.scss (or just all the content within the public folder) to the backend's public directory.
If you need any more information, please ask, I've been trying to fix this for the last couple of days now and I can't seem to find the solution anywhere.