GitHub page with LeptOS CSR TailwindCSS example doesn't work

[jmarcelomb]

I copied the example from here and followed the book tutorial in how to deploy into the GitHub pages.
When I run it locally with trunk serve --open, everything works as expected:

However, when I try to deploy into the GitHub page, it doesn't work, this is the page link.
This is the console output:

I tried to add some more metadata that I found here.
This is my repo link.
If I don't use tailwind I'm able to have a page that isn't all white.
Can someone help me with that?
Thank you all!

[gbj]

This is rendering your app correctly, but failing to match a route. This is because the path of the URL is /portfolio, which is not a route in your app. You should be able to use the base prop on the <Router/> component (and/or <Routes/>, I can't remember exactly!) to tell the router that your base path is not /.

[gbj]

As a sanity check, if you add a fallback prop to Router like fallback=|| view! { <p>Page not found!</p> } you should see that this is rendered correctly.

[jmarcelomb]

Thank you!! This worked, I added base="portfolio" (<Router base="portfolio">) to the Router and it worked!

This should be a very noob question, I'm sorry, and thank you for your time.

[ydirson]

I have similar problem but just adding base does not change the result. It could be useful to let the fallback accept the effective route tried.

After some digging I realized that the suggestion above indeed only works by prepending the base to the routes too. So instead of matching the / route in the above example I have to match /portfolio instead, and then it works.

That seems to mean that we have to use that prefix string twice (nested routing seems to make it possible to use it not more than twice), but hey once the code knows that prefix it's not a big deal to use it more than once.

But I'm using trunk --public-url?"./" with the goal of producing a "portable" app, one that can be hosted under any path of a server without a need for recompilation-with-a-parameter. And until I started to use the router it did indeed work. We can surely find a solution that does not need any hardcoding?

For example there must be a way for a wasm program to know where it was loaded from, like std::env::current_exe (or C's argv[0]), that could be used as a "transparent base" - but being still new at rust-wasm I'm not sure where to dig for such a thing, and was not able to locate that using search engines alone. Any idea?

[gbj]

I don't have a good answer for you — std::env::current_exe and argv[0] are both runtime solutions, of course. Does the <base> element have an effect on this? Probably not w.r.t. the router. A PR with a proposed solution or an issue to discuss would be welcome. It's too easy for things to get lost in discussions.

This is not a feature I have ever used or am likely to use, so I'm very open to feedback on good APIs for it going forward.

[gbj]

Oh I forgot: if it's possible to inject it as a global JavaScript variable like in a script tag, you can also bind to it with wasm-bindgen and then use it in your WASM app.