Leptos でHello World
micchiFull stack, fully typed.
A cutting-edge Rust framework for the modern web.
をうたうLeptos を触ってみます。
micchiGetting Started によると、プロジェクト構成の方法には２つある模様。
- Client-side rendering (CSR) with Trunk
- Full-stack, server-side rendering (SSR) with
cargo-leptos
We’ll introduce cargo-leptos in Part 2 of this book, which is all about working with the full power of Leptos in its full-stack, SSR mode.
とあるものの、ドキュメントの順番に従って1. からやってみる。
micchiHello World! Getting Set up for Leptos CSR Development
下準備
cargo install trunk
プロジェクトひな形作成
cargo init leptos-tutorial
cd $_
cargo add leptos --features=csr,nightly
Using nightly Rust, and the nightly feature in Leptos enables the function-call syntax for signal getters and setters that is used in most of this book.
とのことなので、Rust もnightly に
rustup default nightly
rustup override set nightly
WebAsssembly 用のtarget を追加
rustup target add wasm32-unknown-unknown
プロジェクト直下にindex.html を作成し、以下の内容にする。
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>
src/main.rs を以下の内容に編集
use leptos::*;
fn main() {
mount_to_body(|| view! { <p>"Hello, world!"</p> });
}
Build & Run
trunk serve --open
...（中略）...
INFO downloading wasm-bindgen version="0.2.92"
INFO installing wasm-bindgen
INFO applying new distribution
INFO ✅ success
INFO 📡 serving static assets at -> /
INFO 📡 server listening at:
INFO 🏠 http://127.0.0.1:8080/
INFO 🏠 http://[::1]:8080/
ERROR error opening browser error=Os { code: 2, kind: NotFound, message: "No such file or directory" }
とエラーが出ているが、ウェブブラウザでhttp://127.0.0.1:8080/ を開くと、Hello, world! と表示されています。
micchi引き続き、開発者体験を向上する機能の有効化
Leptos Developer Experience Improvements
console_error_panic_hook
cargo add console_error_panic_hook
[rustwasm / console_error_panic_hook] Readme / Usage の２つ目のやり方でhook を設定。
use leptos::*;
fn main() {
+ // set console error panic hook
+ console_error_panic_hook::set_once();
mount_to_body(|| view! { <p>"Hello, world!"</p> });
}
2) Editor Autocompletion inside #[component] and #[server]
指示に従い、.vscode/setting.json に追記
{
"rust-analyzer.procMacro.ignored": {
"leptos_macro": [
// optional:
// "component",
"server"
],
},
// if code that is cfg-gated for the `ssr` feature is shown as inactive,
// you may want to tell rust-analyzer to enable the `ssr` feature by default
//
// you can also use `rust-analyzer.cargo.allFeatures` to enable all features
"rust-analyzer.cargo.features": ["ssr"],
}
3) Set up leptosfmt With Rust Analyzer (optional)
cargo install leptosfmt
[GitHub] bram209/leptosfmt > Readme に従い、leptosfmt をセットアップ
{
"rust-analyzer.procMacro.ignored": {
"leptos_macro": [
// optional:
// "component",
"server"
],
},
// if code that is cfg-gated for the `ssr` feature is shown as inactive,
// you may want to tell rust-analyzer to enable the `ssr` feature by default
//
// you can also use `rust-analyzer.cargo.allFeatures` to enable all features
"rust-analyzer.cargo.features": ["ssr"],
+ // using with rust analyzer with leptosfmt
+ "rust-analyzer.rustfmt.overrideCommand": ["leptosfmt", "--stdin", "--rustfmt"]
}
edition = "2021"