Serve React app that has client-side routing with ServeDir

[kyoheiu]

Summary

axum = { version = "0.7.2", features = ["macros"] }
tower-http = { version = "0.5.0", features = ["cors", "fs"] }

I'm serving static-built React app (with react-router) by this code:

    let static_dir = ServeDir::new("static");
    let app = Router::new()
        .route("/health", get(check_health))
        .route("/api/items", get(read_partial).post(create_item))
        .route("/api/items_all", get(read_all))
        .route(
            "/api/items/:file_name",
            get(read_item).post(save_item).delete(delete_item),
        )
        .route("/api/rename", post(rename_item))
        .route("/api/search", post(search_item))
        .nest_service("/", static_dir.clone())
        .nest_service("/items/:file_name", static_dir.clone())
        .nest_service("/search", static_dir)
        .layer(CorsLayer::permissive());

Axum has some api routes, and for /, /items/:file_name and /search, static files are served.
This works perfectly, except that there are some .clone() and looks not so efficient. This is because ServeDir does not accept path with the wild card(*).
And in this case, fallback does not work (even when navigating in the browser correctly I encountered 404).

Is there any way to solve this pattern elegantly?

axum version

0.7.2

[davidpdrsn]

See https://github.com/tokio-rs/axum/blob/main/examples/static-file-server/src/main.rs for lots of examples of using ServeDir.

[kulpae]

Unfortunately none of the examples fits well, but there is enough to get it working to answer the question:

use tower_http::services::{ServeDir, ServeFile};
...
let app = Router::new()
    .route(...)
    .fallback_service(ServeDir::new("assets/")
        .fallback(ServeFile::new("assets/index.html"))
    );
axum::serve(TcpListener::bind("127.0.0.1:8080").await.unwrap(), app).await.unwrap();

This will serve all the assets from the assets folder and fall back to index.html for everything else.

Fallback does not change any status, ServeDir::not_found_service does.
Here is an excerpt from tower-http ServeDir docs:

fallback: This service will be called if there is no file at the path of the request.
    The status code returned by the fallback will not be altered. Use
    [`ServeDir::not_found_service`] to set a fallback and always respond with `404 Not Found`.

axum = "0.7.5"
tower-http = { version = "0.5.2", features = ["fs"] }

[jplatte]

Is there a reason you wrote .nest_service("/", svc) instead of .fallback_service(svc)?

[kulpae]

Good question. I thought about it a bit and my initial reasoning does not make any sense. (Main message of my answer stays the same, though)
I want to attach my static page serving to "/", but this will cover all paths not handled by any service/handler anyway so fallback_service does it's job here nicely. Will try this out and return here if I find a reason against using it in this case. :)
Thanks! Axum is awesome!

[jplatte]

Reason I asked is because nesting at / might be removed in the future: #2659

So might be good to update your answer for it to stay valid for longer.