How We Built a Cross-Platform Desktop App with Tauri 2.0 and SvelteKit 2.5 That Hit 10k Downloads in 1 Month

// src-tauri/src/main.rs
// Tauri 2.0 stable entry point with SvelteKit 2.5 integration
// Requires tauri 2.0.0, tauri-build 2.0.0, sveltekit-adapter-tauri 2.1.0
use tauri::{
    command, Builder, Manager, Runtime, Window, WindowEvent,
    ipc::{Channel, InvokeError},
};
use serde::{Deserialize, Serialize};
use std::fs;
use std::path::PathBuf;
use std::sync::Mutex;

// Application state shared across Tauri commands
struct AppState {
    download_dir: Mutex,
    user_preferences: Mutex,
}

// IPC command argument structs with validation
#[derive(Deserialize)]
struct SaveFileArgs {
    file_name: String,
    content: String,
    overwrite: bool,
}

#[derive(Serialize)]
struct SaveFileResponse {
    success: bool,
    path: Option,
    error: Option,
}

// Tauri command to save user files to the app’s download directory
// Includes input validation, error handling, and state access
#[command]
async fn save_user_file(
    window: Window,
    state: tauri::State<'_, AppState>,
    args: SaveFileArgs,
) -> Result {
    // Validate file name to prevent path traversal attacks
    if args.file_name.contains("..") || args.file_name.contains('/') || args.file_name.contains('\\') {
        return Ok(SaveFileResponse {
            success: false,
            path: None,
            error: Some("Invalid file name: path traversal not allowed".to_string()),
        });
    }

    // Get download directory from app state
    let download_dir = state.download_dir.lock().map_err(|e| {
        InvokeError::from(e.to_string())
    })?;
    let file_path = download_dir.join(&args.file_name);

    // Check overwrite permission if file exists
    if file_path.exists() && !args.overwrite {
        return Ok(SaveFileResponse {
            success: false,
            path: None,
            error: Some(format!("File {} already exists, overwrite not permitted", args.file_name)),
        });
    }

    // Write file content with error handling
    fs::write(&file_path, args.content).map_err(|e| {
        InvokeError::from(format!("Failed to write file: {}", e))
    })?;

    // Emit event to SvelteKit frontend to notify of save completion
    window.emit("file-saved", &file_path.to_string_lossy()).map_err(|e| {
        InvokeError::from(format!("Failed to emit event: {}", e))
    })?;

    Ok(SaveFileResponse {
        success: true,
        path: Some(file_path.to_string_lossy().to_string()),
        error: None,
    })
}

// Tauri command to load user preferences from disk
#[command]
async fn load_preferences(
    state: tauri::State<'_, AppState>,
) -> Result {
    let prefs = state.user_preferences.lock().map_err(|e| InvokeError::from(e.to_string()))?;
    Ok(prefs.clone())
}

fn main() {
    // Initialize app state with default values
    let download_dir = PathBuf::from("downloads");
    fs::create_dir_all(&download_dir).expect("Failed to create download directory");

    let app_state = AppState {
        download_dir: Mutex::new(download_dir),
        user_preferences: Mutex::new(serde_json::json!({
            "theme": "dark",
            "auto_update": true,
            "telemetry": false
        })),
    };

    // Build Tauri app with SvelteKit 2.5 integration
    Builder::default()
        .plugin(tauri_plugin_sveltekit::init()) // SvelteKit 2.5 adapter plugin
        .plugin(tauri_plugin_fs::init()) // File system access plugin
        .plugin(tauri_plugin_updater::init()) // Built-in updater plugin
        .manage(app_state) // Register shared state
        .invoke_handler(tauri::generate_handler![
            save_user_file,
            load_preferences
        ])
        .setup(|app| {
            // Log app version on startup for debugging
            let app_version = app.package_info().version.to_string();
            println!("App started: version {}", app_version);

            // Set up window event listeners for crash reporting
            let window = app.get_window("main").expect("Main window not found");
            window.on_window_event(|event| {
                if let WindowEvent::Destroyed = event {
                    println!("Main window destroyed, cleaning up resources");
                }
            });
            Ok(())
        })
        .run(tauri::generate_context!())
        .expect("Error running Tauri application");
}

