Claude Code के साथ Tauri desktop app development: Vite, Rust commands और permissions

Tauri web UI को Windows, macOS और Linux desktop app में बदलने का framework है. UI React, Svelte या किसी और frontend stack में रह सकती है, और native काम Rust side पर होता है. यही separation Claude Code के लिए उपयोगी है, क्योंकि आप एक बार में सिर्फ UI, सिर्फ Rust command, सिर्फ capability या सिर्फ test fix मांग सकते हैं.

इस guide में हम Tauri v2 की छोटी local notes app को example मानेंगे. इसमें कब Tauri चुनना चाहिए, Vite + React या Svelte setup, Rust commands, frontend से invoke, file system permissions, build/test commands, permission review prompts, practical use cases और common pitfalls शामिल हैं.

Official references: Tauri Create a Project, Calling Rust from the Frontend, Tauri Capabilities, File System plugin, Vite Getting Started, Cargo test, Claude Code setup. Rust basics के लिए Claude Code Rust development और comparison के लिए Electron desktop app guide देखें.

Tauri कब चुनें

Tauri तब अच्छा है जब app को local files, offline काम, system dialogs या desktop distribution चाहिए, लेकिन UI बनाने के लिए web stack रखना है. उदाहरण: private notes app, internal CSV converter, developer log viewer, local Markdown tool, field inspection app या inventory app.

अगर app सिर्फ login करके server API call करती है और local OS capability नहीं चाहिए, तो normal web app या PWA सरल हो सकती है. Tauri चुनने का मतलब Rust toolchain, packaging, signing, installer, OS differences, app identifier और update plan संभालना भी है.

Claude Code को शुरुआत में ऐसा prompt दें:

We are building a Tauri v2 local notes app.
Do not implement yet.
Split the work into React UI, Rust commands, capabilities, and build/test checks.
File access must stay inside the app data directory.
Do not propose arbitrary path reads or broad file-system permissions.

इससे model पहले security boundary समझता है, फिर code लिखता है.

Architecture boundary

Frontend को OS सीधे नहीं छूना चाहिए. वह @tauri-apps/api/core के invoke से Rust command बुलाता है. Rust input validate करता है, local resource access करता है और typed result लौटाता है.

flowchart LR
  UI["React या Svelte UI"] --> Invoke["invoke from @tauri-apps/api/core"]
  Invoke --> Command["Rust command"]
  Command --> Guard["path allowlist and validation"]
  Guard --> AppData["app data directory"]
  Command --> Result["typed result"]
  Result --> UI
  Capability["Tauri capability"] --> UI

एक जरूरी बात: Tauri capabilities frontend के Tauri APIs और plugins को limit करती हैं, लेकिन आपकी custom Rust commands को अपने-आप safe नहीं बनातीं. अगर Rust command arbitrary path लेकर file लिख देती है, तो risk बना रहता है. इसलिए capability और Rust path validation दोनों review करने होते हैं.

React या Svelte setup

New project के लिए official create-tauri-app सबसे आसान रास्ता है. React या Svelte चुनें और TypeScript flavor लें.

npm create tauri-app@latest taskdesk
cd taskdesk
npm install
npm run tauri dev

Existing Vite project में पहले frontend बनाएं, फिर Tauri init करें. Vite docs npm create vite@latest बताते हैं और current Vite को Node.js 20.19+ या 22.12+ चाहिए.

node --version
npm create vite@latest taskdesk -- --template react-ts
cd taskdesk
npm install
npm install -D @tauri-apps/cli@latest
npm install @tauri-apps/api@latest
npx tauri init
npx tauri dev

Svelte के लिए template बदलें:

npm create vite@latest taskdesk -- --template svelte-ts

Setup के बाद Claude Code से पहले files पढ़वाएं:

Read package.json, tauri.conf.json, and src-tauri/src/lib.rs.
Summarize the project layout and scripts.
Do not modify files yet.

Minimal Tauri config

tauri.conf.json Vite dev server, frontend build output, window और capability को जोड़ता है.

{
  "$schema": "https://schema.tauri.app/config/2",
  "productName": "TaskDesk",
  "version": "0.1.0",
  "identifier": "com.example.taskdesk",
  "build": {
    "beforeDevCommand": "npm run dev",
    "devUrl": "http://localhost:5173",
    "beforeBuildCommand": "npm run build",
    "frontendDist": "../dist"
  },
  "app": {
    "windows": [
      {
        "title": "TaskDesk",
        "width": 1000,
        "height": 700
      }
    ],
    "security": {
      "capabilities": ["main-capability"]
    }
  },
  "bundle": {
    "active": true,
    "targets": "all"
  }
}

