Embed frontend/dist in application

[jakobsack]

Hi there,

I'm writing a small application with Loco 0.14 backend and React frontend. So far the experience was pleasantly smooth and reminded me a lot of my Rails days 👍
However, on your homepage you claim that only the binary and a config folder is needed to deploy the app. In my experience this does not work, the frontend/dist needs to be next to be in the CWD. But what if I could embed the assets in the build? Well, turns out that this is easily doable. All it needs are those three commands

cargo add mime_guess
cargo add rust-embed --features debug-embed
cargo loco generate controller --api frontend

Then set the edit src/controllers/frontend.rs:

#![allow(clippy::missing_errors_doc)]
#![allow(clippy::unnecessary_struct_initialization)]
#![allow(clippy::unused_async)]
use axum::{
    debug_handler,
    http::{header, StatusCode, Uri},
    response::Html,
};
use loco_rs::prelude::*;
use rust_embed::Embed;

static INDEX_HTML: &str = "index.html";

#[debug_handler]
async fn static_handler(State(_ctx): State<AppContext>, uri: Uri) -> impl IntoResponse {
    let path = uri.path().trim_start_matches('/');

    if path.is_empty() || path == INDEX_HTML {
        return index_html().await;
    }

    match Assets::get(path) {
        Some(content) => {
            let mime = mime_guess::from_path(path).first_or_octet_stream();

            ([(header::CONTENT_TYPE, mime.as_ref())], content.data).into_response()
        }
        None => {
            if path.contains('.') {
                return not_found().await;
            }

            index_html().await
        }
    }
}

async fn index_html() -> Response {
    match Assets::get(INDEX_HTML) {
        Some(content) => Html(content.data).into_response(),
        None => not_found().await,
    }
}

async fn not_found() -> Response {
    (StatusCode::NOT_FOUND, "404").into_response()
}

pub fn routes() -> Routes {
    Routes::new()
        .add("/", get(static_handler))
        .add("{*file}", get(static_handler))
}

#[derive(Embed)]
#[folder = "frontend/dist/"]
struct Assets;

Disable serving of static assets in the config, start the app, and it just works.
A lot of the code is inspired by the rust-embed axum SPA example.

I'm pretty sure that it's possible to improve the code, maybe it even is possible to make this a middleware with a proper check if npm run build has been executed before. But so far I am happy with the solution and will go with it until something better ships with Loco or I'll use nginx again to serve the assets (more performant, but more files to copy).

Take care!

Disclaimer: This code works but for sure is not the best possible implementation. Also, I do not consider myself an experienced Rust developer.

[kaplanelad]

Hey @jakobsack,

Dotan and I discussed this feature a lot when we started the project.

We explored ways to hide the overhead configuration from the user and make it work without any additional setup—ideally, just through a feature flag.

Could you open an issue for adding this feature? We’ll explore the best way to implement it—and of course, you’re welcome to join us!

[jakobsack]

Thank you @kaplanelad , I created #1291 . I doubt that I'll find the capacity to implement the change myself. In case I do find the time I'll comment on the issue.