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
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
npm install -g @tauri-apps/cliCette 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
npm create tauri-app@latest my-tauri-app
cd my-tauri-app
npm installCette commande initialise un projet Tauri avec Vite comme frontend par défaut. Le dossier src-tauri contient le code Rust.
Configuration principale
{
"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
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
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
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.