Blank Dark Screen for TrueNAS UI Behind Nginx Reverse Proxy

[HarryMuscle]

I have TrueNAS Scale setup behind a Nginx reverse proxy using the following simple location configuration:

Code:

location /truenas/ {
  proxy_pass https://192.168.1.111:8443/;
}

Unfortunately all I get is a dark gray empty screen. It seems to initiate some communication with the TrueNAS UI cause it add the "ui" portion to the URL path and the background color matches the TrueNAS UI color, however, it doesn't show the login screen. I'm guessing this is probably related to a wrong location in a header or maybe I'm just missing a Nginx directive to make this work. I'm assuming I'm not the first person to place TrueNAS behind a Nginx reverse proxy so I'm hoping others can maybe share their configuration that actually works.

Thanks,
Harry

 

[HarryMuscle]

I figured out the root cause of the issue, however, I'm not sure how to fix it. TrueNAS doesn't use relative URLs for things, so adding /truenas/ in the URL via the reverse proxy causes TrueNAS to not find most of the assets it needs since it's still looking for them as if /truenas/ wasn't in the URL. Most of the other applications I've come across either use relative paths (ie: ./path/to/file instead of /path/to/file) or have a setting somewhere for changing the base URL. Unfortunately I haven't found this setting in TrueNAS and it seems to use absolute paths.

Thanks,
Harry

 

[Kris Moore]

Yes this is correct. TrueNAS UI expects to use absolute paths right now. I've asked our team to look I to allowing relative paths, but it probably won't be until the next major SCALE release at the soonest.

 

[newbacai]

Yes this is correct. TrueNAS UI expects to use absolute paths right now. I've asked our team to look I to allowing relative paths, but it probably won't be until the next major SCALE release at the soonest.

I have the same configuration and the same issue, but I think the reason maybe different.
I found these errors with devlopment tools on chrome:

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
Refused to apply style from 'https://xxx.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
Refused to execute script from 'https://xxx.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
And so on...

Obviously this is related to content type, the browser incorrectly parses css, js and other files as mime type.
But I don't know how to fix it because I didn't add the "add_header X-Content-Type-Options "nosniff";" in nginx.conf. So I'm wondering if the content type is not declared in the front-end code of TrueNAS?

Thanks!