Fullstack

This guide assumes you read the Web getting started guide and installed the Dioxus-cli

Getting Started

Setup

For this guide, we're going to show how to use Dioxus with Axum, but dioxus-fullstack also integrates with the Warp and Salvo web frameworks.

Make sure you have Rust and Cargo installed, and then create a new project:

cargo new --bin demo
cd demo

Add dioxus and dioxus-fullstack as dependencies:

cargo add dioxus
cargo add dioxus-fullstack

Next, set up features for the server (ssr) and the client (web):

[features]
default = []
ssr = ["dioxus-fullstack/axum"]
web = ["dioxus-fullstack/web"]

Your dependencies should look roughly like this:

[dependencies]
dioxus = { version = "*" }
dioxus-fullstack = { version = "*" }

[features]
default = []
ssr = ["dioxus-fullstack/axum"]
web = ["dioxus-fullstack/web"]

Now, set up your Axum app to serve the Dioxus app.

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

fn main() {
    LaunchBuilder::new(app).launch();
}

fn app(cx: Scope) -> Element {
    let mut count = use_state(cx, || 0);

    cx.render(rsx! {
        h1 { "High-Five counter: {count}" }
        button { onclick: move |_| count += 1, "Up high!" }
        button { onclick: move |_| count -= 1, "Down low!" }
    })
}

Now, run your app with:

dx build --features web --release
cargo run --features ssr --release

Finally, open http://localhost:8080 in your browser. You should see a server-side rendered page with a counter.

Hot Reload

1. Hot reloading allows much faster iteration times inside of rsx calls by interpreting them and streaming the edits.
2. It is useful when changing the styling/layout of a program, but will not help with changing the logic of a program.

Usage

1. Run:

dx build --features web
dx serve --features ssr --hot-reload --platform desktop

1. Change some code within a rsx or render macro
2. Save and watch the style change without recompiling

Limitations

1. The interpreter can only use expressions that existed on the last full recompile. If you introduce a new variable or expression to the rsx call, it will require a full recompile to capture the expression.
2. Components, Iterators, and some attributes can contain arbitrary rust code and will trigger a full recompile when changed.