mirror of
https://github.com/yewstack/yew.git
synced 2025-12-08 21:26:25 +00:00
8bc2212716
* Bring changes to this branch. * Bring changes to this branch. * Add feature render and renderer. * Bring changes to this branch. * Migrate examples to Renderer. * Satisfy no any render. * Satisfy ssr. * Satisfy feature render. * Lint feature soundness. * Suppress tests. * Fix pr-flow, update docs. * Add a notice. * Adjust visibility. * Correctly feature gate tests. * make test scope available under feature render. * Fix CI. * Fix CI. * Restore tests module to its original place as well. * Make bundles crate private. * Make most bundle APIs private. * Adjust docs. * Adjust debug implementation. * Replace start_app with Renderer. * Adjust documentation. * Remove unused lint. * Remove start_app from docs. * DomBundle -> ReconcileTarget. * Adjust documentation. * Once render, now csr. * Fix docs as well.
141 lines
3.3 KiB
Plaintext
141 lines
3.3 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 = { version = "0.19", features = ["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>
|
|
</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.
|