Configure Nginx for path based deployment of multiple apps

Usually we set up separate UI elements and API as separate domains for the ease but here we are doing the same thing based on path.

Configure Nginx for path based deployment of multiple apps
Angular logo and Nginx logo

Recently I had a requirement where I had to deploy multiple angular/react/vue.js apps and an API to separate paths and serve it through Nginx.

Following is the configuration that I used.

server{
        server_name nginxangular.vigneshn.in;

        location /api{
                proxy_pass          http://127.0.0.1:8080;
                proxy_http_version  1.1;
                proxy_set_header    Upgrade             $http_upgrade;
                proxy_set_header    Host                $host;
                proxy_set_header    X-Real-IP           $remote_addr;
                proxy_set_header    X-Forwarded-For $proxy_add_x_forwarded_for;
	}
    location /admin {
                alias /data/app/ui/admin;
                index index.html index.htm;
                try_files $uri $uri/ /admin/index.html;
                }
    location /client {
                alias /data/app/ui/client;
                index index.html index.htm;
                try_files $uri $uri/ /client/index.html;
                }
    location /business {
                alias /data/app/ui/business;
                index index.html index.htm;
                try_files $uri $uri/ /business/index.html;
                }
    location / {
                alias /data/app/ui/common/;
                index index.html index.htm;
                try_files $uri $uri/ /index.html =404;
                }
}

The admin,client,business,common are the angular deployment folders. The common folder is served from / and the rest of them are served from their appropriate paths.