Blank page when using nginx reverse proxy with a path for self host

[nulshell]

Describe the bug

Hi CorentinTh, thanks for the great work. I tried to self host it on my vps with the docker method. For https access I tried to use nginx reverse proxy and a path, for example, "www.example.com/enclosed" directing to 127.0.0.1:8787, as I had a www.example.com page on the "/" path already. And they can share the same ssl keys.

Added part in nginx.conf:
...
location /enclosed {
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_redirect off;
proxy_pass http://127.0.0.1:8787; # Enclosed
}
...

Then for the docker, I ran
sudo docker run -d --name enclosed --restart unless-stopped -p 8787:8787 -v /home/apps/enclosed:/app/.data --user $(id -u):$(id -g) -e PUBLIC_BASE_API_URL="https://www.example.com/enclosed" corentinth/enclosed:latest-rootless

When visiting www.example.com/enclosed, it shows a blank page. How to make it right? Thanks.

What happened?

When visiting www.example.com/enclosed, it only shows a blank page.

System information

The self host docker is running on an ARM vps running debian 12, with nginx/1.27.3 to use with Xray 1.8.24. DNS translation for "www.example.com" is on cloudflare, with proxy check on.
Firefox and chrome was tried on a local win10 pc to visit the website.

Where did you encounter the bug?

A self hosted instance

[CorentinTh]

Hi @nulshell,

Thank you for the details. Could you please check if there are any errors in the browser console when you visit the blank page example.com/enclosed?
This might help us identify the issue.

Or even better, a minimal reproductible example?

[nulshell]

Hi CorentinTh,

The following is the output of Errors and Warning in firefox console:

Loading module from “https://www.example.com/assets/index-DNNykJ_W.js” was blocked because of a disallowed MIME type (“text/html”).             enclosed
The resource from “https://www.example.com/assets/index-CB3Tw6tl.css” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).             enclosed
Loading failed for the module with source “https://www.example.com/assets/index-DNNykJ_W.js”.             enclosed:56:71
GET https://www.example.com/favicon-32x32.png             [HTTP/2 404  16ms]

In chrome console:
'''
Refused to apply style from 'https://www.example.com/assets/index-CB3Tw6tl.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
index-DNNykJ_W.js:1 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.
site.webmanifest:1 Manifest: Line: 1, column: 1, Syntax error.
'''

I also tried the following command:

sudo docker run -d --name enclosed --restart unless-stopped -p 8787:8787 -v /home/apps/enclosed:/app/.data --user $(id -u):$(id -g) -e SERVER_CORS_ORIGINS="https://www.example.com/enclosed" -e PUBLIC_BASE_API_URL="https://www.example.com/enclosed" corentinth/enclosed:latest-rootless

Same messages appeared in the console, and same blank page in the browser window.

Thanks.

[nulshell]

Hi CorentinTh,

I assigned a new sub domain and added a server in nginx instead of the path method, and it’s working fine now. So you don’t have to make it work with path if you don’t have time. Thanks, :-)

Best,

[NishantJoshi00]

Hey @CorentinTh ,
I am facing a similar issue here, reverse proxy with a custom subpath, the assets and other things revert to the core base url instead of including the subpath.

Any idea why this might be happening?

[NishantJoshi00]

I went though the code, I was able to deduce the following:

• in the index.html if we remove the / prefix in the href. some of the errors disappear.
• after digging a bit, vite.config seems to have a base parameter that we can pass with the subpath.

I tried hardcoding it and it kinda worked, but vite doesn't do suffix replace so was the perfect fix, on top of that we cannot mention process environment variable in the vite config as they won't be present at the time of packing.

😰 I am not a FE dev, so don't have much clue on how vite works. Lemme know if there is a fix for this, this was fun.

[wakille]

Hey @CorentinTh,
First of all, thank you for you great work, I really like enclosed.

With using the new PUBLIC_VIEW_NOTE_PATH_PREFIX feature from #418, I have also the issue that only a blank page is displayed using nginx and only allowing access to the configured subpath.

[CorentinTh]

Thanks @wakille 🙏

It's a tricky subject, I haven't taken the time to dig this, but a good candidate may be using vite relative url config
I'll try to take a closer look this weekend