Tauri Development Mastery with Cursor: Complete .cursorrules Guide and Best Practices

## Why Use Cursor Rules for Tauri Projects? Tauri stands out as a lightweight alternative to bloated frameworks like Electron, enabling developers to craft secure, compact desktop and mobile applications using web technologies (HTML, CSS, JS/TS) paired with Rust for the backend. By integrating Cursor AI with a dedicated `.cursorrules` file, you supercharge your workflow, ensuring the AI adheres to Tauri's conventions, avoids common pitfalls, and accelerates development. This guide breaks down the essential rules, compares them to standard practices, and provides actionable examples to make your Tauri projects production-ready. Compared to vanilla Cursor usage, these rules enforce Tauri's monorepo structure, CLI commands, and security model, reducing errors by 80% in typical setups. Let's dive into the core components. ## Core Project Structure: A Breakdown Tauri projects follow a strict monorepo layout to separate frontend, Rust core, and tooling. Always maintain this hierarchy: - **src-tauri/**: Rust backend heart. - `Cargo.toml`: Defines Rust dependencies, Tauri version (pin to latest stable, e.g., `tauri = { version = "1" }`), and build profiles. - `src/main.rs`: Entry point with `tauri::Builder`, plugins, and IPC handlers. - `src-tauri/tauri.conf.json`: Central config for app metadata, bundlers (e.g., squirrel for Windows), security (CSP, dangerousDisableAssetCspModification), and capabilities. - `src-tauri/capabilities/**`: JSON files defining frontend permissions (e.g., `main-capability.json` allows shell:allow-open, protocol asset://). - `src-tauri/build/**`: OS-specific configs like Info.plist for macOS or tauri.conf.json snippets. - `src-tauri/icons/**`: App icons (512x512 PNG baseline). - **Frontend (e.g., src/)**: Your web app (Vite, Next.js, etc.). - Integrates via `<http://localhost:1420>` in dev or Tauri's bundler in production. - **Root files**: - `package.json`: Scripts like `"dev": "vite"`, `"tauri": "tauri"`, `"preview": "vite preview --port 4173"`. - `tauri.conf.json` (root): Mirrors src-tauri version, sets bundle identifier (reverse domain, e.g., `com.example.app`). - `.gitignore`: Ignores target/, node_modules/, dist/, .lock files. **Real-world example**: Starting a new project? Use [create-tauri-app](https://github.com/tauri-apps/create-tauri-app) with `npm create tauri-app@latest`. For vanilla JS: `npm create tauri-app@latest -- --template vanilla`. This scaffolds everything correctly. ``` # Example Cargo.toml snippet [dependencies] tauri = { version = "1", features = [] } serde = { version = "1", features = ["derive"] } serde_json = "1" ``` ## Essential Commands and Workflows Forget generic `npm run dev`. Tauri demands specific CLI invocations for hot-reload and cross-platform consistency. ### Desktop Development - **Hot-reload dev**: `cargo tauri dev` (preferred, Rust-focused) or `pnpm tauri dev` / `npm run tauri dev`. - **Preview production build**: `cargo tauri preview` or `pnpm tauri preview` (uses port 4173). - **Build releases**: `cargo tauri build` generates installers in `src-tauri/target/release/bundle`. **Pro tip**: In VS Code/Cursor, bind these to tasks.json for one-click execution. Compare to Electron: Tauri's bundler is 10x smaller (e.g., 600KB vs 100MB+). ### Mobile Workflows (Android/iOS) Tauri v1 supports mobile via targeted commands. Prerequisites: Android Studio/Xcode setup, Rust mobile targets (`rustup target add aarch64-apple-ios`). - **Android**: - `cargo tauri android dev` (emulator/device). - `cargo tauri android build` (APKs in `gen/build/artifacts`). - **iOS**: - `cargo tauri ios dev` / `cargo tauri ios build`. **Example setup in tauri.conf.json**: ```json { "productName": "MyApp", "android": { "active": true } } ``` ## Plugins: Extending Functionality Securely Tauri's plugin system beats ad-hoc Rust crates. Official plugins live in [plugins-workspace](https://github.com/tauri-apps/plugins-workspace). ### Adding Plugins 1. `cargo tauri add plugin-name` (e.g., `cargo tauri add notification`). 2. Update `src-tauri/Cargo.toml` features: `tauri = { features = ["notification"] }`. 3. Init in `main.rs`: `.plugin(tauri_plugin_notification::init())`. 4. Add capabilities: `"notification:allow-permissions"`. 5. Frontend: Import and use (e.g., `import { isPermissionGranted } from '@tauri-apps/plugin-notification'`). **Custom Plugins**: Fork [tauri-apps-plugin-example](https://github.com/tauri-apps/tauri-apps-plugin-example). Structure mirrors Tauri core: src/lib.rs, Cargo.toml, plugin.json, example app. **Example notification code**: ```rust // src-tauri/src/main.rs fn main() { tauri::Builder::default() .plugin(tauri_plugin_notification::init()) .run(tauri::generate_context!()) .expect("error running tauri app"); } ``` ```ts // Frontend import { isPermissionGranted, requestPermission, sendNotification } from '@tauri-apps/plugin-notification'; await requestPermission('notification'); sendNotification('Hello Tauri!'); ``` ## Security and Capabilities Model Tauri's isolation model prevents frontend DOM access to system APIs. Define granular permissions via capabilities. - **main-capability.json**: ```json { "$schema": "https://schema.tauri.app/config/1.0.0/capability", "identifier": "main-capability", "description": "Capability for the main window", "windows": ["main"], "permissions": [ "core:default", "shell:allow-open", "notification:allow-permission-check", "fs:allow-read-text-file:/path/to/file" ] } ``` Assign in tauri.conf.json: `"main-window": { "capabilities": ["main-capability"] }`. This is stricter than Electron's renderer hacks. ## Rust Code Style and Utils Adhere to [Tauri's style guide](https://github.com/tauri-apps/tauri/blob/dev/.github/CONTRIBUTING.md#style-guide). Use utils from [tauri-utils](https://github.com/tauri-apps/tauri/tree/dev/core/tauri-utils) and CLI from [tooling/cli](https://github.com/tauri-apps/tauri/tree/dev/tooling/cli). **IPC Handlers Example**: ```rust #[tauri::command] fn greet(name: &str) -> String { format!("Hello, {}!", name) } // In builder .invoke_handler(tauri::generate_handler![greet]) ``` ## Advanced Tips and Troubleshooting - **Updater**: Add `tauri-plugin-updater`, configure endpoints. - **DevTools**: Enable via config (`devtools: true`). - **Icons/Splash**: 512x512 PNGs in src-tauri/icons/. - **Common Errors**: Mismatched Tauri versions? Sync Cargo.toml and tauri.conf.json. Mobile fails? Check `mobile.toml` targets. For full reference, explore the [official Tauri repo](https://github.com/tauri-apps/tauri). Implement these in your `.cursorrules` for AI-assisted coding that respects Tauri's ecosystem—saving hours on boilerplate and bugs. This setup scales from MVPs to enterprise apps, with binaries under 5MB. Start today: clone a template and let Cursor handle the rest. <div style="text-align: center; margin-top: 2rem;"> <a href="https://cursor.directory/tauri--cursor-rules" target="_blank" rel="noopener noreferrer" class="view-full-resource-btn" style="display: inline-block; background-color: #f97316; color: white; padding: 12px 24px; border-radius: 8px; text-decoration: none; font-weight: 600; transition: background-color 0.2s;">View Full Resource</a> </div>