mirror of https://github.com/yewstack/yew
167 lines
3.9 KiB
Plaintext
167 lines
3.9 KiB
Plaintext
---
|
|
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`](https://github.com/cargo-generate/cargo-generate) by following their installation instructions
|
|
then run the following commands:
|
|
|
|
```shell
|
|
cargo generate --git https://github.com/yewstack/yew-trunk-minimal-template
|
|
```
|
|
|
|
Change directory into your newly created project, then:
|
|
|
|
```
|
|
trunk serve
|
|
```
|
|
|
|
## 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 editing file:
|
|
|
|
```toml title=Cargo.toml
|
|
[package]
|
|
name = "yew-app"
|
|
version = "0.1.0"
|
|
edition = "2021"
|
|
|
|
[dependencies]
|
|
yew = { version = "0.20.0", features = ["csr"] }
|
|
```
|
|
|
|
or using `cargo add yew -F csr`.
|
|
|
|
:::info
|
|
|
|
You only need 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 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::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()`.
|
|
:::
|
|
|
|
```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::Renderer::<App>::new().render();
|
|
}
|
|
```
|
|
|
|
#### 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>
|
|
<body></body>
|
|
</html>
|
|
```
|
|
|
|
## View your web application
|
|
|
|
Run the following command to build and serve the application locally.
|
|
|
|
```bash
|
|
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.
|
|
This will fail if the socket is being used by another application.
|
|
By default server will listening at address '127.0.0.1' and port '8080' => [http://localhost:8080](http://127.0.0.1:8080).
|
|
To change it, create the following file and edit as needed:
|
|
|
|
```toml title="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 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.
|