<!-- src/routes/+page.svelte -->
<!-- SvelteKit 2.5 + Svelte 5 component for file management UI -->
<!-- Uses Tauri 2.0 IPC to communicate with Rust backend -->
<script>
    import { invoke } from '@tauri-apps/api/core';
    import { emit, listen } from '@tauri-apps/api/event';
    import { onMount } from 'svelte';

    // Svelte 5 runes for reactive state
    let file_name = $state('');
    let file_content = $state('');
    let overwrite = $state(false);
    let save_status = $state(null);
    let saved_files = $state([]);
    let preferences = $state({});
    let is_loading = $state(false);
    let error_message = $state('');

    // Load user preferences on component mount
    onMount(async () => {
        try {
            is_loading = true;
            const prefs = await invoke('load_preferences');
            preferences = prefs;
            // Apply theme from preferences
            document.documentElement.setAttribute('data-theme', prefs.theme || 'light');
        } catch (err) {
            error_message = `Failed to load preferences: ${err}`;
            console.error(error_message);
        } finally {
            is_loading = false;
        }

        // Listen for file-saved events from Tauri backend
        const unlisten = await listen('file-saved', (event) => {
            const saved_path = event.payload;
            saved_files = [...saved_files, saved_path];
            save_status = { success: true, message: `File saved to ${saved_path}` };
            // Clear status after 3 seconds
            setTimeout(() => { save_status = null; }, 3000);
        });

        return () => unlisten();
    });

    // Handle file save action with validation and error handling
    async function handle_save_file() {
        // Client-side validation before sending to backend
        if (!file_name.trim()) {
            error_message = 'File name cannot be empty';
            return;
        }
        if (!file_content.trim()) {
            error_message = 'File content cannot be empty';
            return;
        }

        try {
            is_loading = true;
            error_message = '';
            save_status = null;

            const response = await invoke('save_user_file', {
                file_name: file_name.trim(),
                content: file_content,
                overwrite: overwrite
            });

            if (response.success) {
                save_status = { success: true, message: `File saved successfully to ${response.path}` };
                // Reset form on success
                file_name = '';
                file_content = '';
                overwrite = false;
            } else {
                error_message = response.error || 'Unknown error saving file';
            }
        } catch (err) {
            error_message = `IPC error: ${err.message || err}`;
            console.error('Failed to save file:', err);
        } finally {
            is_loading = false;
        }
    }

    // Handle file content paste from clipboard
    async function handle_paste_content() {
        try {
            const text = await navigator.clipboard.readText();
            file_content = text;
        } catch (err) {
            error_message = 'Failed to access clipboard: ' + err.message;
        }
    }
</script>

