This guide assumes you read the Web 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 --features axum, ssr

Next, add all the Axum dependencies. This will be different if you're using a different Web Framework

cargo add tokio --features full
cargo add axum

Your dependencies should look roughly like this:

[dependencies]
axum = "*"
dioxus = { version = "*" }
dioxus-fullstack = { version = "*", features = ["axum", "ssr"] }
tokio = { version = "*", features = ["full"] }

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

{{#include ../../../examples/server_basic.rs}}

Now, run your app with cargo run and open http://localhost:8080 in your browser. You should see a server-side rendered page with a counter.

Hydration

Right now, the page is static. We can't interact with the buttons. To fix this, we can hydrate the page with dioxus-web.

First, modify your Cargo.toml to include two features, one for the server called ssr, and one for the client called web.

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

# Web dependancies
dioxus-web = { version = "*", features=["hydrate"], optional = true }

# Server dependancies
axum = { version = "0.6.12", optional = true }
tokio = { version = "1.27.0", features = ["full"], optional = true }

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

Next, we need to modify our main.rs to use either hydrate on the client or render on the server depending on the active features.

{{#include ../../../examples/hydration.rs}}

Now, build your client-side bundle with dioxus build --features web and run your server with cargo run --features ssr. You should see the same page as before, but now you can interact with the buttons!

Sycronizing props between the server and client

Let's make the initial count of the counter dynamic based on the current page.

Modifying the server

To do this, we must remove the serve_dioxus_application and replace it with a custom implementation of its four key functions:

Serve static WASM and JS files with serve_static_assets
Register server functions with register_server_fns (more information on server functions later)
Connect to the hot reload server with connect_hot_reload
A custom route that uses SSRState to server-side render the application

Modifying the client

The only thing we need to change on the client is the props. dioxus-fullstack will automatically serialize the props it uses to server render the app and send them to the client. In the client section of main.rs, we need to add get_root_props_from_document to deserialize the props before we hydrate the app.

{{#include ../../../examples/hydration_props.rs}}

Now, build your client-side bundle with dioxus build --features web and run your server with cargo run --features ssr. Navigate to http://localhost:8080/1 and you should see the counter start at 1. Navigate to http://localhost:8080/2 and you should see the counter start at 2.

getting_started.md 3.6 KB History Raw