Home
back

Tauri 環境構築、Rust React

id: 198, 2025-05-24

### 音声概要

・AIで生成された 音声概要になります。

### 概要

  • Tauri アプリ作成 初心者の メモになります。
  • Windows 環境になります。

### 構成

  • Tauri
  • React 18

### 関連

### 環境構築

  • 上記ページの、手順で　追加進めました。
  • Microsoft C++ Build Tools
  • WebView2 (win 11 は不要みたいでした)
  • Rust
  • node 20使用しました。
winget install --id Rustlang.Rustup

rustup default stable-msvc

### tauri アプリ作成開始

  • React 選択しました。
npm create tauri-app@latest
  • msvc 設定
rustup default stable-msvc
  • dev-start
npm install
npm run tauri dev
  • tauri desktop 画面表示されました。

tauri インストーラー　作成　

npm run tauri build
  • tauri インストーラー　作成　, 下記に作成されました。
  • 約 9MB
tauri-app\src-tauri\target\release\tauri-app.exe

### 補足

  • プロジェクト内のディスクサイズ , target下　6.9GB
  • src-tauri/target/debug : 4.5 GB
  • src-tauri/target/release : 1.4 GB
  • 一度ビルドすると、ファイルサイズが大きい。空き容量が少ない場合 圧迫しそう。
  • ブラウザ不要で、デスクトップ　アプリ作成できのは良さそうです。
  • Rustコード書かなくても、実装できそうでした。

Tauri + React + d1 + CF-workers 何か作る。

  • Tauri + React 続編になります。
  • D1 + workers で、 DB連携
  • 前の、生成AI React出力を複製
  • workers設置の、API連携する。

### 構成

  • Tauri
  • React 18
  • workers
  • D1
  • tailwindcss : 4.0.0-beta.8
  • 一部ライブラリ追加
npm i axios zod

npm install tailwindcss@next @tailwindcss/vite@next
  • 書いたコード

https://github.com/kuc-arc-f/tauri_1ex/tree/main/tauri-app

Tauri + Svelte の例

  • Tauri + React 続編で、Svelte画面になります。

### 構成

  • Tauri
  • Svelte
  • node 20
  • windows 11

### 追加手順は、 Reactと同様です。

npm create tauri-app@latest

npm install
npm run tauri dev
  • build
npm run tauri build
  • d1 + workers TODOも、実装できました。