ホットリロードしながらTauri を AngularDart で開発する

はじめに

AngularDart は ngdart という名前に生まれ変わり、運営も変わりました。 ngdart | Dart Package: "https://pub.dev/packages/ngdart"

tauri + ngdart という技術スタックで開発できるならフロントエンド部分を dart で開発できるということなので試してみました。

概要

JavaScript 系の技術周りを使わずに rust と dart を使ってデスクトップアプリを開発できます。ほんの少し js を触らないといけないのですが、パッケージマネージャなどのツールも cargo と pub で ok ですし、npm や node.js を使わなくて済みます。基本的に dart ばっかり触ってるので、rust や js は初心者です。自分の環境では開発するところまでは上手くいきました。ビルドまでは試していませんが、ホットリロードしながら開発はできました。

環境構築(windows10)

Microsoft Visual Studio C++ Build Tools
WebView2
Rust
Dart 1 ~ 3 はだいたい公式を参考にしました https://tauri.app/v1/guides/getting-started/prerequisites 4 は省略

成果物

https://gitlab.com/bpriver_sample/tauri_dart

ポイントをいくつか

rustup

rust をインストールする際、rustup というツールを通じてインストールした方がいいです。 chocolaty で一度試したのですが cargo install tauri-cli の時点で詰みました。 rustup を通じてインストールした場合必要なツール群がちゃんとインストールされるようです。

tauri.conf.json

"build" - "beforeDevCommand": "dart run build_runner serve --live-reload" "build" - "devPath": "http://localhost:8080" "build" - "withGlobalTauri": true

ここら辺の設定を上記のように設定するのが重要です。

dart から js を呼び出す

@JS とか external とか使った処理が必要になります。詳細は成果物にて。

ホットリロードがバグったとき

ホットリロードがキャッシュの関係でバグるときがあるのですが、それの対処を README.md に残しておきます。

最後に

成果物を直接参考してください。いろいろ重要なことに関してのコメントを残してます。なるべく見やすいように最小構成を心掛けてます。 Qiita にもおんなじ記事を投稿しました。

主な参考サイト

"https://zenn.dev/heyhey1028/articles/abd818ca760e33" "https://tauri.app/v1/guides/getting-started/setup/html-css-js#invoke-commands"