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.