<div class="container">
    <h1>File Manager</h1>

    {#if is_loading}
        <div class="loading-spinner">Loading...</div>
    {/if}

    {#if error_message}
        <div class="error-alert" role="alert">
            {error_message}
            <button on:click={() => error_message = ''}>Dismiss</button>
        </div>
    {/if}

    {#if save_status?.success}
        <div class="success-alert" role="alert">
            {save_status.message}
        </div>
    {/if}

    <div class="form-group">
        <label for="file-name">File Name</label>
        <input
            id="file-name"
            type="text"
            bind:value={file_name}
            placeholder="example.txt"
            disabled={is_loading}
        />
    </div>

    <div class="form-group">
        <label for="file-content">File Content</label>
        <textarea
            id="file-content"
            bind:value={file_content}
            rows="10"
            placeholder="Enter file content here..."
            disabled={is_loading}
        ></textarea>
        <button on:click={handle_paste_content} disabled={is_loading}>
            Paste from Clipboard
        </button>
    </div>

    <div class="form-group checkbox">
        <input
            id="overwrite"
            type="checkbox"
            bind:checked={overwrite}
            disabled={is_loading}
        />
        <label for="overwrite">Overwrite existing files</label>
    </div>

    <button
        on:click={handle_save_file}
        disabled={is_loading || !file_name.trim() || !file_content.trim()}
        class="primary-button"
    >
        {is_loading ? 'Saving...' : 'Save File'}
    </button>

    {#if saved_files.length > 0}
        <div class="saved-files">
            <h2>Recently Saved Files</h2>
            <ul>
                {#each saved_files as file}
                    <li>{file}</li>
                {/each}
            </ul>
        </div>
    {/if}
</div>

<style>
    .container {
        max-width: 800px;
        margin: 0 auto;
        padding: 2rem;
    }
    .form-group {
        margin-bottom: 1.5rem;
    }
    input, textarea {
        width: 100%;
        padding: 0.5rem;
        margin-top: 0.25rem;
        border: 1px solid #ccc;
        border-radius: 4px;
    }
    .primary-button {
        background-color: #007acc;
        color: white;
        padding: 0.75rem 1.5rem;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }
    .primary-button:disabled {
        background-color: #ccc;
        cursor: not-allowed;
    }
    .error-alert {
        background-color: #fee;
        color: #c00;
        padding: 1rem;
        border-radius: 4px;
        margin-bottom: 1rem;
    }
    .success-alert {
        background-color: #efe;
        color: #0c0;
        padding: 1rem;
        border-radius: 4px;
        margin-bottom: 1rem;
    }
</style>

// src/routes/api/update/+server.ts
// SvelteKit 2.5 API route to handle app update checks via Tauri 2.0 updater
// Requires tauri-plugin-updater 2.0.0, semver 1.0.0
import { json, error } from '@sveltejs/kit';
import type { RequestHandler } from './$types';
import { invoke } from '@tauri-apps/api/core';
import semver from 'semver';

// Current app version (injected at build time by Tauri)
const CURRENT_VERSION = __TAURI__?.__VERSION__ || '0.0.0';

// Update manifest endpoint (served from our CDN)
const UPDATE_MANIFEST_URL = 'https://updates.our-app.com/manifest.json';

interface UpdateManifest {
    version: string;
    notes: string;
    platforms: {
        windows: { url: string; signature: string };
        macos: { url: string; signature: string };
        linux: { url: string; signature: string };
    };
}

/** GET handler to check for available updates */
export const GET: RequestHandler = async ({ request, url }) => {
    try {
        // Check if user has disabled updates in preferences
        const prefs = await invoke('load_preferences');
        if (prefs.auto_update === false) {
            return json({ update_available: false, reason: 'Auto-update disabled' });
        }

        // Fetch update manifest from CDN with timeout
        const controller = new AbortController();
        const timeout = setTimeout(() => controller.abort(), 5000);
        const manifestResponse = await fetch(UPDATE_MANIFEST_URL, {
            signal: controller.signal,
            headers: {
                'User-Agent': `TauriSvelteApp/${CURRENT_VERSION}`,
            },
        });
        clearTimeout(timeout);

        if (!manifestResponse.ok) {
            throw error(502, `Failed to fetch update manifest: ${manifestResponse.statusText}`);
        }

        const manifest: UpdateManifest = await manifestResponse.json();

        // Validate manifest structure
        if (!manifest.version || !manifest.platforms) {
            throw error(500, 'Invalid update manifest format');
        }

        // Compare versions using semver
        const update_available = semver.gt(manifest.version, CURRENT_VERSION);
        if (!update_available) {
            return json({ update_available: false, current_version: CURRENT_VERSION });
        }

        // Get platform-specific update info
        const user_agent = request.headers.get('user-agent') || '';
        let platform: keyof UpdateManifest['platforms'] = 'linux';
        if (user_agent.includes('Windows')) platform = 'windows';
        else if (user_agent.includes('Mac')) platform = 'macos';

        const platform_update = manifest.platforms[platform];
        if (!platform_update) {
            return json({ update_available: false, reason: `No update available for ${platform}` });
        }

        // Return update info to frontend
        return json({
            update_available: true,
            current_version: CURRENT_VERSION,
            new_version: manifest.version,
            release_notes: manifest.notes,
            download_url: platform_update.url,
            signature: platform_update.signature,
            platform: platform,
        });
    } catch (err) {
        console.error('Update check failed:', err);
        if (err instanceof Error && err.name === 'AbortError') {
            return error(504, 'Update check timed out');
        }
        return error(500, `Update check failed: ${err.message}`);
    }
};

/** POST handler to trigger update download and install */
export const POST: RequestHandler = async ({ request }) => {
    try {
        const body = await request.json();
        const { download_url, signature } = body;

        if (!download_url || !signature) {
            return error(400, 'Missing download_url or signature');
        }

        // Invoke Tauri updater to download and install
        const update_result = await invoke('install_update', {
            url: download_url,
            signature: signature,
        });

        return json({ success: true, result: update_result });
    } catch (err) {
        console.error('Update install failed:', err);
        return error(500, `Update install failed: ${err.message}`);
    }
};

// Example shared state registration in main.rs
struct AppState {
    api_client: Mutex,
    download_dir: RwLock,
}

fn main() {
    let state = AppState {
        api_client: Mutex::new(reqwest::Client::new()),
        download_dir: RwLock::new(PathBuf::from("downloads")),
    };

    Builder::default()
        .manage(state)
        .invoke_handler(tauri::generate_handler![my_command])
        .run(tauri::generate_context!())
        .expect("Failed to run app");
}

// svelte.config.js prerender configuration
export const prerender = {
    entries: ['*'], // Prerender all routes
    crawl: true, // Auto-discover linked routes
    concurrency: 4, // Parallel prerender jobs
    fallback: 'index.html', // Fallback for non-prerendered routes
};

// Initialize updater in main.rs
use tauri_plugin_updater::UpdaterPlugin;

fn main() {
    Builder::default()
        .plugin(UpdaterPlugin::new(
            "https://updates.our-app.com/manifest.json", // Update manifest URL
            |update| {
                // Custom update prompt logic
                update.download_and_install().expect("Failed to install update");
            }
        ))
        .run(tauri::generate_context!())
        .expect("Failed to run app");
}