Tauri for desktop apps: a practical guide for developers

Tauri for desktop apps: a practical guide for developers

You've built web apps that work well, but now you need a desktop presence without the bloat of Electron. Tauri for desktop apps solves this by pairing a lightweight web frontend with a Rust backend, delivering production-ready applications that consume a fraction of traditional electron frameworks. On Day 47 of our Rust journey, we'll explore how to architect, build, and ship real desktop applications using Tauri.

Why Tauri matters for your team

Electron revolutionized desktop development by letting web developers build cross-platform apps. However, every Electron app ships with a full Chromium browser and Node.js runtime. In practice, a minimal Electron app weighs 150–200 MB. For a simple settings panel or admin tool, that's overkill.

Tauri takes a different approach. Instead of bundling a browser, it uses the system's native webview—WebKit on macOS, WebView2 on Windows, and GTK on Linux. Your frontend is still HTML, CSS, and JavaScript (or TypeScript, React, Vue, whatever you prefer), but the backend is Rust compiled directly to native machine code. The result is typically 10–50 MB per app, instant startup, and native performance characteristics.

For our teams building trading dashboards, inventory management systems, and internal tooling, Tauri has replaced Electron as the default choice. The security model is stricter, the bundle size is smaller, and the native system integration is seamless.

Web frontend, Rust backend

The architecture of a Tauri application is elegantly simple. Your frontend lives in a web folder—React, Vue, Svelte, plain HTML, doesn't matter. Your Rust code lives in the src-tauri directory. Communication between them happens through a well-defined IPC (inter-process communication) layer.

Let's build a concrete example: a file indexing tool that scans a directory and displays metadata.

First, initialize a Tauri project:

cargo install tauri-cli
cargo tauri init

This scaffolds a Rust workspace with a frontend template and a minimal Tauri app setup. The key entry point is src-tauri/src/main.rs:

#![cfg_attr(all(not(debug_assertions), target_os = "windows"), windows_subsystem = "windows")]

use tauri::Manager;
use std::fs;
use serde::{Deserialize, Serialize};

#[derive(Serialize, Deserialize)]
struct FileEntry {
    name: String,
    size: u64,
    is_dir: bool,
}

#[tauri::command]
async fn list_files(path: String) -> Result, String> {
    let entries = fs::read_dir(path)
        .map_err(|e| e.to_string())?
        .filter_map(Result::ok)
        .filter_map(|entry| {
            let metadata = entry.metadata().ok()?;
            Some(FileEntry {
                name: entry.file_name().to_string_lossy().to_string(),
                size: metadata.len(),
                is_dir: metadata.is_dir(),
            })
        })
        .collect();
    
    Ok(entries)
}

