🚀 Tauri + Vite + React - Starter Kit Desktop

Application desktop moderne et performante
Combinant React 19, TypeScript, Vite et Tauri 2

Installation • Fonctionnalités • Documentation • Contribution

📖 Table des Matières

À Propos
Technologies
Installation
Utilisation
Fonctionnalités
Structure du Projet
Guide de Développement
Configuration IDE
Contribution
Ressources
Licence
Auteur

🎯 À Propos

Starter kit complet pour créer des applications desktop multiplateformes avec Tauri, React et TypeScript. Ce template démontre la communication entre un frontend React moderne et un backend Rust performant via l'API Tauri IPC.

✨ Points Forts

⚡ Performance native grâce à Rust et Tauri
🎨 Interface moderne avec React 19 et animations fluides
🔒 Sécurité : isolation des contextes d'exécution
📦 Léger : binaires optimisés (< 5 MB)
🌗 Mode sombre automatique
🔄 Hot Reload pour un développement rapide

🚀 Technologies Utilisées

Domaine	Technologie	Version	Description
Frontend	React	19.1.0	Bibliothèque UI moderne
	TypeScript	5.8.3	Typage statique
	Vite	7.0.4	Build tool ultra-rapide
Backend	Rust	1.92.0	Langage système performant
	Tauri	2.9.5	Framework desktop
Styling	CSS	-	CSS personnalisé avec animations

💾 Installation

Prérequis

Assurez-vous d'avoir installé :

Node.js ≥ 18.0
Rust (dernière version stable)
Visual Studio Build Tools (Windows uniquement)

Installation Rapide

# 1. Cloner le repository
git clone https://github.com/michaelgermini/Tauri-Vite-and-React---Application-Desktop.git

# 2. Naviguer dans le dossier
cd Tauri-Vite-and-React---Application-Desktop

# 3. Installer les dépendances
npm install

# 4. Lancer l'application
npm run tauri dev

⏱️ Première compilation : 2-5 minutes (compilation Rust)
Compilations suivantes : < 30 secondes

Scripts Disponibles

Commande	Description
`npm run dev`	Démarre uniquement Vite (frontend)
`npm run tauri dev`	Démarre l'application complète ⭐
`npm run build`	Compile le frontend
`npm run tauri build`	Crée l'exécutable natif
`npm run preview`	Prévisualise le build

🎮 Utilisation

Démarrage

npm run tauri dev

Ce qui se passe :

⚡ Vite démarre sur http://localhost:1420
🦀 Rust compile le backend Tauri
🖥️ Une fenêtre desktop s'ouvre automatiquement

Fonctionnement de l'Application

1️⃣ Système de Salutation

📝 Entrez un nom → "Alice"
🖱️ Cliquez sur "Greet"
💬 Résultat : "Hello, Alice! You've been greeted from Rust!"

Ce processus démontre :

Communication React ↔️ Rust via Tauri IPC
Validation frontend
Traitement backend
Affichage dynamique

2️⃣ Logos Interactifs

Logo	Couleur	Action
🔷 Vite	Bleu	Ouvre la documentation Vite
🔵 Tauri	Cyan	Ouvre la documentation Tauri
⚛️ React	Bleu ciel	Ouvre la documentation React

🎯 Fonctionnalités

Interface Utilisateur

✅ Design moderne avec animations fluides
✅ Mode sombre automatique (prefers-color-scheme)
✅ Interface responsive et centrée
✅ Effets de glow colorés au survol

Architecture

✅ Communication bidirectionnelle frontend/backend
✅ Backend Rust pour calculs intensifs
✅ Frontend React 19 réactif
✅ Plugins Tauri (opener pour liens externes)
✅ Hot Module Replacement (HMR)

Sécurité & Performance

🔒 Isolation des contextes d'exécution
⚡ Compilation native optimisée
🚀 Démarrage rapide
💾 Binaires légers

📁 Structure du Projet

Tauri-Vite-and-React---Application-Desktop/
│
├── 📂 src/                          # Frontend React
│   ├── 📂 assets/
│   │   └── react.svg                # Logo React
│   ├── App.tsx                      # Composant principal
│   ├── App.css                      # Styles de l'app
│   ├── main.tsx                     # Point d'entrée React
│   └── vite-env.d.ts               # Types Vite
│
├── 📂 src-tauri/                    # Backend Rust + Tauri
│   ├── 📂 src/
│   │   ├── main.rs                  # Point d'entrée Rust
│   │   └── lib.rs                   # Commandes Tauri
│   ├── 📂 icons/                    # Icônes de l'app
│   │   ├── 32x32.png
│   │   ├── 128x128.png
│   │   ├── icon.png
│   │   └── ...                      # Autres formats
│   ├── 📂 capabilities/
│   │   └── default.json             # Permissions
│   ├── tauri.conf.json              # Configuration Tauri
│   ├── Cargo.toml                   # Dépendances Rust
│   └── build.rs                     # Script de build
│
├── 📂 public/                       # Assets publics
│   ├── tauri.svg
│   └── vite.svg
│
├── 📂 assets/                       # Documentation
│   └── localhost-tauri-vite-react.png
│
├── index.html                       # Point d'entrée HTML
├── package.json                     # Dépendances Node.js
├── vite.config.ts                   # Configuration Vite
├── tsconfig.json                    # Configuration TypeScript
└── README.md                        # Ce fichier

📝 Guide de Développement

Modifier le Frontend (React/TypeScript)