Review में identifier, devUrl और frontendDist जरूर देखें. गलत port या गलत build path पर Claude Code अक्सर दूसरी जगह fix ढूंढने लगता है.

Rust command और invoke

Notes app में read, write और list commands चाहिए. नीचे example path validation दिखाता है: absolute path, .. और app data से बाहर जाने वाली path reject होती है.

// src-tauri/src/note_commands.rs
use std::{
    fs,
    path::{Component, Path, PathBuf},
};
use tauri::{AppHandle, Manager};

fn reject_unsafe_relative(path: &Path) -> Result<(), String> {
    for component in path.components() {
        match component {
            Component::Normal(_) | Component::CurDir => {}
            _ => return Err("use a relative path inside app data".to_string()),
        }
    }
    Ok(())
}

fn app_data_root(app: &AppHandle) -> Result<PathBuf, String> {
    let root = app
        .path()
        .app_data_dir()
        .map_err(|error| format!("failed to get app data dir: {error}"))?;
    fs::create_dir_all(&root).map_err(|error| format!("failed to create app data dir: {error}"))?;
    root.canonicalize()
        .map_err(|error| format!("failed to resolve app data dir: {error}"))
}

#[tauri::command]
pub fn read_note(app: AppHandle, path: String) -> Result<String, String> {
    let root = app_data_root(&app)?;
    let requested = Path::new(&path);
    reject_unsafe_relative(requested)?;
    let full = root.join(requested).canonicalize().map_err(|error| error.to_string())?;
    if !full.starts_with(&root) {
        return Err("path escapes app data".to_string());
    }
    fs::read_to_string(full).map_err(|error| format!("failed to read note: {error}"))
}

Frontend wrapper छोटा रखें:

// src/lib/notesApi.ts
import { invoke } from "@tauri-apps/api/core";

export const notesApi = {
  read(path: string) {
    return invoke<string>("read_note", { path });
  },
  write(path: string, content: string) {
    return invoke<void>("write_note", { path, content });
  },
};

Permissions

अगर frontend सीधे File System plugin use करता है, तो capability narrow रखें.

{
  "$schema": "../gen/schemas/desktop-schema.json",
  "identifier": "main-capability",
  "description": "Main window permissions for TaskDesk.",
  "windows": ["main"],
  "permissions": [
    "core:default",
    "fs:default",
    "fs:allow-app-read-recursive",
    "fs:allow-app-write-recursive"
  ]
}

इस article के sample में files Rust command से access होती हैं, इसलिए frontend को Downloads या Documents folder की broad permission देने की जरूरत नहीं है. Review prompt:

Review only. Do not edit files.
Inspect src-tauri/capabilities and src-tauri/src/note_commands.rs.
List every frontend-exposed API and every Rust command.
State which file paths each can touch.
Flag absolute paths, parent-directory traversal, broad wildcards, and writes outside app data.
Suggest the smallest permission set that still supports the feature.

Build, tests और use cases

Checks को अलग रखें:

npm run build
cd src-tauri
cargo test
cd ..
npm run tauri build

Path validation का छोटा Rust test:

#[cfg(test)]
mod tests {
    use super::reject_unsafe_relative;
    use std::path::Path;

    #[test]
    fn rejects_parent_directory() {
        assert!(reject_unsafe_relative(Path::new("../secret.txt")).is_err());
    }
}

तीन strong use cases हैं: local notes, CSV/Markdown converter और developer log viewer. चौथा है offline field app, जैसे inventory, inspection या event check-in. Common pitfalls हैं capability को Rust security समझ लेना, Claude Code को पूरी app एक साथ देना, dev config को production में छोड़ना, सिर्फ एक OS पर test करना और convenience के लिए file permissions बहुत wide खोल देना.

CTA और tested note

Repeatable workflow चाहिए तो ClaudeCodeLab products and templates देखें. Team rollout, real repository permissions, CLAUDE.md और review prompts के लिए Claude Code training and consultation बेहतर है.

इस workflow को small notes app पर आजमाने पर सबसे stable order था: पहले Rust path boundary, फिर TypeScript invoke wrapper, फिर capability review. UI से शुरू करना तेज लगता है, लेकिन storage और permissions साफ होते ही rewrite बढ़ता है.