How to solve blank page while running second vue app under nginx? - macos

Question

Need to run multiple Vue.js v3 apps with ngnix under macOS Big Sur.
First app located in: /Users/kharraz/Developer/code/homeapp/dist;
Second app: /Users/kharraz/Developer/code/businessapp/dist;
The two folders contains yarn build output;
The goal is when i tape localhost or localhost/homeapp takes me to the first app and when i type localhost/businessapp takes me to the second app.
With my current conf, localhost/homeapp/index.html is working but the second localhost/businessapp/index.html is giving me a blank page.
Both apps are working fine under localhost:8001 and localhost:8002.
Here is my nginx.conf file:
http {
server {
listen 8080;
location / {
proxy_set_header Host $host;
proxy_set_header X-Forward-Host $host;
proxy_pass http://127.0.0.1:8001;
break;
}
location /markets {
proxy_set_header X-Forward-Host $host;
proxy_pass http://127.0.0.1:8002;
}
}
server {
listen 8001;
location / {
root /Users/kharraz/Developer/code/homeapp/dist;
try_files $uri /index.html;
include /opt/homebrew/etc/nginx/mime.types;
}
}
server {
server_name businessapp;
listen 8002;
location / {
root /Users/kharraz/Developer/code/businessapp/dist;
try_files $uri /index.html;
include /opt/homebrew/etc/nginx/mime.types;
}
}
}

Answer 1

Manually make the App route to path '/' instead of depending on Vue to take to homepage.
import { onMounted } from 'vue';
import { useRouter } from 'vue-router';
export default {
setup() {
const route = useRouter();
const doOpeningCeremony = async () => {
route.push({path: '/'});
}
onMounted(doOpeningCeremony);
},
}