UIs with RSX

Dioxus renders to HTML

Steps to Create Dioxus Web Page

1. Create new project and update Cargo.toml

  dx new
  cargo add chrono --features serde
  cargo add futures
  cargo add reqwest --features json
  cargo add serde --features derive
  cargo add serde_json
  cargo add async_recursion
        

2. Install latest version of the dioxus-cli

 cargo install dioxus-cli --force
        

3. Install wasm-bindgen-cli to the version matching the Rust Wasm schema (e.g., 0.2.99)

 cargo install wasm-bindgen-cli --version 0.2.99 --force
        

4. Update the wasm-bindgen Dependency in Cargo.toml

    [dependencies]
    async-recursion = "1.1.1"
    chrono = { version = "0.4.39", features = ["serde"] }
    dioxus = { version = "0.5", features = ["web"] }
    dioxus-logger = "0.5.1"
    futures = "0.3.31"
    reqwest = { version = "0.12.9", features = ["json"] }
    serde = { version = "1.0.216", features = ["derive"] }
    serde_json = "1.0.133"
    wasm-bindgen = "=0.2.99"
    
    [profile]
    
    [profile.wasm-dev]
    inherits = "dev"
    opt-level = 1
    
    [profile.server-dev]
    inherits = "dev"
    
    [profile.android-dev]
    inherits = "dev"
        

5. rebuild the project

    cargo clean
    cargo build
    dx build
    dx serve
        

6. Open webpage http://127.0.0.1:8080/

1. Simple Webpage

#![allow(non_snake_case)]
use dioxus::prelude::*;
use dioxus_logger::tracing::{info, Level};

fn main() {
    dioxus_logger::init(Level::INFO).expect("failed to init logger");
    info!("starting app");
    launch(App);
}

#[component]
fn App() -> Element {
    rsx! {
        div { id: "links",
            h1 { "test" }
        }
    }
}

$ dx serve
http://127.0.0.1:8080/
                

$ Cargo.toml
[package]
name = "hello"
version = "0.1.0"
authors = ["amit kumar <23084104+code-with-amitk@users.noreply.github.com>"]
edition = "2021"

[dependencies]
async-recursion = "1.1.1"
chrono = { version = "0.4.39", features = ["serde"] }
dioxus = { version = "0.5", features = ["web"] }
dioxus-logger = "0.5.1"
futures = "0.3.31"
reqwest = { version = "0.12.9", features = ["json"] }
serde = { version = "1.0.216", features = ["derive"] }
serde_json = "1.0.133"
wasm-bindgen = "=0.2.99"

[profile]

[profile.wasm-dev]
inherits = "dev"
opt-level = 1

[profile.server-dev]
inherits = "dev"

[profile.android-dev]
inherits = "dev"