Desktop App

Desktop App Skill

Build cross-platform desktop applications

Frameworks

Tauri (Recommended)

Lightweight, secure, Rust-based.

# Create new Tauri project
npm create tauri-app
cd my-app
npm run tauri dev

Pros:

• Small bundle size (~5MB)
• High performance
• Better security
• Use any frontend framework

Electron

Chromium-based, widely used.

# Create with electron-forge
npm init electron-app@latest my-app
cd my-app
npm start

Pros:

• Mature ecosystem
• Large community
• Easy to learn
• Full Node.js access

Project Structure (Tauri)

my-app/
├── src/                  # Frontend (React, Vue, etc.)
│   ├── App.tsx
│   └── main.tsx
├── src-tauri/            # Rust backend
│   ├── src/
│   │   └── main.rs
│   ├── tauri.conf.json
│   └── Cargo.toml
└── package.json

Key Features

System Tray

// src-tauri/src/main.rs
use tauri::SystemTray;

fn main() {
    let tray = SystemTray::new();

    tauri::Builder::default()
        .system_tray(tray)
        .run(tauri::generate_context!())
        .expect("error");
}

Native Dialogs

// Frontend
import { open, save } from '@tauri-apps/api/dialog';

async function openFile() {
  const selected = await open({
    filters: [{ name: 'Text', extensions: ['txt'] }]
  });
  return selected;
}

File System

import { readTextFile, writeTextFile } from '@tauri-apps/api/fs';

async function saveFile(path: string, content: string) {
  await writeTextFile(path, content);
}

Deployment

• macOS: .dmg, .app
• Windows: .msi, .exe
• Linux: .deb, .AppImage

# Build for all platforms
npm run tauri build