docs(reference/platforms/ssr): fixing example and commands

This commit is contained in:
Malcolm Rebughini committed 2022-02-17 19:17:32 -08:00
1 parent 3873cd1a60
commit d897d2148a
1 file changed
+10 -10
+10 -10
View File
@@ -2,11 +2,8 @@
The Dioxus VirtualDom can be rendered to a string by traversing the Element Tree. This is implemented in the `ssr` crate where your Dioxus app can be directly rendered to HTML to be served by a web server. The Dioxus VirtualDom can be rendered to a string by traversing the Element Tree. This is implemented in the `ssr` crate where your Dioxus app can be directly rendered to HTML to be served by a web server.
## Setup ## Setup
If you just want to render `rsx!` or a VirtualDom to HTML, check out the API docs. It's pretty simple: If you just want to render `rsx!` or a VirtualDom to HTML, check out the API docs. It's pretty simple:
```rust ```rust
@@ -19,7 +16,6 @@ println!("{}", dioxus::ssr::render_vdom(&vdom));
println!( "{}", dioxus::ssr::render_lazy(rsx! { h1 { "Hello, world!" } } ); println!( "{}", dioxus::ssr::render_lazy(rsx! { h1 { "Hello, world!" } } );
``` ```
However, for this guide, we're going to show how to use Dioxus SSR with `Axum`. However, for this guide, we're going to show how to use Dioxus SSR with `Axum`.
Make sure you have Rust and Cargo installed, and then create a new project: Make sure you have Rust and Cargo installed, and then create a new project:
@@ -29,15 +25,16 @@ $ cargo new --bin demo
$ cd app $ cd app
``` ```
Add Dioxus with the `desktop` feature: Add Dioxus with the `ssr` feature:
```shell ```shell
$ cargo add dioxus --features ssr $ cargo add dioxus --features ssr
``` ```
Next, add all the Axum dependencies. This will be different if you're using a different Web Framework Next, add all the Axum dependencies. This will be different if you're using a different Web Framework
``` ```
$ cargo add dioxus tokio --features full $ cargo add tokio --features full
$ cargo add axum $ cargo add axum
``` ```
@@ -45,12 +42,11 @@ Your dependencies should look roughly like this:
```toml ```toml
[dependencies] [dependencies]
axum = "0.4.3" axum = "0.4.5"
dioxus = { version = "*", features = ["ssr"] } dioxus = { version = "*", features = ["ssr"] }
tokio = { version = "1.15.0", features = ["full"] } tokio = { version = "1.15.0", features = ["full"] }
``` ```
Now, setup your Axum app to respond on an endpoint. Now, setup your Axum app to respond on an endpoint.
```rust ```rust
@@ -63,7 +59,11 @@ async fn main() {
println!("listening on http://{}", addr); println!("listening on http://{}", addr);
axum::Server::bind(&addr) axum::Server::bind(&addr)
.serve(Router::new().route("/", get(app_endpoint))) .serve(
Router::new()
.route("/", get(app_endpoint))
.into_make_service(),
)
.await .await
.unwrap(); .unwrap();
} }
@@ -95,7 +95,7 @@ async fn app_endpoint() -> Html<String> {
And that's it! And that's it!
> You might notice that you cannot hold the VirtualDom across an await point. Dioxus is currently not ThreadSafe, so it *must* remain on the thread it started. We are working on loosening this requirement. > You might notice that you cannot hold the VirtualDom across an await point. Dioxus is currently not ThreadSafe, so it _must_ remain on the thread it started. We are working on loosening this requirement.
## Future Steps ## Future Steps