How to access a webui from a custom path?

[offroadguy56]

I have 2 applications at the same IP address on different ports. I'm trying reach them without the use of sub domains. The main webui I can access just fine at https://mydomain.com/. The 2nd webui I am not able to access at https://mydomain.com/service/. Some context for these applications, they are the same application just running on different ports. I need settings and things to be separated as they will perform different types of work. Both webui work perfectly fine with each other on the local machine. App 1 is on port 8455 the 2nd app is on port 8456.

I've only just started learning about custom paths. I've been looking at other forums and some have different bits than others for the custom location. But in general they all shared this info and is what I have currently in my custom path setup. I've tried a few other variations from google results but they either return something about JSON and CSS (like I had inspected the webpage) or a blank page (after inspecting the page in the network tab I can see a bunch of 404 for the javascripts and other things the webui has). This is the current state of my setup.

Is this an issue with the application's webui or with NPM?

location ^~ /service/ {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-NginX-Proxy true;
proxy_pass http://192.168.1.100:8456/;
}