dioxus-mirror/packages/fullstack

Dioxus Fullstack

Website | Guides | API Docs | Chat

Fullstack utilities for the Dioxus framework.

Features

• Intigrations with the Axum, Salvo, and Warp server frameworks with utilities for serving and rendering Dioxus applications.
• Server functions allow you to call code on the server from the client as if it were a normal function.
• Instant RSX Hot reloading with dioxus-hot-reload.
• Passing root props from the server to the client.

Example

Full stack Dioxus in under 50 lines of code

#![allow(non_snake_case)]
use dioxus::prelude::*;
use dioxus_fullstack::prelude::*;

fn main() {
    #[cfg(feature = "web")]
    dioxus_web::launch_with_props(
        app,
        get_root_props_from_document().unwrap_or_default(),
        dioxus_web::Config::new().hydrate(true),
    );
    #[cfg(feature = "ssr")]
    {
        GetMeaning::register().unwrap();
        tokio::runtime::Runtime::new()
            .unwrap()
            .block_on(async move {
                warp::serve(
                    // Automatically handles server side rendering, hot reloading intigration, and hosting server functions
                    serve_dioxus_application(
                        "",
                        ServeConfigBuilder::new(app, ()),
                    )
                )
                .run(([127, 0, 0, 1], 8080))
                .await;
            });
    }
}

fn app(cx: Scope) -> Element {
    let meaning = use_state(cx, || None);
    cx.render(rsx! {
        button {
            onclick: move |_| {
                to_owned![meaning];
                async move {
                    if let Ok(data) = get_meaning("life the universe and everything".into()).await {
                        meaning.set(data);
                    }
                }
            },
            "Run a server function"
        }
        "Server said: {meaning:?}"
    })
}

// This code will only run on the server
#[server(GetMeaning)]
async fn get_meaning(of: String) -> Result<Option<u32>, ServerFnError> {
    Ok(of.contains("life").then(|| 42))
}

Getting Started

To get started with full stack Dioxus, check out our getting started guide, or the full stack examples.

Contributing

• Report issues on our issue tracker.
• Join the discord and ask questions!

License

This project is licensed under the MIT license.

Unless you explicitly state otherwise, any contribution intentionally submitted for inclusion in Dioxus by you shall be licensed as MIT without any additional terms or conditions.