How to host SPA files and embed files too in executable?

[frederikhors]

I'm having hard time understanding how to host (and embed) SPA (single page application) files with rust-embed and axum.

To host SPA files with axum I'm using a single line of code (from here):

app.fallback(get_service(ServeDir::new("./app/static")).handle_error(error_handler))

It works because all files are correctly downloaded. But:

FIRST PROBLEM

What is missing for a properly SPA handling is the redirect on the index.html if for example the user reloads the page on a SPA nested route.

Example: I'm on the page: /home/customers which is not a file nor a dir but just a fake javascript route and if I reload the page axum gives me 404 (Not found).

SECOND PROBLEM

I need to embed those files in my final executable. In Golang this is "native" using embed: directive.

I saw that in Rust this is well done with rust-embed but I cannot complete my task for SPA.

I opened pyrossh/rust-embed#183 for rust-embed side but I think you people can help me understand immediately what the problem is and I can PR another example (very much useful) for future people to come! 😄

The need is that every path typed by the user (and that is not an existent file such as .js or .css which obviously must be downloaded by the browser) leads to the "index.html" file in the root of my static dir.

If I use the example axum code I can see the route:

.route("/dist/*file", static_handler.into_service())

which has /dist/*file and I don't need that /dist because the index.html calls many files with custom paths, such as /_works, menu, images.

If I remove the dist part I get this error:

thread 'main' panicked at 'Invalid route: insertion failed due to conflict with previously registered route: /index.html'

Can you help me understand how to properly accomplish this task?

Thanks.

[davidpdrsn]

I don't have any experience running SPAs using rust-embed so I cannot offer much help. Does rust-embed's axum example help?

However ServeDir requires the files to be on disk. You cannot tell it to load files embedded directly in the binary.

[frederikhors]

Thanks @davidpdrsn, but I think you have read the question superficially (and I understand this given the amount of things you have to do and thank goodness since you are building axum 😄).

My question has two problems, the first is indeed with ServeDir and the other is with rust-embed.

Even also solving the first could help me figure out how to solve the second.

[davidpdrsn]

re the first question: If you're doing

app.fallback(get_service(ServeDir::new("./app/static")).handle_error(error_handler))

and then request /home/customers that will hit the fallback but then ServeDir will look for a file at /home/customers which it probably wont find.

I imagine you want to use a ServeFile as the fallback instead, to always serve the same file regardless of the uri. Or perhaps use https://docs.rs/tower-http/latest/tower_http/services/struct.ServeDir.html#method.fallback

[frederikhors]

I opened #1317 for rust-embed integration.

I still don't know how to do the same with ServeDir (I mean for single page application needs).

[davidpdrsn]

We have an example on using ServeDir https://github.com/tokio-rs/axum/blob/main/examples/static-file-server/src/main.rs

[frederikhors]

Yeah. This example doesn't work for SPAs. And for me it's difficult to understand how to fix.

[davidpdrsn]

Try and spend some more time on it and read the docs for ServeDir carefully. And if you have any specific questions then I'm happy to help.

[Herlix]

Hey!

I saw this duscussion and thought I'd add how I set up my app. This is ofc not perfect but for a simple demo and for my small usecase it might work out just fine :) I cached the index.html in a HTML using static_init for performance.

In case we could not find the file, return the index.html insead.

...
 let app = Router::new().nest("/api", api).fallback(get_asset);
...

async fn get_asset(uri: Uri) -> Result<Response<BoxBody>, (StatusCode, String)> {
    if uri.path().starts_with("/api") {
        return Err((StatusCode::NOT_FOUND, "Not Found".to_string()));
    }

    if uri.path() == "/" {
        let response = Response::builder()
            .status(StatusCode::OK)
            .header("content-type", "text/html")
            .body(Body::from(HTML.clone()))
            .unwrap();
        return Ok(response.into_response());
    }

    let req = Request::builder().uri(uri).body(Body::empty()).unwrap();
    match ServeDir::new("public").oneshot(req).await {
        Ok(res) => {
            if res.status() != StatusCode::OK {
                Ok(Response::builder()
                    .status(StatusCode::OK)
                    .header("content-type", "text/html")
                    .body(Body::from(HTML.clone()))
                    .unwrap()
                    .map(boxed))
            } else {
                Ok(res.map(boxed))
            }
        }
        Err(_err) => Ok(Response::builder()
            .status(StatusCode::OK)
            .header("content-type", "text/html")
            .body(Body::from(HTML.clone()))
            .unwrap()
            .map(boxed)),
    }
}