Skip to content

Latest commit

 

History

History
158 lines (115 loc) · 3.8 KB

build-a-sample-app.mdx

File metadata and controls

158 lines (115 loc) · 3.8 KB
Raw
title
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:

[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.