Homebridge-config-ui-x: Web UI cannot access if behind reverse proxy with additional path in front

[ronald8192]

I think this is something between feature request or bug

Describe The Bug:
Normally after setup will use http://ip:8080 to access the UI, but I have nginx reverse proxy to serve the site and setup http://ip/homebridge to access homebridge web UI. The UI will show a white blank screen.

The reason is all js and css are not loaded. /homebridge/ in the request path is missing.
=> http://ip/styles.e0dc902492593c470c22.css
should be
=> http://ip/homebridge/styles.e0dc902492593c470c22.css (will return 200)

I try to edit the index page, adding homebridge/ in all path:

but still, the same problem happens on other requests:
http://ip/api/auth/settings

If reverse proxy use root / to serve, the UI is working

Seems the UI is an Angular app, and it can be fix in code or build parameter?

http://www.projectcodify.com/angular-set-base-url-dynamically
https://stackoverflow.com/questions/55705637/how-to-set-base-url-for-angular-application
https://angular.io/api/common/APP_BASE_HREF

To Reproduce:

1. Setup like normal (i using homebridge docker version)
2. Setup nginx reverse proxy

server{
    listen 80;

    location /homebridge {
        proxy_pass http://127.0.0.1:8081/;
        proxy_buffering             off;
        proxy_set_header            Host $host;
        proxy_set_header            Upgrade $http_upgrade;
        proxy_set_header            Connection "Upgrade";
        proxy_set_header            X-Real-IP $remote_addr;
        proxy_set_header            X-Forward-For $proxy_add_x_forwarded_for;
    }
}

1. Browse web site at http://ip/homebridge

Expected behavior:
Can access the UI by http://ip/homebridge/ like normal (or other paths in front)

Logs:

(not related)

Homebridge Config:

(default config)

Screenshots:

Environment:

• Node.js Version: v12.16.2
• NPM Version: 6.14.4
• Homebridge Version: 0.4.53
• Homebridge Config UI X Version: v4.15.1
• Operating System: Docker
• Process Supervisor: Docker

$ docker images
REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
oznu/homebridge     latest              fba80728acfd        5 days ago          471MB

[oznu]

Here is what needs to change:

https://github.com/oznu/homebridge-config-ui-x/compare/url-stub-support

Not merging yes as I'm not sure it won't break existing setups.

[ronald8192]

I want to test it. How to update?

[donavanbecker]

sudo npm install -g --unsafe-perm [email protected]

[ronald8192]

I updated.
css and js in index page are loading correctly, but /homebridge/api/auth/settings returns the index html.

[ronald8192]

Hi @oznu! I added 3 Nginx rewrite rule, it is working now!

rewrite /homebridge/api/(.*)                   /api/$1       break;
rewrite /homebridge/socket.io/(.*)             /socket.io/$1 break;
rewrite /homebridge/platform-tools/docker/(.*) /$1           break;

Also tested it works without url stub.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.