DogeDark/Cargo.toml

## Cargo.toml
[package]
name = "liveview-bug"
version = "0.1.0"
edition = "2021"

# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

[dependencies]
axum = { version = "0.6.16", features = ["ws"] }
dioxus = "0.4.3"
dioxus-liveview = { version = "0.4.3", features = ["axum"] }
dioxus-router = { version = "0.4.3", features = ["liveview"] }
tokio = { version = "1.35.1", features = ["rt-multi-thread"] }

## main.rs
use axum::{
    extract::WebSocketUpgrade,
    http::StatusCode,
    response::{Html, IntoResponse},
    routing::get,
    Router,
};
use dioxus::prelude::*;
use dioxus_router::prelude::*;

#[tokio::main]
async fn main() {
    let addr: std::net::SocketAddr = ([127, 0, 0, 1], 3031).into();
    let view = dioxus_liveview::LiveViewPool::new();

    let axum_app = Router::new()
        .route(
            "/ws",
            get(move |ws: WebSocketUpgrade| async move {
                ws.on_upgrade(move |socket| async move {
                    // When the WebSocket is upgraded, launch the LiveView with the router component
                    _ = view.launch(dioxus_liveview::axum_socket(socket), app).await;
                })
            }),
        )
        .fallback(fallback_handler);

    println!("Listening on http://{addr}");

    axum::Server::bind(&addr.to_string().parse().unwrap())
        .serve(axum_app.into_make_service())
        .await
        .unwrap();
}

async fn fallback_handler() -> impl IntoResponse {
    (
        StatusCode::OK,
        Html(format!(
            r#"
        <!DOCTYPE html>
        <html>
        <head> <title>Dioxus LiveView with Axum</title>  </head>
        <body> <div id="main"></div> </body>
        {glue}
        </html>
        "#,
            glue = dioxus_liveview::interpreter_glue("/ws")
        )),
    )
}

#[derive(Routable, Clone)]
#[rustfmt::skip]
pub enum Route {
    #[layout(Nav)]

    #[route("/")]
    Home {},

    #[route("/tools")]
    Tools {},
}

fn app(cx: Scope) -> Element {
    render! {
        Router::<Route> {}
    }
}

fn Home(cx: Scope) -> Element {
    render! {
        "home",
    }
}

fn Tools(cx: Scope) -> Element {
    render! {
        "tools",
    }
}

fn Nav(cx: Scope) -> Element {
    render! {
        Link { to: Route::Home {}, "To Home"},
        Link { to: Route::Tools {}, "To Tools"},
        Outlet::<Route> {}
    }
}
	[package]
	name = "liveview-bug"
	version = "0.1.0"
	edition = "2021"

	# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

	[dependencies]
	axum = { version = "0.6.16", features = ["ws"] }
	dioxus = "0.4.3"
	dioxus-liveview = { version = "0.4.3", features = ["axum"] }
	dioxus-router = { version = "0.4.3", features = ["liveview"] }
	tokio = { version = "1.35.1", features = ["rt-multi-thread"] }
	use axum::{
	extract::WebSocketUpgrade,
	http::StatusCode,
	response::{Html, IntoResponse},
	routing::get,
	Router,
	};
	use dioxus::prelude::*;
	use dioxus_router::prelude::*;

	#[tokio::main]
	async fn main() {
	let addr: std::net::SocketAddr = ([127, 0, 0, 1], 3031).into();
	let view = dioxus_liveview::LiveViewPool::new();

	let axum_app = Router::new()
	.route(
	"/ws",
	get(move \|ws: WebSocketUpgrade\| async move {
	ws.on_upgrade(move \|socket\| async move {
	// When the WebSocket is upgraded, launch the LiveView with the router component
	_ = view.launch(dioxus_liveview::axum_socket(socket), app).await;
	})
	}),
	)
	.fallback(fallback_handler);

	println!("Listening on http://{addr}");

	axum::Server::bind(&addr.to_string().parse().unwrap())
	.serve(axum_app.into_make_service())
	.await
	.unwrap();
	}

	async fn fallback_handler() -> impl IntoResponse {
	(
	StatusCode::OK,
	Html(format!(
	r#"
	<!DOCTYPE html>
	<html>
	<head> <title>Dioxus LiveView with Axum</title> </head>
	<body> <div id="main"></div> </body>
	{glue}
	</html>
	"#,
	glue = dioxus_liveview::interpreter_glue("/ws")
	)),
	)
	}

	#[derive(Routable, Clone)]
	#[rustfmt::skip]
	pub enum Route {
	#[layout(Nav)]

	#[route("/")]
	Home {},

	#[route("/tools")]
	Tools {},
	}

	fn app(cx: Scope) -> Element {
	render! {
	Router::<Route> {}
	}
	}

	fn Home(cx: Scope) -> Element {
	render! {
	"home",
	}
	}

	fn Tools(cx: Scope) -> Element {
	render! {
	"tools",
	}
	}

	fn Nav(cx: Scope) -> Element {
	render! {
	Link { to: Route::Home {}, "To Home"},
	Link { to: Route::Tools {}, "To Tools"},
	Outlet::<Route> {}
	}
	}