add an example illistrating intigration with the router

packages/server/examples/axum-hello-world/Cargo.toml

@@ -8,13 +8,12 @@ edition = "2021"
 [dependencies]
 dioxus-web = { path = "../../../web", features=["hydrate"], optional = true }
 dioxus = { path = "../../../dioxus" }
+dioxus-router = { path = "../../../router" }
 dioxus-server = { path = "../../" }
 axum = { version = "0.6.12", optional = true }
 tokio = { version = "1.27.0", features = ["full"], optional = true }
 serde = "1.0.159"
-tracing-subscriber = "0.3.16"
-tracing = "0.1.37"
 
 [features]
 ssr = ["axum", "tokio", "dioxus-server/ssr", "dioxus-server/axum"]
-web = ["dioxus-web"]
+web = ["dioxus-web", "dioxus-router/web"]

packages/server/examples/axum-hello-world/src/main.rs

@@ -25,7 +25,9 @@ fn main() {
                         axum::Router::new()
                             .serve_dioxus_application(
                                 ServeConfig::new(app, ()).head(r#"<title>Hello World!</title>"#),
+                                None,
                             )
+                            .with_state(SSRState::default())
                             .into_make_service(),
                     )
                     .await

packages/server/examples/axum-router/.gitignore

@@ -0,0 +1,2 @@
+dist
+target

packages/server/examples/axum-router/Cargo.toml

@@ -0,0 +1,21 @@
+[package]
+name = "axum-router"
+version = "0.1.0"
+edition = "2021"
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[dependencies]
+dioxus-web = { path = "../../../web", features=["hydrate"], optional = true }
+dioxus = { path = "../../../dioxus" }
+dioxus-router = { path = "../../../router" }
+dioxus-server = { path = "../../" }
+axum = { version = "0.6.12", optional = true }
+tokio = { version = "1.27.0", features = ["full"], optional = true }
+serde = "1.0.159"
+tower-http = { version = "0.4.0", features = ["fs"], optional = true }
+http = { version = "0.2.9", optional = true }
+
+[features]
+ssr = ["axum", "tokio", "dioxus-server/ssr", "dioxus-server/axum", "tower-http", "http"]
+web = ["dioxus-web", "dioxus-router/web"]

packages/server/examples/axum-router/src/main.rs

@@ -0,0 +1,141 @@
+//! Run with:
+//!
+//! ```sh
+//! dioxus build --features web
+//! cargo run --features ssr
+//! ```
+
+#![allow(non_snake_case)]
+use dioxus::prelude::*;
+use dioxus_router::*;
+use dioxus_server::prelude::*;
+
+fn main() {
+    #[cfg(feature = "web")]
+    dioxus_web::launch_with_props(
+        App,
+        AppProps { route: None },
+        dioxus_web::Config::new().hydrate(true),
+    );
+    #[cfg(feature = "ssr")]
+    {
+        use axum::extract::State;
+        PostServerData::register().unwrap();
+        GetServerData::register().unwrap();
+        tokio::runtime::Runtime::new()
+            .unwrap()
+            .block_on(async move {
+                let addr = std::net::SocketAddr::from(([127, 0, 0, 1], 8080));
+                use tower_http::services::ServeDir;
+
+                // Serve the dist/assets folder with the javascript and WASM files created by the CLI
+                let serve_dir = ServeDir::new("dist/assets");
+
+                axum::Server::bind(&addr)
+                    .serve(
+                        axum::Router::new()
+                            // Register server functions
+                            .register_server_fns("")
+                            // Serve the static assets folder
+                            .nest_service("/assets", serve_dir)
+                            // If the path is unknown, render the application
+                            .fallback(
+                                move |uri: http::uri::Uri, State(ssr_state): State<SSRState>| {
+                                    let rendered = ssr_state.render(
+                                        &ServeConfig::new(
+                                            App,
+                                            AppProps {
+                                                route: Some(format!("http://{addr}{uri}")),
+                                            },
+                                        )
+                                        .head(r#"<title>Hello World!</title>"#),
+                                    );
+                                    async move { axum::body::Full::from(rendered) }
+                                },
+                            )
+                            .with_state(SSRState::default())
+                            .into_make_service(),
+                    )
+                    .await
+                    .unwrap();
+            });
+    }
+}
+
+#[derive(Clone, Debug, Props, PartialEq)]
+struct AppProps {
+    route: Option<String>,
+}
+
+fn App(cx: Scope<AppProps>) -> Element {
+    cx.render(rsx! {
+        Router {
+            initial_url: cx.props.route.clone(),
+
+            Route { to: "/blog",
+                Link {
+                    to: "/",
+                    "Go to counter"
+                }
+                table {
+                    tbody {
+                        for _ in 0..100 {
+                            tr {
+                                for _ in 0..100 {
+                                    td { "hello world??" }
+                                }
+                            }
+                        }
+                    }
+                }
+            },
+            // Fallback
+            Route { to: "",
+                Counter {}
+            },
+        }
+    })
+}
+
+fn Counter(cx: Scope) -> Element {
+    let mut count = use_state(cx, || 0);
+    let text = use_state(cx, || "...".to_string());
+
+    cx.render(rsx! {
+        Link {
+            to: "/blog",
+            "Go to blog"
+        }
+        div{
+            h1 { "High-Five counter: {count}" }
+            button { onclick: move |_| count += 1, "Up high!" }
+            button { onclick: move |_| count -= 1, "Down low!" }
+            button {
+                onclick: move |_| {
+                    to_owned![text];
+                    async move {
+                        if let Ok(data) = get_server_data().await {
+                            println!("Client received: {}", data);
+                            text.set(data.clone());
+                            post_server_data(data).await.unwrap();
+                        }
+                    }
+                },
+                "Run a server function"
+            }
+            "Server said: {text}"
+        }
+    })
+}
+
+#[server(PostServerData)]
+async fn post_server_data(data: String) -> Result<(), ServerFnError> {
+    println!("Server received: {}", data);
+
+    Ok(())
+}
+
+#[server(GetServerData)]
+async fn get_server_data() -> Result<String, ServerFnError> {
+    Ok("Hello from the server!".to_string())
+}

packages/server/examples/salvo-hello-world/Cargo.toml

@@ -11,8 +11,6 @@ dioxus = { path = "../../../dioxus" }
 dioxus-server = { path = "../../" }
 tokio = { version = "1.27.0", features = ["full"], optional = true }
 serde = "1.0.159"
-tracing-subscriber = "0.3.16"
-tracing = "0.1.37"
 salvo = { version = "0.37.9", optional = true }
 
 [features]

packages/server/examples/warp-hello-world/Cargo.toml

@@ -11,8 +11,6 @@ dioxus = { path = "../../../dioxus" }
 dioxus-server = { path = "../../" }
 tokio = { version = "1.27.0", features = ["full"], optional = true }
 serde = "1.0.159"
-tracing-subscriber = "0.3.16"
-tracing = "0.1.37"
 warp = { version = "0.3.3", optional = true }
 
 [features]