Web
Build single-page applications that run in the browser with Dioxus. To run on the Web, your app must be compiled to WebAssembly and depend on the dioxus
and dioxus-web
crates.
A build of Dioxus for the web will be roughly equivalent to the size of a React build (70kb vs 65kb) but it will load significantly faster because WebAssembly can be compiled as it is streamed.
Examples:
Note: Because of the limitations of Wasm, not every crate will work with your web apps, so you'll need to make sure that your crates work without native system calls (timers, IO, etc).
Support
The Web is the best-supported target platform for Dioxus.
- Because your app will be compiled to WASM you have access to browser APIs through wasm-bingen.
- Dioxus provides hydration to resume apps that are rendered on the server. See the hydration example for more details.
Tooling
To develop your Dioxus app for the web, you'll need a tool to build and serve your assets. We recommend using dioxus-cli which includes a build system, Wasm optimization, a dev server, and support hot reloading:
cargo install dioxus-cli
Make sure the wasm32-unknown-unknown
target for rust is installed:
rustup target add wasm32-unknown-unknown
Creating a Project
Create a new crate:
cargo new --bin demo
cd demo
Add Dioxus and the web renderer as dependencies (this will edit your Cargo.toml
):
cargo add dioxus
cargo add dioxus-web
Edit your main.rs
:
#![allow(non_snake_case)] // import the prelude to get access to the `rsx!` macro and the `Scope` and `Element` types use dioxus::prelude::*; fn main() { // launch the web app dioxus_web::launch(App); } // create a component that renders a div with the text "Hello, world!" fn App(cx: Scope) -> Element { cx.render(rsx! { div { "Hello, world!" } }) }
And to serve our app:
dioxus serve