TauriとLeptosで作るデスクトップアプリ（1）プロジェクトを作成する
はじめに
TauriとLeptosでデスクトップアプリを作っていきます。
- Windows 11 Home
- Rust 1.88
- Tauri 2.6.2
- Leptos 0.8.2
関連記事
Rustプロジェクトを作成する
TauriとLeptosを使ったサンプルプロジェクトを作成します。公式ページにあるように、create-tauri-appを使うとテンプレートを作ってくれます。ここでは、あえてスクラッチから作っていきます。
プロジェクトディレクトリを作成し、cargo initコマンドで初期化します。ディレクトリごと作りたいときは、cargo newコマンドでもOKです。
> mkdir tauri-leptos-example
> cd tauri-leptos-example
> cargo init
プロジェクトのルートディレクトリ(.)にあるCargo.tomlは、次のようになっています。
[package]
name = "tauri-leptos-example"
version = "0.1.0"
edition = "2024"
[dependencies]
これを次のように変更します。
[workspace]
resolver = "3"
members = []
[profile.release]
codegen-units = 1
lto = true
[workspace.package]
edition = "2024"
[workspace.dependencies]
プロジェクト全体はワークスペースで管理します。[profile.release]の設定は、wasmファイルを小さくするための設定のようです。また、ワークスペースの依存パッケージ[workspace.dependencies]は、まだ空です。
appsディレクトリの中に、
- フロントエンド: Leptos (
apps/src-ui) - バックエンド: Tauri (
apps/src-tauri)
の2つのクレートを作ります。
> mkdir apps && cd apps
> cargo new src-tauri --lib
> cargo new src-ui --lib
それぞれのディレクトリにクレートが作成されました。
[package]
name = "src-tauri"
version = "0.1.0"
edition.workspace = true
[dependencies]
また、これらのクレートは自動でワークスペースに追加されています。
[workspace]
resolver = "3"
members = ["apps/src-tauri", "apps/src-ui"]
# 略
プロジェクトルートに戻ってテストを実行します。
> cd ..
> cargo test
Compiling src-ui v0.1.0 (...)
Compiling src-tauri v0.1.0 (...)
:
test result: ok. ...
src-uiとsrc-tauriの2つのクレートがコンパイルされ、テストにパスします。これでプロジェクトルートにあるワークスペースからクレートが認識されていることが確認できました。またプロジェクトルートにあるsrcディレクトリは削除します。現時点でのディレクトリ構成は、以下のようになっています。
tauri-leptos-example
├─ apps/
│ ├─ src-tauri/
│ │ ├─ src/
│ │ │ └─ lib.rs
│ │ └─ Cargo.toml
│ └─ src-ui/
│ ├─ src/
│ │ └─ lib.rs
│ └─ Cargo.toml
└─ Cargo.toml
Tauriバックエンドを作成する
Tauriバックエンドを作っていきます。
Cargo.toml
./apps/src-tauri/Cargo.tomlを以下の内容に更新します。
tauri-buildとtauriのfeaturesにconfig-tomlを指定しています。これは後述のTauri設定ファイルをTOML形式のTauri.tomlで書くためです。Cargo.toml、Trunk.tomlにあわせました。
Tauri.toml
Tauri設定ファイルTauri.tomlを以下の内容で新規作成します。上で更新したCargo.tomlと同じディレクトリに配置します。
[build]の項目で、後で作成するLeptosフロントエンドのディレクトリ(./apps/src-ui)を指すように指定するのがポイントです。また、フロントエンドが今回のようにRustのときは、app.with-global-tauriをtrueにします。
Rustソースファイル
Rustソースファイルを用意します。
許可リスト
Tauri v2から許可リストの指定方法が変わりました。
./apps/src-tauriにcapabilitiesディレクトリを作り、default.jsonファイルを以下の内容で新規作成します。
Leptosフロントエンドを作成する
Leptosフロントエンドを作っていきます。
Cargo.toml
./apps/src-ui/Cargo.tomlを以下の内容に更新します。
LeptosをTauriから呼び出すために、leptosのfeaturesにcsrを指定します。
Trunk.toml
Trunk設定ファイルTrunk.tomlを以下の内容で新規作成します。src-uiディレクトリに配置します。
index.html
デスクトップアプリの起点となるHTMLファイルを新規作成します。src-uiディレクトリに配置します。
.taurignore
Tauriアプリをcargo tauri devコマンドで起動したとき、ファイルを監視して、変更があったらリビルトします。ただし、Leptosフロントエンド側のみの変更であれば、Tauriバックエンドはリビルドする必要がありません。この設定をするために、src-uiディレクトリに.taurignoreファイルを作成します。
Rustソースファイル
Rustソースファイルを用意します。
プロジェクトを実行する
TrunkとTauri CLIをインストールします。
> cargo install trunk --locked
> cargo install tauri-cli --locked
ターゲットアーキテクチャを追加します。
> rustup target add wasm32-unknown-unknown
プロジェクトをビルドして実行します。
> cargo tauri dev
無事、最初のデスクトップアプリが完成しました。
サンプルコード
今回作成したプロジェクトは以下からダウンロード可能です。
Discussion