mirror of https://github.com/yewstack/yew
128 lines
2.8 KiB
Plaintext
128 lines
2.8 KiB
Plaintext
---
|
|
title: "Build a sample app"
|
|
---
|
|
|
|
## Using a starter template
|
|
|
|
Once you have the environment ready, you can use the starter template to create the boilerplate needed for a basic Yew app.
|
|
|
|
Install [`cargo-generate`](https://github.com/cargo-generate/cargo-generate) by following their installation instructions
|
|
then run the following command:
|
|
|
|
```shell
|
|
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.
|
|
|
|
```bash
|
|
cargo new yew-app
|
|
```
|
|
|
|
Open the newly created directory.
|
|
|
|
```bash
|
|
cd yew-app
|
|
```
|
|
|
|
### Run a hello world example
|
|
|
|
To verify the Rust environment is setup, run the initial project using `cargo run`. You should see
|
|
a "Hello World!" message.
|
|
|
|
```bash
|
|
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.
|
|
|
|
```toml title=Cargo.toml
|
|
[package]
|
|
name = "yew-app"
|
|
version = "0.1.0"
|
|
edition = "2018"
|
|
|
|
[dependencies]
|
|
# you can check the latest version here: https://crates.io/crates/yew
|
|
yew = "0.19"
|
|
```
|
|
|
|
#### Update main.rs
|
|
|
|
We need to generate a template which 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::start_app::<App>()` 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::start_app_with_props::<App>(..)`.
|
|
:::
|
|
|
|
```rust ,no_run, title=main.rs
|
|
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::start_app::<App>();
|
|
}
|
|
```
|
|
|
|
#### Create index.html
|
|
|
|
Finally, add an `index.html` file in the root directory of your app.
|
|
|
|
```html , title=index.html
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Yew App</title>
|
|
</head>
|
|
</html>
|
|
```
|
|
|
|
## View your web application
|
|
|
|
Run the following command to build and serve the application locally.
|
|
|
|
```bash
|
|
trunk serve
|
|
```
|
|
|
|
Trunk will rebuild your application if you modify any of its source code 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](./examples.mdx) to further your learning.
|