Zenn
🧳

[Trunk] Yew のホットリロードとファイル移動

2022/03/23に公開
Yew
#
trunk
tech

この記事が役立つかも知れない人

Trunk を使って Yew の開発をしている人の中で以下のように困っている人。

  • 「index.html の場所は変えられないのかな？」
  • 「コードを変更してもリアルタイムに自動更新されなくなっちゃった……。」

この記事では扱わないこと

  • Rust について
  • Yew とは何か
  • Yew の使い方について
  • Trunk とは何か

結論から言えば Trunk.toml という名前のファイルを作成して、そこに設定を書き込みます。

Trunk.toml
[build]
target = "public/index.html"
dist = "dist"

[watch]
watch = ["public/", "src/"]

上記の Trunk.toml に対応するディレクトリ構成は以下の通りです。

📂 root/
 ┣ 📁 public/
 ┃　　　┗━ 📄 index.html
 ┣ 📁 src/
 ┃　　　┗━ 📄 main.rs
 ┣ 📄 Cargo.lock
 ┣ 📄 Cargo.toml
 ┗ 📄 Trunk.toml

これで index.html の場所を移動させ、その後もホットリロードがされるようにできたかと思います。

詳細については簡単に解説を書きますが、英語でも「短文なら大丈夫！」という方は以下のリンクから本家の解説付き Trunk.toml を参照すると良いかと思います。

また、この記事を読み終えた際に「欲しい情報がなかった……。」という場合も検索作業に戻るより上記のリンクで Trunk.toml を参照すると Trunk の設定周辺の問題は大抵解決すると思います。

index.html を移動する

Trunk.toml
[build]
target = "public/index.html"
dist = "dist"

target には移動した後の index.html の場所を教えてあげてください。
例の場合だと "public/index.html" ですが、ディレクトリの名前は public 以外でも大丈夫です。好きな名前でディレクトリを作って、そこに index.html を移動させたら target に設定すればいいだけです。

dist では出力される WASM や JavaScript などが入るディレクトリの名前を設定できます。
例のように "dist" を渡すだけならば設定する必要もありませんが、例えば "build" や "output" といった名前のディレクトリに出力したいという場合はここで設定することができます。

ホットリロードされるようにする

Trunk.toml
[watch]
watch = ["public/", "src/"]

watch には編集して保存した後に自動で build されて欲しいファイルがあるディレクトリを指定します。
index.html を移動した際に、これを設定しないと「編集して → trunk serve → 動作確認 → 修正する → Trunk を停止 → trunk serve ...」といったような Trunk を使っている意味が皆無な状況になってしまいます。

くわえて注意点として index.html のあるディレクトリだけを監視対象にしても main.rs 等を編集した際に自動で build されません。
index.html と main.rs のあるディレクトリの両方を指定しておくのが安心だと思います。

以上が index.html の場所を移動させる方法と移動した後も変更を加えたら自動で build されるようにする設定でした。
その他にも先に紹介した全てのフィールドとそのデフォルト設定が記述されている Trunk 本家の Trunk.toml には、紹介はしていないものの便利そうな設定がいくつかあったので今後も Trunk を使う方は一読しておくと役に立つと思います！

おまけ

私が Trunk と Yew を使用して作ったウェブサイトを置いておきます。

実験的な作りで、友人らに見せたとき「初見殺し」「不親切」と言われました。
マウスホイールができないと最初のカード以降には進めないというスマホ全盛の時流に反した造りになっています。修正予定。

「Yew を使うときのサンプルが増えれば――！」という思いでソースコードへの直リンクも貼っておきます。

「Yew 勉強したい！」という方の期待に応えるようなサンプルコードとしては、下記にある Yew 本家のリポジトリで公開している Example のコードを活用しながら勉強するのがオススメです。
(バージョンが違う等の問題がある場合もありますので、そこだけはお気を付けください！)

最後まで読んで頂きありがとうございます。

この記事が役に立ったら 🩷 をつけてもらえると嬉しいです！
また些細なコメントでもリアクションを頂けるとありがたいです！

Discussion