Issues with Serving App on reverse proxy Subfolder

[Modularius]

Hi everyone,

My app is deployed in a container and all traffic is through a reverse proxy. The proxy maps "http://myhost.com/subfolder" to my container's root level.

Essentially the app thinks it's running at the top level, but is actually running in a subfolder. This causes issues as the app needs to request certain resources but doesn't know it has to insert "subfolder" into the URLs. Note that the particular "subfolder" is not known at compile time, so needs to be set at runtime.

In particular this has led to the following issues:

• WASM/JS/CSS resources are requested from the wrong URL (I was able to fix this by passing the app the subfolder name through the CLI, a somewhat hacky solution but it works).
• Hydration mismatch using (I think this is because the client and server renderings disagree on the current URL, I had to abandon using).
• Calling server functions.

I was able to hack a fix for the first issue, and I can live without using if I need to but the server function issue seems intractable. I tried changing the SERVER_FN_PREFIX env var to /subfolder/api but I think this is only a compile time option, and I'm not sure it would be a solution anyway. (The proxy would map /subfolder/api to /api anyway, so the server wouldn't get the function calls if it's expecting them at /subfolder/api).

I've poured through the help files but they don't seem to help in my particular deployment needs. I'm hoping there is a more straightforward solution I haven't considered. Essentially I need to prepend my server function calls URL at runtime.

Please let me know if there is a solution, or if there's a repo with a similar setup I can learn from.

Many thanks.

[gbj]

For the hydration mismatch: I assume this is due to the router. The Router component has a base prop that you should be able to set to subfolder.

For server functions: Have you tried using set_server_url to set the full path of the server? For example if you call set_server_url("http://myhost.com/subfolder") it should call all server functions relative to that path, rather than to /. (If you need to build a String to get it at runtime you can use String::leak() to convert that into &'static str)

I have never used any of these in production so sorry for any inaccuracies. And let me know if you run into trouble using them.

[gbj]

Sidebar:

I had no idea you could convert a String to a static slice, even in safe rust!

Isn't this cool? It kind of makes sense once you think through what it means: if you have a String, you can always get a string slice from that because it's more or less just a string slice stored on the heap; you can always get &str from a String. If you leak it then you know that it will never be deallocated, meaning that it will always be in that same location on the heap. Which means that the lifetime of that &str is "for the rest of the life of the program," which is more or less what 'static means. The fact that string literals are &'static str is kind of a special case, then -- they exist in the same location for the entire life of the program, which means they're always valid for the rest of the life of the program, but leaked heap-allocated slices are also valid for the rest of the life of the program even though they aren't valid for the entire life of the program.

[Modularius]

I've tried server_path with both the full URL, the subfolder only, and with and without prefixing slashes. I'll put together a minimal example shortly.

[Modularius]

I've put together a minimal working (or not working) example here.
It runs an NGINX server in a container simulating my situation. Hopefully the readme is enough, but let me know if you have any trouble running it. It should show the hydration mismatch in your browser's dev console.

If I add base = "subfolder to <Router>, I get a page can’t be found error.

[gbj]

All that's missing from the example you shared the base prop on the Router.

It didn't work when you tried it because you are serving the Leptos app relative to / on the server and relative to /subfolder in the client. But you can set the base conditionally:

I tried this:

<Router base=if cfg!(feature = "hydrate") { "/subfolder" } else { "" }>

and that seemed to work correctly.

[Modularius]

Fantastic, that's fixed it. Thanks very much