fn main() {
    tauri::Builder::default()
        .invoke_handler(tauri::generate_handler![list_files])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

On the frontend side (React example), you'd invoke this command like so:

import { invoke } from '@tauri-apps/api/tauri';

async function handleListFiles(path: string) {
  try {
    const files = await invoke('list_files', { path });
    setFileList(files);
  } catch (error) {
    console.error('Error listing files:', error);
  }
}

Notice the symmetry: one Rust function decorated with #[tauri::command], called from JavaScript via invoke(). The serialization and type safety are handled automatically. For our trading systems, we've used this pattern to keep heavy computation (order processing, market data aggregation) in Rust while keeping the UI responsive with React.

The flow is:

1. User clicks a button in the React UI
2. Frontend calls invoke('list_files', { path })
3. Tauri serializes to JSON, sends to Rust
4. Rust executes the command, returns result
5. Tauri serializes result back to JSON, sends to JavaScript
6. Frontend receives promise resolution with typed data

For database-backed applications, you might have the Rust layer handle all SQLite or PostgreSQL communication, exposing only the business logic to the frontend.

Much smaller than Electron apps

Bundle size matters. A 200 MB app is annoying to distribute, painful for users on limited connections, and a nightmare for deployment at scale. We've measured production Tauri apps at 15–35 MB versus Electron apps at 150–250 MB for the same feature set.

This isn't theoretical. On a ride-hailing platform, we shipped an internal operations dashboard. The Electron version was 180 MB. We rewrote it in Tauri and got it down to 22 MB. Download time for new users dropped from 3 minutes to 20 seconds on a typical office network.

The size difference comes from several factors:

• No bundled Chromium or Node.js runtime
• Native OS webview is system-provided and typically cached
• Rust binary is compiled to native code (no interpreter overhead)
• Dependencies are statically linked; unused code is stripped by the linker

To keep your Tauri app lean:

• Minimize frontend dependencies. Tauri works well with minimal frameworks.
• Use Cargo's strip = true in release profiles to remove debug symbols.
• Build with cargo build --release and enable LTO (Link Time Optimization) in Cargo.toml:

[profile.release]
lto = true
strip = true
codegen-units = 1

For a SaaS admin panel we built, we achieved a 9 MB distributable, making it feasible to ship updates hourly without user friction.

Secure IPC commands

The biggest risk in any desktop app is the bridge between frontend and backend. JavaScript runs in a sandboxed context, but if you're not careful, you can expose dangerous operations to untrusted code.

Tauri's command system enforces explicit allowlists. Every command you expose must be declared in your tauri.conf.json:

{
  "tauri": {
    "allowlist": {
      "fs": {
        "readDir": true,
        "readFile": true
      }
    }
  }
}

By default, everything is denied. You must opt-in to each capability. This is a significant security improvement over Electron, where Node.js context is often accessible from the renderer.

For our e-commerce checkout system, we wanted the frontend to call a Rust function that validates payment data against our backend API. We defined it like this:

#[tauri::command]
async fn validate_payment(
    card_token: String,
    amount: i32,
    customer_id: String,
) -> Result {
    // Rust code validates card token against payment processor
    // Returns early if token format is invalid
    if card_token.len() != 32 {
        return Err("Invalid token format".to_string());
    }
    
    // Call backend API with proper error handling
    let response = reqwest::Client::new()
        .post("https://api.internal/validate")
        .json(&serde_json::json!({
            "token": card_token,
            "amount": amount,
            "customer_id": customer_id,
        }))
        .send()
        .await?;
    
    // Deserialize and validate response
    let result: PaymentValidation = response.json().await?;
    Ok(result)
}

The frontend never touches the payment processor directly. The Rust backend handles authentication, encryption, and validation. This is far safer than Electron, where you'd have to carefully police Node.js module access.

Additional security measures:

• Always validate input in Rust. Never trust data from JavaScript.
• Use Tauri's #[tauri::command] macro, which enforces serialization.
• Enable the windows security sandbox on Windows via tauri.conf.json.
• Keep your allowlist minimal. Remove capabilities you don't use.
• For sensitive operations (database writes, API calls), authenticate at the Rust layer, not the frontend.

Mobile support in Tauri 2

Tauri 1 was desktop-only. Tauri 2, released recently, brings experimental iOS and Android support. This doesn't mean write-once-run-anywhere—mobile development is still distinct—but it means you can share significant code between platforms.

A Tauri 2 project can now target web, desktop, and mobile from the same codebase. The Rust backend remains identical. The frontend can use platform-conditional logic to adapt the UI for touch screens and mobile navigation patterns.

For our travel platform, this has been transformative. We have a core Rust module that handles itinerary management and validation. It's compiled for iOS and Android via Tauri 2, for web via WebAssembly, and for desktop via Tauri desktop. The business logic is write-once; the UI adapts per platform.

To set up a mobile target in Tauri 2:

cargo tauri mobile init

This generates iOS and Android project templates. You still write Rust commands the same way, but they're now called from Swift, Kotlin, or React Native frontends. The serialization and type safety remain intact.

A few practical notes on mobile:

• Mobile deployment requires signing certificates and app store submission. Tauri helps, but it's not frictionless.
• Performance profiling is essential. Mobile CPUs and memory are more constrained than desktops.
• File system access is more restricted on iOS and Android. Tauri's allowlist enforces these constraints natively.
• The feature set is still evolving. Check the Tauri docs before committing to mobile for production.

Common mistakes

Mistake 1: Blocking the main thread in Rust commands. If you call a slow Rust function from the frontend, the UI will freeze. Always use async fn and offload heavy work to a background thread pool if needed. For database queries that take more than 100ms, we spawn them on Tokio.

Mistake 2: Forgetting to add allowlist entries. You write a Rust command, wire it up, but it fails at runtime. Tauri denies it because you didn't add it to tauri.conf.json. Always check your allowlist first.

Mistake 3: Assuming type safety across the bridge. JSON serialization is lossy. A large integer in JavaScript may round-trip incorrectly. Use serde carefully and test at the boundaries.

Mistake 4: Shipping with debug symbols. A release build without stripping can be 50+ MB. Always strip and enable LTO in production builds.

Key takeaways

• Tauri for desktop apps pairs a web frontend with a Rust backend, offering a clean separation of concerns and explicit IPC boundaries.
• Bundle sizes are 10–20% of Electron equivalents because Tauri uses native OS webviews instead of bundling a browser.
• Security is enforced by default through strict allowlists. Commands must be explicitly opted into, preventing accidental exposure of dangerous APIs.
• Tauri 2 adds experimental mobile support, allowing you to share Rust business logic across desktop, web, iOS, and Android targets.
• Always validate input at the Rust boundary, use async commands to prevent UI blocking, and keep your allowlist minimal.
• For internal tools, dashboards, and small-to-medium desktop apps, Tauri is now the default choice over Electron on our team.