Serving a SPA and APIs

[Stefan99353]

I am currently in the process of trying to switch from actix-web to axum. I have an Angular app that uses client-side routing.
I want to be able to type http://localhost/login in the browser, get the index.html file from the dist folder and angular can do its routing and display the login page.

I want to achieve the following:

• API at /api (e.g. /api/auth/login)
• SPA at /
  • / returns file ./dist/index.html
  • /main.js return file ./dist/main.js
  • /login returns file ./dist/index.html

I currently have it setup like this:

Router::new()
    .nest("/api", crate::api::api_router())
    .nest(
        "/dist",
        get_service(ServeDir::new("./dist"))
        .handle_error(|_: std::io::Error| async move {
            (StatusCode::INTERNAL_SERVER_ERROR, Json(json!({"error": "Internal Server Error"})))
        }),
    )
    .fallback(
        get_service(ServeFile::new("./dist/index.html"))
        .handle_error(|_: std::io::Error| async move {
            (StatusCode::INTERNAL_SERVER_ERROR, Json(json!({"error": "Internal Server Error"})))
        }),
    );

This does not really work, because when i enter http://localhost into the browser the URL changes to http:://localhost/dist. Requesting http://localhost/login works and gets me to my login page but the URL changes to http://localhost/dist/login and refreshing does not work because there is no file/folder called ./dist/login.

In actix-web I achieved that with the following code:

App::new()
    .service(crate::api::api_scope())
    .service(Files::new("/", "./dist").index_file("index.html"))
    .default_service(|r: ServiceRequest| futures::future::ok(spa_index(r)));

fn spa_index(service_request: ServiceRequest) -> ServiceResponse {
    let (req, _payload) = service_request.into_parts();
    let file_response = NamedFile::open("./dist/index.html").respond_to(&req);
    ServiceResponse::new(req, file_response.map_into_boxed_body())
}

Is it possible to achieve this using some kind of combination of fallback, nest and ServeDir?
If not, is there another way to make client side routing more "stable"?

[davidpdrsn]

Try this

let app = Router::new()
    .route("/api/auth", get(|| async { "API: /auth" }))
    .fallback(
        get_service(ServeDir::new("./dist")).handle_error(|_| async move {
            (StatusCode::INTERNAL_SERVER_ERROR, "internal server error")
        }),
    );

[Stefan99353]

Tried that and it indeed removes the dist in the path.
The problem now is that client side routing does not work 100%
For example if I have a client side route /settings and I directly enter http://localhost/settings I expect to get to the corresponding page.
This does not work because the server searches for ./dist/settings and that file/folder does not exist.

That /static was a copy paste mistake, fixed it.

[davidpdrsn]

But if you add route for /settings it should be found and not search for a static file. /settings is no different from /api/foo. Does that not work? If not can you share what your code looks like?

[davidpdrsn]

Do you mean you want /settings to send index.html?

[Stefan99353]

I want that every GET route that finds no match returns index.html so that Angular loads, sees that the route is /settings and displays the right component.

The actix-web 4 example again:

// Incoming GET for '/settings'

App::new()
    // '/settings' is not registered in the API Scope
    .service(crate::api::api_scope())
    // 'settings' is no file/folder in './dist'
    .service(Files::new("/", "./dist").index_file("index.html"))
    // serve './dist/index.html' because no other route matched
    .default_service(|r: ServiceRequest| futures::future::ok(spa_index(r)));

// This is not checking if request is a GET request
fn spa_index(service_request: ServiceRequest) -> ServiceResponse {
    let (req, _payload) = service_request.into_parts();
    let file_response = NamedFile::open("./dist/index.html").respond_to(&req);
    ServiceResponse::new(req, file_response.map_into_boxed_body())
}

So, yeah i want that /settings seinds index.html.
Thanks for the fast replies by the way. Great support!

[davidpdrsn]

You can do it by wrapping ServeDir in a middleware and sending a different response if it returns 404 like shown here.

However I've been thinking that this is something we could support directly in tower-http by combining ServeDir and ServeFile. Working on that here.

[ttys3]

@Stefan99353 you'll need fallback route to SPA index.html if you need work with SPA

I think, in axum, for the equal for actix .default_service(|r: ServiceRequest| futures::future::ok(spa_index(r))); is:

 // serve './dist/index.html' because no other route matched and make the SPA route work

.fallback(get(|_| async {
	Html(include_str!("./dist/index.html"))
}))

This is what we use in production, for now it works good.

We have API mounted under /api prefix, and we have static file mounted under /static, this is necessary for SPA.

And all other route is controlled by the frontend SPA.

This will make frontend route things like /settings works.

and I see you use /main.js for static file, this is bad. For asset files it is better to always put a prefix to distinguish with normal API and the frontend SPA route.

for the assets you can use:

 .nest(
            "/static",
            get_service(ServeDir::new("./dist")).handle_error(|error: std::io::Error| async move {
                (StatusCode::INTERNAL_SERVER_ERROR, format!("Unhandled internal error: {}", error))
            }),
        )

[tombh]

Thank you!

There's also axum_extra::routing::SpaRouter, but it looks like it's not going to be developed any more, preferring the tokio_http examples show here.

[davidpdrsn]

Not sure what you mean by that. SpaRouter will be developed if people discover bugs or have feature requests that we think makes sense.

[tombh]

Oh you're the person that said this!

I think we should leave SpaRouter as it is. tower-http's ServeDir recently got built in fallback support so you no longer need to write middleware to handle missing files and so building your own custom SPA routing is much easier.

I took that to mean that if SpaRouter doesn't fit your needs then it's better to drop down into tower-http than seek features on SpaRouter?

[davidpdrsn]

Generally yes, but depends on what you needs are. Please open an issue if you have a feature request!

[tombh]

Ok sure, thanks for the clarification, and thanks for all your work on axum!

[ericarthurc]

If anyone is look here with Axum v6+, here is what I have for my SPA, using SolidJS with client side routing

.nest_service(
    "/assets",
    get_service(ServeDir::new("./frontend/dist/assets")).handle_error(
        |error: std::io::Error| async move {
            (
                StatusCode::INTERNAL_SERVER_ERROR,
                format!("Unhandled internal error: {}", error),
            )
        },
    ),
)
.fallback_service(
    get_service(ServeFile::new("./frontend/dist/index.html")).handle_error(
        |_| async move { (StatusCode::INTERNAL_SERVER_ERROR, "internal server error") },
    ),
)

My solidjs code lives in a folder called frontend that is at top level of my rust project. So I am pointing the fallback to ./frontend/dist/index.html and then solidjs looks for /assets/ for all js, css, etc.. so then I am manually serving the assets folder that solidjs builds in the dist output. So this is purely vanilla based on how solidjs builds; no modifications to how vite v4 builds this. So should be easy to adjust this based on your needs.

If you're using client side routing than every HTTP request that comes through your backend needs to check your API routes first then hit a fallback that returns index.html on every other path so that the client side router can do what it needs to.