0

I'm attempting to build a SPA using Yew, and have followed this example. When I select links, the URL changes and the page renders correctly. (Yay!) But if I enter the URL, it returns 404. So for example, if I select the link for "History," the browser renders the FerrySpotList component and the indicated URL changes to "https://example.com/history". But if I enter "https://example.com/history" in the address bar and hit "enter," it returns the nginx 404. Interestingly, it won't even give me the custom 404 error that I've written -- going to "https://example.com/404" should give me the NotFound route, but instead just goes to the nginx 404 page.

Here's my minimal reproducible example; I've pulled out the code for the various components in the name of brevity. It's pretty much just a copy-paste from the example in the docs, and it half-works, so I'm baffled as to why it doesn't all-work.

Update: The real issue, as identified almost immediately by Cerberus, is that I'm serving the wasm with nginx, not trunk. Trunk doesn't offer any way to serve https, so I'm just exporting the compiled wasm to nginx to serve. The code is fine, it's the deployment that's wrong.

What's the right way to deploy Yew in production? The solution that comes to mind is to just use nginx as a reverse proxy for a trunk server. Am I way off base there?

#[derive(Clone, Routable, PartialEq, Debug, Copy)]
enum Route {
    #[at("/")]
    Home,
    #[at("/history")]
    History,
    #[at("/blog")]
    Blog,
    #[at("/post/:id")]
    PostID { id: u8 },
    #[not_found]
    #[at("/404")]
    NotFound,
}

fn main() {
   wasm_logger::init(wasm_logger::Config::default());
   yew::Renderer::<Main>::new().render();
}

#[function_component]
fn Main() -> Html {
    html! {
        <BrowserRouter>
            <Switch<Route> render={switch} />
        </BrowserRouter>
    }
}

fn switch(routes: Route) -> Html {
    match routes {
        Route::Home => html! { <FerryRouteComp /> },
        Route::History => html! { <FerrySpotList /> },
        Route::Blog => html! { <div>{"Blog Coming Soon"}</div>},
        Route::NotFound => html! {<p>{"Ooh.  I actually don't know where that page went.  Maybe start at <a href='https://ferrywizard.com'>home</a> and try again?"}</p>},
        Route::PostID { id } => html! {<p>{format!("Looking at ID #: {}", id)}</p>},
    }
}
djmcmath
  • 97
  • 5
  • How do you serve the app? 404 error is returned by the server, Yew doesn't even run yet at that moment. – Cerberus Dec 20 '22 at 15:32
  • I'm serving with nginx, and am getting the nginx 404 for any URL other than "/". What do you mean "Yew doesn't even run yet at the moment?" – djmcmath Dec 20 '22 at 16:02
  • Well, when you request `http://your.domain/`, Nginx presumably gives you your code, with Yew inside. But when you request `http://your.domain/some.path`, Nginx doesn't know what to return, so your code doesn't come to the browser and, obviously, doesn't run. – Cerberus Dec 20 '22 at 16:08
  • Huh. Ok. Oh. Bummer. So I retested this serving with trunk, and it works as expected. I guess the real question has nothing to do with the code, but with how to serve a frontend built with Yew such that it passes those URLs through to the router. – djmcmath Dec 20 '22 at 16:53
  • Ok, I've set it up with nginx just acting as a reverse proxy to get to the trunk-served front end. Works great now, I guess. :) – djmcmath Dec 20 '22 at 21:09

1 Answers1

2

Ok, so the correct answer has nothing to do with my above-listed Router code, which is fine. Nor is the correct answer to use NginX as a proxy to a Trunk server (which I described above, and which works, but seems to be a suboptimal solution).

The correct answer starts with the Yew docs. The key sentence is "If the application uses the Yew router, you must configure the server to return the index.html when asked for a file that it does not have."

In plain English, for people like me who are just learning all of this, that means that: as a last resort, before your server delivers a 404, it should try "/index.html". So whichever server you're using, find the line where it says "Try this, then that, then give up and send the user to 404," and edit that one line.

Here's the relevant tidbit from my nginx.conf:

location / {
    root /var/www/html;
    index index.html index.htm;
    try_files $uri $uri/ /index.html =404;
}

Really, the only change I needed to make was to add "/index.html" to the appropriate line in my nginx.conf file. BTW, that leading "/" is important. If you enter, say, "example.com/blog", it'll try "example.com/blog/index.html," which doesn't exist. You need to send it to "example.com/index.html" when it can't find "/blog", which routes it appropriately to the index.html, which loads the Router, which redirects to the blog page. Phew!

Hope this saves someone else some time figuring out how to deliver a single page app. :)

djmcmath
  • 97
  • 5