I need to serve a folder created by vitejs.

I do

pub fn serve_dir() -> Router {
    let serve_dir = ServeDir::new("web/dist");

    Router::new()
        .route_service("/", get_service(serve_dir))
        .layer(TraceLayer::new_for_http())
}

but I get Loading module from “http://127.0.0.1:8080/assets/index-C6X3_kgM.js” was blocked because of a disallowed MIME type (“”)

If I use fallback_service it work as expected, but I can't use that because I merge 2 routes, an axum route (http) and a tonic route (grpc) and tonic get already a fallback_service and get Cannot merge two router's that both have a fallback.

So how to serve static folder without fallback ?

I need to serve a folder created by vitejs.

I do

pub fn serve_dir() -> Router {
    let serve_dir = ServeDir::new("web/dist");

    Router::new()
        .route_service("/", get_service(serve_dir))
        .layer(TraceLayer::new_for_http())
}

but I get Loading module from “http://127.0.0.1:8080/assets/index-C6X3_kgM.js” was blocked because of a disallowed MIME type (“”)

If I use fallback_service it work as expected, but I can't use that because I merge 2 routes, an axum route (http) and a tonic route (grpc) and tonic get already a fallback_service and get Cannot merge two router's that both have a fallback.

So how to serve static folder without fallback ?

• http
• rust
• grpc
• rust-axum
• rust-tonic

• Something like this: bloerg/posts/serve-static-content-with-axum ? – Jmb Commented Mar 25 at 13:03
• with that I get ` foo:12 GET 127.0.0.1:8080/assets/index-FMRJm5EB.js net::ERR_ABORTED 404 (Not Found)` – Vana Commented Mar 25 at 17:02

1 Answer 1

Cannot merge two router's that both have a fallback.

If we give a little thought as to why that is, two services running at the same endpoint doesn't really make sense, does it? How would the program know which one to serve? The design saves you here from headaches down the line.

If you want to run both services, at least the port would need to be different. This would mean that you need to have two separate listeners for each port. Both listeners would be accompanied by their respective routers. The HTTP server can have the vitejs webapp as the fallback service and the gRPC router can have it's processor. Then we can spawn separate tokio tasks for them and both services would be able to be queried:

#[tokio::main]
async fn main() {
    let t0 = tokio::task::spawn(async move { serve_grpc().await });
    let t1 = tokio::task::spawn(async move { serve_http().await });
    let _ = tokio::join!(t0, t1);
}

async fn serve_grpc() {
    let router = Router::new().fallback_service(get(|| async { "gRPC Processor" }));
    let listener = tokio::net::TcpListener::bind("127.0.0.1:5100")
        .await
        .unwrap();
    axum::serve(listener, router).await.unwrap();
}

async fn serve_http() {
    let serve_dir = ServeDir::new("web/dist");
    let listener = tokio::net::TcpListener::bind("127.0.0.1:8080")
        .await
        .unwrap();
    axum::serve(
        listener,
        Router::new()
            .fallback_service(serve_dir)
            .layer(CorsLayer::new().allow_origin(HeaderValue::from_static("self"))),
    )
    .await
    .unwrap();
}

PS: Running both services via the same binary is not advisable as the concerns should be segregated but that is beyond the scope of this question.