Need a deployment guide

[jarlub-senlogic]

While Leptos /ssr is awesome, there really needs to be a way to deploy it. Where do I find how to deploy it on one of the most standard of setups, my own server and Apache (and I guess reverse proxy, which is what I'm trying). I've been at it for 3 days now. Always something that fails. I knew this was somewhat difficult when I tried to get it work some month ago but (and most worked then) but I did not anticipate that I would fail for 3 days when trying to do that again.

Is it documented anywhere how to deploy in under a /myapp path?

[gbj]

Generally speaking what you need is to set the base prop on the Router component, in order to give it a different base URL.

Depending on the specifics of your setup, you may actually need to set this to "" on the server and "/myapp" on the client, or it may be "/myapp" on both -- just depending on where the server thinks it is. (i.e., if /myapp routes to an Axum server that thinks /myapp is /, then you'll need the base to be "" on the server, which is the default; but it needs to be /myapp on the client)

Feel free to share specific information about specific problems you're facing.

[gbj]

Oh, I meant to include links to related discussions:

#4456
#4302

[jarlub-senlogic]

I think I am trying to do what was described in one of the links, but I'm not 100% sure. My reverse proxy setting is:

    ProxyPass        /finder-app/ http://127.0.0.1:8089/
    ProxyPassReverse /finder-app/ http://127.0.0.1:8089/

I'm serving it under another port because I had problems with 3000 (something related to wasm32 and secure ports or something). Sorry for being vague, but much of this web stuff is above my head. My environment variables LEPTOS_... reflect this.

Using curl, I see that my app is accessed and serves the page title, and then it's a 404.

I've set <Router base="/finder-app/">, and using set_server_url makes no difference (perhaps I haven't come to the point where that is or isn't needed).

What I do see in page-source is that I'm trying to fetch href="[/pkg./....] this is probably wrong. I should probably be trying to get /finder-app/pkg (no ?).

So my first question is, how do I make the client to use the right prefix? I had hoped set_server_url would do that.
I should maybe add that I am using set_server_url from inside:

let _ = Effect::new(|_| {
set_server_url("https://..../finder-app);
});

Not sure if that is actually correct.

---- update ------

Setting LEPTOS_SITE_PKG_DIR, and the hardcoded path to the stylesheet, I got 200 on .js, .css and .wasm files It got to calling server functions, but here it has the wrong path (again), something I thought would be solved by setting the server_fn_prefix option, but that didn't have any effect. Still calling /api instead of /finder-app/api (which I had hoped it would do).

---- and another update ----
So the server function path was fixed with set_server_url, I believe. It's been so many changes, so now there is one strange error left, a 404 on the new root finder-app/. The first element in the list of items in the network tab, all else below, is 200.

Day 4 or deploy attempts over.

---- I suck at giving up ----
What finally did it was to give different base to the server and the client:

    <Router
        base={
            #[cfg(feature = "hydrate")]
            { "/finder-app" }

            #[cfg(not(feature = "hydrate"))]
            { "" }
        }
    >
        <main>
            <Routes fallback=|| "Page not found.".into_view()>
                <Route path=StaticSegment("") view=HomePage/>
            </Routes>
        </main>
    </Router>

I'd be happy if someone tells me this is the -wrong- solution but I have to take it for now.

[gbj]

/pkg is coming from loading the JS and WASM files. This is loaded by the HydrationScripts component. This has its own root prop that you can set to whatever the base should be.

It's a bit hard to follow the rest of what you've written.

What finally did it was to give different base to the server and the client:

I can confirm this is probably a good idea -- see what I wrote in my other comment above.

If you think it would be helpful, I would suggest you could write up some of the steps you've found to share as part of the docs. I don't typically use a setup with a reverse proxy mounting an application at a path like this (rather than just mounting it at / of a domain), so I don't even have a good sense of a test setup. But if you put together an example setup and some suggested steps I'd be happy to write it up for the docs.

[jarlub-senlogic]

"I can confirm this is probably a good idea -- see what I wrote in my other comment above."

All I can say is, OMG. I know I read it when I was messing with this, but since the technicalities behind this stuff is so beyond what I know, I had no way to put what you wrote in context until I had come to the final problem, that everything loaded correctly while the main path still returned 404, by which I had forgotten what you wrote. When I now go back, it's spot on.

[jarlub-senlogic]

So, I will try to summarize my solution, now that I know it works.

--- Apache Config ---
# App HTML (with prefix)
ProxyPass /subpath/ http://127.0.0.1:8089/ # Not sure if the port matters
ProxyPassReverse /subpath/ http://127.0.0.1:8089/ # possibly a bad conclusion from some round of testing.
ProxyPreserveHost On # Don't remember why this one, but I belie it didn't work without it.
RedirectMatch 301 ^/finder-app$ /finder-app/ # make sure the address ends with / otherwise 404
AddType application/wasm .wasm

--------- in fn App() -> impl IntoView --------------------

     <Stylesheet id="leptos" href="/subpath/pkg/server.css"/>


    <Router
        base={
            #[cfg(feature = "hydrate")]
            { "/subpath" }

            #[cfg(not(feature = "hydrate"))]
            { "" }
        }
    >
        <main>
            <Routes fallback=|| "Page not found.".into_view()>
                <Route path=StaticSegment("") view=HomePage/>
            </Routes>
        </main>
    </Router>

let _ = Effect::new(|_| {
    #[cfg(feature = "hydrate")]
    if let Some(win) = window() {
        if let Ok(origin) = win.location().origin() {
            let mut org = origin;
            org.push_str("/subpath");
            set_server_url(String::leak(org)); // could have used a static string, but wanted to be able to move the program
                                                                       // to another domain.
        }
    }
});

Think this is it.

[gbj]

Thanks! I've added a chapter to the book here, which should help others doing the same thing in the future.