Skip to content
Learni
Voir tous les tutoriels
Développement Desktop

Comment créer une application desktop avec Tauri en 2026

18 minBEGINNER
Read in English

Introduction

Tauri permet de créer des applications desktop natives en combinant un backend Rust sécurisé et un frontend web moderne. Contrairement à Electron, les applications Tauri sont beaucoup plus légères et utilisent les webviews du système d'exploitation. Ce tutoriel vous guide pas à pas pour construire votre première application en 2026. Vous apprendrez à initialiser un projet, à exposer des commandes Rust et à builder l'exécutable final. Chaque étape inclut du code complet et fonctionnel que vous pouvez copier directement.

Prérequis

  • Node.js 20+ et npm
  • Rust (via rustup)
  • Connaissances de base en JavaScript/TypeScript
  • Un éditeur comme VS Code

Installation des dépendances

terminal
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
npm install -g @tauri-apps/cli

Cette commande installe Rust via rustup et l'outil CLI Tauri globalement. Vérifiez l'installation avec 'tauri --version' avant de continuer.

Création du projet Tauri

terminal
npm create tauri-app@latest my-tauri-app
cd my-tauri-app
npm install

Cette commande initialise un projet Tauri avec Vite comme frontend par défaut. Le dossier src-tauri contient le code Rust.

Configuration principale

src-tauri/tauri.conf.json
{
  "productName": "My Tauri App",
  "version": "0.1.0",
  "identifier": "com.example.myapp",
  "build": {
    "beforeBuildCommand": "npm run build",
    "beforeDevCommand": "npm run dev",
    "devUrl": "http://localhost:1420",
    "frontendDist": "../dist"
  },
  "app": {
    "windows": [
      {
        "title": "My Tauri App",
        "width": 800,
        "height": 600
      }
    ],
    "security": {
      "csp": null
    }
  },
  "bundle": {
    "active": true,
    "targets": "all",
    "icon": [
      "icons/32x32.png",
      "icons/128x128.png",
      "icons/128x128@2x.png",
      "icons/icon.icns",
      "icons/icon.ico"
    ]
  }
}

Ce fichier JSON définit le nom, la fenêtre, les commandes de build et les icônes. Modifiez l'identifiant et les dimensions selon vos besoins.

Commande Rust simple

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

#[tauri::command]
fn greet(name: &str) -> String {
    format!("Hello, {}! Welcome to Tauri.", name)
}

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

La macro #[tauri::command] expose la fonction greet au frontend. generate_handler! l'enregistre pour permettre les appels depuis JavaScript.

Appel depuis le frontend

src/App.tsx
import { invoke } from '@tauri-apps/api/core';

function App() {
  const handleGreet = async () => {
    const result = await invoke<string>('greet', { name: 'Utilisateur' });
    alert(result);
  };

  return (
    <div>
      <button onClick={handleGreet}>Dire bonjour</button>
    </div>
  );
}

export default App;

invoke permet d'appeler la commande Rust depuis le frontend. Le type générique assure la sécurité des types.

Bonnes pratiques

  • Toujours valider les entrées dans les commandes Rust
  • Utiliser des permissions minimales dans tauri.conf.json
  • Séparer clairement le code frontend et backend
  • Tester régulièrement sur les trois plateformes cibles
  • Garder les dépendances Rust à jour

Erreurs courantes à éviter

  • Oublier d'ajouter la commande dans generate_handler!
  • Ne pas installer les dépendances système requises sur Linux
  • Utiliser des versions incompatibles de Node et Rust
  • Ignorer les erreurs de build liées aux icônes manquantes

Pour aller plus loin

Explorez les plugins Tauri pour ajouter des fonctionnalités avancées comme les notifications ou le stockage local. Découvrez nos formations Learni pour maîtriser Tauri et Rust en profondeur.