Build a sample app

First create a new Rust library (important: create a library, not a binary by passing the --lib flag):

1. cargo new --lib yew-app && cd yew-app

Add yew and wasm-bindgen to your dependencies (refer here for the latest version)

1. [package]
2. name = "yew-app"
3. version = "0.1.0"
4. authors = ["Yew App Developer <name@example.com>"]
5. edition = "2018"

7. [lib]
8. crate-type = ["cdylib", "rlib"]

10. [dependencies]
11. yew = "0.17"
12. wasm-bindgen = "0.2.67"

Copy the following template into your src/lib.rs file:

1. use wasm_bindgen::prelude::*;
2. use yew::prelude::*;

4. struct Model {
5. link: ComponentLink<Self>,
6. value: i64,
7. }

9. enum Msg {
10. AddOne,
11. }

13. impl Component for Model {
14. type Message = Msg;
15. type Properties = ();
16. fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
17. Self {
18. link,
19. value: 0,
20. }
21. }

23. fn update(&mut self, msg: Self::Message) -> ShouldRender {
24. match msg {
25. Msg::AddOne => self.value += 1
26. }
27. true
28. }

30. fn change(&mut self, _props: Self::Properties) -> ShouldRender {
31. // Should only return "true" if new properties are different to
32. // previously received properties.
33. // This component has no properties so we will always return "false".
34. false
35. }

37. fn view(&self) -> Html {
38. html! {
39. <div>
40. <button onclick=self.link.callback(|_| Msg::AddOne)>{ "+1" }</button>
41. <p>{ self.value }</p>
42. </div>
43. }
44. }
45. }

47. #[wasm_bindgen(start)]
48. pub fn run_app() {
49. App::<Model>::new().mount_to_body();
50. }

This template sets up your root Component, called Model which shows a button that updates itself when you click it. Take special note of App::<Model>::new().mount_to_body() inside main() which starts your app and mounts it to the page’s <body> tag. If you would like to start your application with any dynamic properties, you can instead use App::<Model>::new().mount_to_body_with_props(..).

Finally, add an index.html file into a new folder named static in your app.

1. mkdir static

1. <!doctype html>
2. <html lang="en">
3. <head>
4. <meta charset="utf-8">
5. <title>Yew Sample App</title>
6. <script type="module">
7. import init from "./wasm.js"
8. init()
9. </script>
10. </head>
11. <body></body>
12. </html>

Run your App!

Using wasm-pack is the preferred way to get up and running. If you haven’t already, install wasm-pack with cargo install wasm-pack and then build and start a development server by running:

1. wasm-pack build --target web --out-name wasm --out-dir ./static

wasm-pack generates a bundle in the ./static directory with your app’s compiled WebAssembly along with a JavaScript wrapper which will load your application’s WebAssembly binary and run it.

Then, use your favorite web server to serve the files under ./static. For example:

1. cargo +nightly install miniserve
2. miniserve ./static --index index.html