Skip to main content
Version: Next

Build a sample app

Once you have the environment ready, you can either choose to use a starter template that contains the boilerplate needed for a basic Yew app or manually set up a small project.

Using a starter template​

Install cargo-generate by following their installation instructions then run the following command:

cargo generate --git https://github.com/yewstack/yew-trunk-minimal-template

Setting up the application manually​

Create Project​

To get started, create a new cargo project.

cargo new yew-app

Open the newly created directory.

cd yew-app

Run a hello world example​

To verify the Rust environment is set up, run the initial project using cargo run. You should see a "Hello World!" message.

cargo run
# output: Hello World!

Setting up the project as 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.

[package]
name = "yew-app"
version = "0.1.0"
edition = "2021"

[dependencies]
# this is the development version of Yew
yew = { git = "https://github.com/yewstack/yew/", features = ["csr"] }
info

You only need the feature csr if you are building an application. It will enable the Renderer and all client-side rendering-related code.

If you are making a library, do not enable this feature as it will pull in client-side rendering logic into the server-side rendering bundle.

If you need the Renderer for testing or examples, you should enable it in the dev-dependencies instead.

Update main.rs​

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

note

The call to yew::Renderer::<App>::new().render() inside the main function 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::Renderer::<App>::with_props(..).render().

use yew::prelude::*;

#[function_component]
fn App() -> Html {
    let counter = use_state(|| 0);
    let onclick = {
        let counter = counter.clone();
        move |_| {
            let value = *counter + 1;
            counter.set(value);
        }
    };

    html! {
        <div>
            <button {onclick}>{ "+1" }</button>
            <p>{ *counter }</p>
        </div>
    }
}

fn main() {
    yew::Renderer::<App>::new().render();
}

Create index.html​

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

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Yew App</title>
    </head>
    <body></body>
</html>

View your web application​

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

trunk serve
info

Add option '--open' to open your default browser trunk serve --open.

Trunk will rebuild your application if you modify any of its source code files. By default server will listening at address '127.0.0.1' and port '8080' => http://localhost:8080. To change it, create the following file and edit as needed:

Trunk.toml
[serve]
# The address to serve on LAN.
address = "127.0.0.1"
# The address to serve on WAN.
# address = "0.0.0.0"
# The port to serve on.
port = 8000

Congratulations​

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

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