2.0.0 Web UI doesn't work behind reverse proxy

[database64128]

I'm using nginx to proxy https://cube64128.xyz/restreamer/ to Restreamer's 8080 port. The UI doesn't work properly because the paths are wrong:

The web UI should use relative paths, or allow the admin to configure a custom path.

[HeliosLHC]

I have the same issue. If you view the source in the UI's repo here: https://github.com/datarhei/restreamer-ui/blob/8dbdb3dfc90958d7cbe162b1c826ca7a75666d34/public/index.html
the paths are hard coded at build time using the "%PUBLIC_URL%" variable. Until this can be configured at runtime, the only resolution for reverse proxy users with restreamer as a subpath will need to build their own UI with the "%PUBLIC_URL%" set to their own subpath or set it's value to "./" to make all paths, relative paths.

I tried manually editing the static UI files in the Docker container to replace the paths in the built files which got it the interface to load but the rest of the UI is still broken (some hard coded paths i didn't get around to finding are still broken)

[kallenp]

Any idea howto solve this issue for beginners and not programmers ?

[MattWAnderson]

This works correctly for me behind a NGINX reverse proxy.

server {
    listen 443;
    server_name <web domain>;
    ssl on;

location = / {
    proxy_pass http://serverip:port/streamlink.html;
}

    location / {
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Server $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://serverip:port/;
    }

}

The double listing is to remove the need for the extra page.html

[HeliosLHC]

@MattWAnderson
Hi Matt, I believe in your Nginx config you are performing a root-to-root proxy where external "/" is mapped to the internal "/". In your case, it's mapped to the internal "/l" which is effectively the internal root. Since right now, the UI paths are hardcoded as absolute paths (non-relative), there aren't any issues for you.

The issue described in the original post (and mine as well) is using mapping an external subpath to the internal root path which is different from your configuration. An example nginx config (with domain: example.com) for that would be the following:

location /somesubpath {
    proxy_pass http://serverip:port/;
}

When the UI requests the path "/example.css", Nginx 404s as it can't find the path (outside of the defined location route). The correct path should have been "/somesubpath/example.css"

[jstabenow]

Hey folks,
Release v2.1.0 is out now and the %PUBLIC_URL% is removed. Thanks for your hint 👍
It should work now.

Other solution: Use our hosted Restreamer-UI:
https://restreamer.datarhei.com?address=https://your-restreamer-url:port (no /)

Mixed content must be allowed for HTTP: Help

[database64128]

Updated Restreamer to v2.1.0 and the UI still doesn't work:

Please reopen this issue.

[ioppermann]

True, this is still broken. A fix is in the pipeline and will be part of the next release.

[svenerbeck]

Hi @database64128
We are closing your issue #340.

This may be due to the following reasons:

• Problem/inquiry has been solved
• The ticket remained unanswered by you for a more extended time
• The problem was explained and handled in another ticket

You can reopen this ticket at any time!

Please do not open related tickets twice. Always answer/ask in the original issue with the same problem.

Your datarhei team
//Sven

[HeliosLHC]

Hello, I'm still experiencing this issue in 2.3.

The UI loads fine now after the changes but the API endpoint (after looking through the source code) is still statically pointing to the root path.

The code currently constructs the API endpoint URL from the host domain for the current page only. This means if a subpath is used, the API URL will not be correctly constructed.

As the web-ui is statically generated (and a dynamic generation adds way too much overhead), one potential solution is to add a new configuration value that contains the subpath string that the server can pass as a cookie to the browser when serving the static files.

The JS code can then be modified to parse the cookie data for the subpath value to appropriately construct the API URL.