Éditez les composants dans src/
Les changements sont rechargés automatiquement (HMR)

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

async function callBackend() {
  const result = await invoke('ma_commande', { param: 'valeur' });
  console.log(result);
}

Ajouter une Commande Backend (Rust)

1. Définir la fonction dans `src-tauri/src/lib.rs`

#[tauri::command]
fn ma_commande(param: &str) -> String {
    format!("Résultat depuis Rust: {}", param)
}

2. Enregistrer la commande

#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
    tauri::Builder::default()
        .plugin(tauri_plugin_opener::init())
        .invoke_handler(tauri::generate_handler![
            greet,
            ma_commande  // ← Ajouter ici
        ])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

3. Appeler depuis React

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

const result = await invoke('ma_commande', { param: 'test' });

Configuration Tauri

Modifiez src-tauri/tauri.conf.json :

{
  "productName": "Mon App",        // Nom de l'application
  "version": "1.0.0",               // Version
  "app": {
    "windows": [{
      "title": "Mon Application",   // Titre de la fenêtre
      "width": 1000,                // Largeur
      "height": 700                 // Hauteur
    }]
  }
}

Personnaliser les Icônes

Remplacez les fichiers dans src-tauri/icons/ :

32x32.png - Icône petite taille
128x128.png - Icône standard
icon.png - Icône principale
icon.ico - Format Windows
icon.icns - Format macOS

🔧 Configuration IDE

VS Code (Recommandé)

Extensions essentielles :

Extension	Description
Tauri	Support Tauri officiel
rust-analyzer	Autocomplétion Rust
ES7+ React Snippets	Snippets React
Prettier	Formatage automatique
Error Lens	Affichage inline des erreurs

Autres IDE

WebStorm : Support intégré React + TypeScript
IntelliJ IDEA : Avec plugins Rust et JavaScript

🤝 Contribution

Les contributions sont les bienvenues ! Voici comment participer :

Comment Contribuer

Fork le projet
Créer une branche (git checkout -b feature/AmazingFeature)
Commiter vos changements (git commit -m 'Add: Amazing Feature')
Push vers la branche (git push origin feature/AmazingFeature)
Ouvrir une Pull Request

Types de Contributions

🐛 Signaler des bugs via les Issues
💡 Proposer des fonctionnalités
📝 Améliorer la documentation
🔧 Soumettre des pull requests
⭐ Mettre une étoile au projet

📚 Ressources Utiles

Documentation Officielle

📘 Tauri Documentation - Guide complet Tauri v2
⚛️ React Documentation - Dernières fonctionnalités React 19
⚡ Vite Documentation - Guide Vite
🦀 The Rust Book - Apprendre Rust

Tutoriels Vidéo

Communauté

🎓 Valeur Pédagogique

Ce starter kit démontre les concepts fondamentaux du développement desktop moderne :

Architecture Full-Stack

Couche	Technologie	Rôle
Frontend	React + TypeScript	Interface utilisateur réactive
Backend	Rust	Logique métier performante
Communication	Tauri IPC	Protocole sécurisé

Bonnes Pratiques

✅ TypeScript pour la sécurité des types
✅ Modularité : séparation frontend/backend
✅ Performance : compilation native
✅ Sécurité : isolation des contextes

Technologies de Pointe

🚀 React 19 - Dernières fonctionnalités
🦀 Tauri 2 - Framework moderne
⚡ Vite - Build tool ultra-rapide
🔧 Rust - Langage système sûr

📄 Licence

Ce starter kit est basé sur le template officiel Tauri.
Libre d'utilisation pour vos projets personnels et commerciaux.

MIT License - Libre d'utilisation

👤 Auteur

Michael Germini

⭐ Star ce projet si vous l'avez trouvé utile !

⬆ Retour en haut

Made with ❤️ using Tauri, React, and Rust

Name		Name	Last commit message	Last commit date
Latest commit History 2 Commits
.vscode		.vscode
assets		assets
public		public
src-tauri		src-tauri
src		src
.gitignore		.gitignore
README.md		README.md
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts

Folders and files

Latest commit

History

Repository files navigation

🚀 Tauri + Vite + React - Starter Kit Desktop

📖 Table des Matières

🎯 À Propos

✨ Points Forts

🚀 Technologies Utilisées

💾 Installation

Prérequis

Installation Rapide

Scripts Disponibles

🎮 Utilisation

Démarrage

Fonctionnement de l'Application

1️⃣ Système de Salutation

2️⃣ Logos Interactifs

🎯 Fonctionnalités

Interface Utilisateur

Architecture

Sécurité & Performance

📁 Structure du Projet

📝 Guide de Développement

Modifier le Frontend (React/TypeScript)

Ajouter une Commande Backend (Rust)

1. Définir la fonction dans src-tauri/src/lib.rs

2. Enregistrer la commande

3. Appeler depuis React

Configuration Tauri

Personnaliser les Icônes

🔧 Configuration IDE

VS Code (Recommandé)

Autres IDE

🤝 Contribution

Comment Contribuer

Types de Contributions

📚 Ressources Utiles

Documentation Officielle

Tutoriels Vidéo

Communauté

🎓 Valeur Pédagogique

Architecture Full-Stack

Bonnes Pratiques

Technologies de Pointe

📄 Licence

👤 Auteur

⭐ Star ce projet si vous l'avez trouvé utile !

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

1. Définir la fonction dans `src-tauri/src/lib.rs`

Packages