TauriとLeptosで作るデスクトップアプリ（1）プロジェクトを作成する
はじめに
TauriとLeptosでデスクトップアプリを作っていきます。
- Windows 11 Home
- Rust 1.80
- Tauri 2.0.0-rc
- Leptos 0.7.0-beta
関連記事
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 = "2021"
[dependencies]
これを次のように変更します。
[workspace]
resolver = "2"
members = []
[profile.release]
codegen-units = 1
lto = true
[workspace.package]
edition = "2021"
[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 = "2"
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を以下の内容に更新します。
[package]
name = "src-tauri"
version = "0.1.0"
edition.workspace = true
[lib]
name = "src_tauri_lib"
[build-dependencies]
tauri-build = { version = "2.0.0-rc", features = ["config-toml"] }
[dependencies]
serde = { version = "1", features = ["derive"] }
serde_json = "1"
tauri = { version = "2.0.0-rc", features = ["config-toml"] }
tauri-plugin-shell = "2.0.0-rc"
[lib]でライブラリクレートの名前をsrc_tauri_libと指定します。バイナリクレートの名前は自動でsrc_tauriとなります。tauri-buildとtauriのfeaturesにconfig-tomlを指定しています。これは後述のTauri設定ファイルをTOML形式のTauri.tomlで書くためです。Cargo.toml、Trunk.tomlにあわせました。
Tauri.toml
Tauri設定ファイルTauri.tomlを以下の内容で新規作成します。上で更新したCargo.tomlと同じディレクトリに配置します。
product-name = "tauri-leptos-example"
version = "0.1.0"
identifier = "com.tauri-leptos-example.dev" # 適当です。
[build]
dev-url = "http://localhost:1420"
before-dev-command = { cwd = "../src-ui", script = "trunk serve" }
before-build-command = { cwd = "../src-ui", script = "trunk build" }
frontend-dist = "../src-ui/dist"
[bundle]
active = true
icon = ["icons/icon.ico"]
[app]
with-global-tauri = true
[[app.windows]]
title = "Tauri Leptos Example"
width = 800
height = 600
[build]の項目で、後で作成するLeptosフロントエンドのディレクトリ(./apps/src-ui)を指すように指定するのがポイントです。また、フロントエンドが今回のようにRustのときは、app.with-global-tauriをtrueにします。
Rustソースファイル
Rustソースファイルを用意します。
fn main() {
tauri_build::build()
}
#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
fn main() {
src_tauri_lib::run()
}
pub fn run() {
tauri::Builder::default()
.plugin(tauri_plugin_shell::init())
.invoke_handler(tauri::generate_handler![])
.run(tauri::generate_context!())
.expect("error while running tauri application");
}
許可リスト
Tauri v2から許可リストの指定方法が変わりました。./apps/src-tauriにcapabilitiesディレクトリを作り、default.jsonファイルを以下の内容で新規作成します。
{
"$schema": "../gen/schemas/desktop-schema.json",
"identifier": "default",
"description": "Capability for the main window",
"windows": ["main"],
"permissions": [
"core:app:default",
"core:event:default",
"core:image:default",
"core:menu:default",
"core:path:default",
"core:resources:default",
"core:tray:default",
"core:window:default",
"shell:allow-open"
]
}
Leptosフロントエンドを作成する
Leptosフロントエンドを作っていきます。
Cargo.toml
./apps/src-ui/Cargo.tomlを以下の内容に更新します。
[package]
name = "src-ui"
version = "0.1.0"
edition.workspace = true
[lib]
name = "src_ui_lib"
[dependencies]
console_error_panic_hook = "0.1.7"
leptos = { version = "0.7.0-beta2", features = ["csr"] }
[lib]でライブラリクレートの名前をsrc_ui_libと指定します。バイナリクレートの名前は自動でsrc_uiとなります。LeptosをTauriから呼び出すために、leptosのfeaturesにcsrを指定します。
Trunk.toml
Trunk設定ファイルTrunk.tomlを以下の内容で新規作成します。src-uiディレクトリに配置します。
[build]
target = "./index.html"
[serve]
address = "0.0.0.0"
port = 1420
open = false
ws_protocol = "ws"
index.html
デスクトップアプリの起点となるHTMLファイルを新規作成します。src-uiディレクトリに配置します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tauri Leptos Example</title>
<link data-trunk rel="rust" data-wasm-opt="z" />
</head>
<body style="margin: 0"></body>
</html>
.taurignore
TauriアプリをCargo tauri devコマンドで起動したとき、ファイルを監視して、変更があったらリビルトします。ただし、Leptosフロントエンド側のみの変更であれば、Tauriバックエンドはリビルドする必要がありません。この設定をするために、src-uiディレクトリに.taurignoreファイルを作成します。
*
Rustソースファイル
Rustソースファイルを用意します。
fn main() {
src_ui_lib::run()
}
use app::App;
use leptos::prelude::*;
mod app;
pub fn run() {
console_error_panic_hook::set_once();
mount_to_body(App)
}
use leptos::prelude::*;
#[component]
pub fn App() -> impl IntoView {
view! { <p>Hello, world</p> }
}
プロジェクトを実行する
TrunkとTauri CLIをインストールします。
> cargo install --locked trunk
> cargo install tauri-cli --version "^2.0.0-rc"
ターゲットアーキテクチャを追加します。
> rustup target add wasm32-unknown-unknown
プロジェクトをビルドして実行します。
> cargo tauri dev
無事、最初のデスクトップアプリが完成しました。
サンプルコード
今回作成したプロジェクトは以下からダウンロード可能です。
Discussion