docs(reference/platforms/ssr): fixing example and commands
This commit is contained in:
1 parent
3873cd1a60
commit
d897d2148a
1 file changed
+10
-10
@@ -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
|
||||||
|
|
||||||
|
|||||||
Reference in new issue
Block a user