Deploy multiple angular apps on single VPS through nginx

Question

I have two web apps bootstrapped from https://github.com/Swiip/generator-gulp-angular . I want to deploy one app at http://myvps.com/app1 and other at http://myvps.com/app2 .

Here is the nginx configuration that I am using for this purpose

location /app1 {
  proxy_pass http://myvps.com:3000;
  proxy_http_version 1.1;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection 'upgrade';
  proxy_set_header Host $host;
  proxy_cache_bypass $http_upgrade;
  rewrite ^/app1/(.*)$ /$1 break;
 }
location /app2 {
  proxy_pass http://myvps.com:5000;
  proxy_http_version 1.1;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection 'upgrade';
  proxy_set_header Host $host;
  proxy_cache_bypass $http_upgrade;
  rewrite ^/app2/(.*)$ /$1 break;
  }

I don't want to serve static content from nginx, everything should be served from nodejs server. I have also added

<base href="/app1/"> 

and

<base href="/app2/">

but nothing seems to work, all the static resources give 404.

Answer 1

Sorry to answer my own question, I found the answer after spending a day to get it work, and since no one has answered this yet I thought I'd post my solution. I had to serve from dist not from src , so for this purpose I had to do gulp serve:dist .

I did not had to change anything else like nginx configuration, or anything else. Hope it helps anyone else.