Build a sample app

Create Project

To get started, create a new cargo project.

  1. cargo new yew-app

Open the newly created directory.

  1. cd yew-app

Run a hello world example

To verify the Rust environment is setup, run the initial project using the cargo build tool. After output about the build process, you should see the expected “Hello World” message.

  1. cargo run

Converting the project into a Yew web application

To convert this simple command line application to a basic Yew web application, a few changes are needed.

Update Cargo.toml

Add yew to the list of dependencies.

Cargo.toml

  1. [package]
  2. name = "yew-app"
  3. version = "0.1.0"
  4. edition = "2018"
  6. [dependencies]
  7. # you can check the latest version here: https://crates.io/crates/yew
  8. yew = "0.19"

Update main.rs

We need to generate a template which sets up a root Component called Model which renders a button that updates its value when clicked. Replace the contents of src/main.rs with the following code.

Build a sample app - 图1note

The line yew::start_app::<Model>() inside main() starts your application 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 yew::start_app_with_props::<Model>(..).

main.rs

  1. use yew::prelude::*;
  3. enum Msg {
  4.     AddOne,
  5. }
  7. struct Model {
  8.     value: i64,
  9. }
  11. impl Component for Model {
  12.     type Message = Msg;
  13.     type Properties = ();
  15.     fn create(_ctx: &Context<Self>) -> Self {
  16.         Self {
  17.             value: 0,
  18.         }
  19.     }
  21.     fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
  22.         match msg {
  23.             Msg::AddOne => {
  24.                 self.value += 1;
  25.                 // the value has changed so we need to
  26.                 // re-render for it to appear on the page
  27.                 true
  28.             }
  29.         }
  30.     }
  32.     fn view(&self, ctx: &Context<Self>) -> Html {
  33.         // This gives us a component's "`Scope`" which allows us to send messages, etc to the component.
  34.         let link = ctx.link();
  35.         html! {
  36.             <div>
  37.                 <button onclick={link.callback(|_| Msg::AddOne)}>{ "+1" }</button>
  38.                 <p>{ self.value }</p>
  39.             </div>
  40.         }
  41.     }
  42. }
  44. fn main() {
  45.     yew::start_app::<Model>();
  46. }

Create index.html

Finally, add an index.html file in the root directory of your app.

index.html

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <title>Yew App</title>
  6.   </head>
  7. </html>

View your web application

Run the following command to build and serve the application locally.

  1. trunk serve

Trunk will helpfully rebuild your application if you modify any of its files.

Congratulations

You have now successfully setup your Yew development environment, and built your first web application.

Experiment with this application and review the examples to further your learning.