Full-stack with Leptos & Dioxus

[dependencies]
axum = "0.8.9"
leptos = { version = "0.8.22", features = ["ssr"] }   # "hydrate" in the WebAssembly build
leptos_axum = "0.8.10"
leptos_router = { version = "0.8", features = ["ssr"] }
tokio = { version = "1.53", features = ["full"] }

use axum::Router;
use leptos::prelude::*;
use leptos_axum::{LeptosRoutes, generate_route_list};
use leptos_router::{
    components::{Route, Router as LeptosRouter, Routes},
    path,
};

/// Runs on the server; the client calls it over HTTP (POST /api/count_books...).
#[server]
pub async fn count_books(prefix: String) -> Result<usize, ServerFnError> {
    let books = ["Dune", "Dune Messiah", "Kindred"];
    Ok(books.iter().filter(|b| b.starts_with(&prefix)).count())
}

#[component]
fn Catalogue() -> impl IntoView {
    let count = Resource::new(|| (), |_| count_books("Dune".to_owned()));
    view! {
        <h1>"Catalogue"</h1>
        <Suspense fallback=|| view! { <p>"Loading..."</p> }>
            {move || count.get().map(|n| view! { <p>{format!("{} books start with Dune", n.unwrap_or(0))}</p> })}
        </Suspense>
    }
}

#[component]
fn App() -> impl IntoView {
    view! {
        <LeptosRouter>
            <Routes fallback=|| "Not found.">
                <Route path=path!("/") view=Catalogue />
            </Routes>
        </LeptosRouter>
    }
}

fn shell(options: LeptosOptions) -> impl IntoView {
    view! {
        <!DOCTYPE html>
        <html lang="en">
            <head>
                <meta charset="utf-8" />
                <HydrationScripts options />
            </head>
            <body>
                <App />
            </body>
        </html>
    }
}

#[tokio::main]
async fn main() {
    let options = LeptosOptions::builder().output_name("bookshelf").site_addr(([127, 0, 0, 1], 3000)).build();
    let routes = generate_route_list(App);
    let app = Router::new()
        .leptos_routes(&options, routes, {
            let options = options.clone();
            move || shell(options.clone())
        })
        .with_state(options.clone());
    let listener = tokio::net::TcpListener::bind(options.site_addr).await.unwrap();
    axum::serve(listener, app).await.unwrap();
}

$ curl -s localhost:3000/ | grep -o '<h1>.*</p>'
<h1>Catalogue</h1><!--s-1-o--><p>Loading...</p><!--s-1-c--></body></html><template id="1-f"><p>2 books start with Dune</p>

[dependencies]
dioxus = { version = "0.7.10", features = ["fullstack"] }

[features]
server = ["dioxus/server"]   # the native server build
web = ["dioxus/web"]         # the WebAssembly client build

use dioxus::prelude::*;

/// A server function exposed as GET /api/books/count: compiled into the server, called over HTTP by the client.
#[get("/api/books/count")]
async fn count_books() -> Result<usize> {
    Ok(3)
}

fn app() -> Element {
    let count = use_server_future(count_books)?;
    rsx! {
        h1 { "Catalogue" }
        match count() {
            Some(Ok(n)) => rsx! { p { "{n} books" } },
            Some(Err(e)) => rsx! { p { "error: {e}" } },
            None => rsx! { p { "Loading..." } },
        }
    }
}

fn main() {
    #[cfg(not(feature = "server"))]
    dioxus::launch(app);

    // Server build: mount the Dioxus app (SSR + server functions) inside a regular axum Router.
    #[cfg(feature = "server")]
    dioxus::serve(|| async move {
        let router = dioxus::server::router(app).route("/health", dioxus::server::axum::routing::get(|| async { "ok" }));
        Ok(router)
    });
}

$ curl -s localhost:8080/api/books/count
3
$ curl -s localhost:8080/health
ok

[dependencies]
axum = { version = "0.8.9", default-features = false, features = ["json"] } # no "tokio": no axum::serve
futures-executor = "0.3"
tower-service = "0.3"

use axum::{Router, body::Body, extract::Path, http::Request, routing::get};
use tower_service::Service;

/// The same Router, compiled to WebAssembly without tokio's networking: requests come from JavaScript
/// (a service worker, an edge runtime), not from a socket.
pub fn app() -> Router {
    Router::new().route("/books/{isbn}", get(|Path(isbn): Path<String>| async move { format!("book {isbn}") }))
}

pub fn handle(uri: &str) -> String {
    let mut router = app();
    let request = Request::get(uri).body(Body::empty()).expect("valid request");
    let response = futures_executor::block_on(router.call(request)).expect("Router is infallible");
    response.status().to_string()
}