Tauri プロジェクトを作成する

新しく Tauri 2 のプロジェクトを作る方法は 2 つあります。フロントエンドごと雛形を生成する create-tauri-app と、すでにある Web フロントエンドのリポジトリに src-tauri/ を追加する tauri init です。前者は最短で動くものが欲しいとき、後者は既存の Vite / React プロジェクトをデスクトップ化したいときに使います。

1. create-tauri-app で新規作成する

npm create tauri-app@latest
# yarn create tauri-app / pnpm create tauri-app / bun create tauri-app でも可

対話形式の質問と、その答えがどこに反映されるかを整理します。

CI やスクリプトから非対話で作るときはフラグで指定します。npm create 経由では -- の後にフラグを置きます。

npm create tauri-app@latest my-app -- \
  --template react-ts --manager npm \
  --identifier com.example.myapp --yes

--template には vanilla-ts, vue-ts, svelte-ts, react-ts, solid-ts, angular, yew, leptos など (JS 系は -ts なしの JavaScript 版もあり) を指定できます。

生成されるファイル (react-ts の場合)

my-app/
├── index.html / src/            # Vite の通常の React プロジェクト
├── vite.config.ts               # port 1420 固定、src-tauri を watch 除外
├── package.json                 # @tauri-apps/api, @tauri-apps/cli, plugin-opener
└── src-tauri/
    ├── Cargo.toml               # tauri, tauri-build, tauri-plugin-opener, serde
    ├── build.rs                 # tauri_build::build() を呼ぶだけ
    ├── tauri.conf.json          # identifier, ウィンドウ, build コマンド, bundle
    ├── capabilities/default.json# main ウィンドウに core:default と opener:default
    ├── icons/                   # 各 OS 用アイコン (tauri icon で差し替え)
    └── src/main.rs, lib.rs      # main.rs は my_app_lib::run() を呼ぶだけ。編集は lib.rs

cd my-app
npm install
npm run tauri dev

2. 既存の Vite / React プロジェクトに tauri init で追加する

手順 1: CLI と API パッケージを追加

npm install -D @tauri-apps/cli@latest
npm install @tauri-apps/api@latest

package.json の scripts に "tauri": "tauri" を追加しておくと、以後 npm run tauri <subcommand> で CLI を呼べます。

手順 2: tauri init を実行

npx tauri init

同じ内容は --frontend-dist や --dev-url などのフラグでも渡せ、--ci で質問を省略できます。

手順 3: vite.config.ts を Tauri 向けに調整

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  clearScreen: false,          // Rust のエラーが Vite の画面クリアで消えないように
  server: {
    port: 5173,
    strictPort: true,          // ポートが埋まっていても別ポートに逃げない
    watch: { ignored: ['**/src-tauri/**'] },
  },
  envPrefix: ['VITE_', 'TAURI_ENV_*'],
});

strictPort: true が重要です。Vite が 5174 に逃げると devUrl と食い違い、ウィンドウが真っ白になります。

3. identifier の決め方

identifier は逆ドメイン形式 (com.example.myapp) の文字列で、macOS のバンドル ID、Windows のインストーラーやレジストリ、各 OS のアプリデータ保存先 (~/Library/Application Support/<identifier> や %APPDATA%\<identifier>) に使われます。

• 使える文字は英数字・ハイフン・ピリオドのみ。既定値 com.tauri.dev のままだと tauri build が拒否する。
• 自分が管理するドメインを逆順にするのが慣例。持っていなければ io.github.<ユーザー名>.<アプリ名> が無難。
• リリース後に変えない。別アプリ扱いになり、保存済み設定の場所が変わる。
• Android / iOS 展開の予定があるならハイフンは避ける (Android のパッケージ名規則)。

動作確認

npm run tauri dev で Vite が起動し、続いて Rust のコンパイルが走ってウィンドウが開けば成功です。tauri init で後付けした場合、capabilities/default.json は core:default のみで生成されるため、@tauri-apps/api の invoke は使えますがプラグイン系 API は個別に権限追加が必要です。

よくあるエラーと対処法

npm create tauri-app で --template が無視される

npm では npm create <pkg> -- <args> の -- が必須です。pnpm / yarn では -- を付けません。

tauri init 後にウィンドウが真っ白

devUrl と Vite の実際のポートが違うのが典型です。vite.config.ts に strictPort: true を付け、build.devUrl と揃えます。Next.js などポート 3000 のフレームワークも同様です。

You must change the bundle identifier in tauri.conf.json > identifier という趣旨のエラー

identifier が既定値の com.tauri.dev のままです。上記の決め方に従って書き換えます。

注意点

• Git で除外するのは src-tauri/target/ と src-tauri/gen/schemas/ です（gen/ 全体ではありません）。create-tauri-app は src-tauri/.gitignore にこの 2 つを書きますが、tauri init は既存の .gitignore を変更しないので自分で足します。
• frontendDist は tauri.conf.json からの相対パスです。プロジェクト直下の dist は ../dist になります。

関連レシピ

• Tauri v2 CLI ツールをインストールする
• Tauri プロジェクトのディレクトリ構成
• tauri.conf.json の基本設定
• 開発サーバーの起動とデバッグ
• Git の設定と .gitignore を適用する