Maîtriser les Applications Desktop Multiplateformes avec Electron et Tauri
Maîtriser les Applications Desktop Multiplateformes avec Electron et Tauri

Déploiement et Distribution : Préparer vos Applications Electron et Tauri pour la Publication

Dans le cadre de notre parcours pour "Maîtriser les Applications Desktop Multiplateformes avec Electron et Tauri", cette leçon cruciale se concentre sur l'étape finale mais indispensable du cycle de vie de votre application : le déploiement et la distribution. Créer une application fonctionnelle est une chose, la rendre accessible, installable et maintenable pour vos utilisateurs en est une autre, tout aussi complexe et vitale.

Que vous développiez avec Electron, la plateforme mature et robuste, ou avec Tauri, l'alternative moderne et performante basée sur Rust, les défis de la publication sont similaires mais les outils et les approches diffèrent. Cette leçon vous guidera à travers les concepts essentiels et les étapes pratiques pour préparer vos applications à être utilisées par le monde entier.

Introduction : L'Importance du Déploiement et de la Distribution

Félicitations ! Vous avez développé une application Electron ou Tauri époustouflante. Mais comment vos utilisateurs vont-ils la télécharger, l'installer et la maintenir à jour ? C'est là que le déploiement et la distribution entrent en jeu.

Pourquoi est-ce si important ?

  • Accessibilité Utilisateur : Sans un processus d'installation clair, votre application reste inaccessible.
  • Confiance et Sécurité : Une application bien empaquetée et signée inspire confiance et est moins susceptible d'être bloquée par les systèmes d'exploitation (Windows SmartScreen, macOS Gatekeeper).
  • Expérience Utilisateur (UX) : Un processus d'installation fluide et des mises à jour automatiques améliorent considérablement l'UX.
  • Maintenabilité : Un système de mise à jour robuste est essentiel pour corriger les bugs, ajouter de nouvelles fonctionnalités et maintenir la sécurité de votre application sur le long terme.
  • Professionnalisme : Une application "finie" est une application qui peut être installée et désinstallée proprement.

Les Étapes Clés de la Publication

Quel que soit le framework, le processus de publication suit généralement ces grandes étapes :

  1. Packaging (Empaquetage) : Regrouper votre code, vos ressources et votre runtime (Node.js/Chromium pour Electron, Rust/WebView pour Tauri) en un seul paquet exécutable.
  2. Code Signing (Signature de Code) : Appliquer une signature numérique à votre application pour en attester l'origine et garantir son intégrité.
  3. Installer Generation (Génération d'Installateurs) : Créer des paquets d'installation spécifiques à chaque système d'exploitation ( .exe, .dmg, .deb, etc.).
  4. Auto-Updates (Mises à Jour Automatiques) : Intégrer un mécanisme permettant à votre application de se mettre à jour elle-même.
  5. Distribution : Mettre votre application à disposition des utilisateurs via un site web, des magasins d'applications, etc.

Nous allons maintenant explorer ces étapes pour Electron et Tauri.

Déploiement et Distribution avec Electron

Electron, étant le plus ancien des deux frameworks, dispose d'un écosystème d'outils de déploiement très mature et riche. Le choix principal pour la plupart des développeurs est electron-builder.

1. Packaging et Génération d'Installateurs avec electron-builder

electron-builder est le couteau suisse du déploiement Electron. Il prend votre application Electron et génère des paquets prêts à être distribués pour Windows, macOS et Linux, tout en gérant de nombreuses options de configuration.

Caractéristiques Principales de electron-builder :

  • Multiplateforme : Crée des installateurs pour toutes les plateformes majeures à partir d'une seule configuration.
  • Auto-Update : Intègre le support pour electron-updater, le module de mise à jour automatique.
  • Code Signing : Gère la signature de votre application.
  • Optimisation de Taille : Permet diverses optimisations pour réduire la taille du paquet final.
  • Flexibilité : Nombreuses options de configuration via le fichier package.json ou un fichier de configuration dédié.

Installation et Utilisation Basique

Pour commencer, installez electron-builder en tant que dépendance de développement :

npm install electron-builder --save-dev
# ou
yarn add electron-builder --dev

Ensuite, configurez votre package.json pour qu'il inclue des scripts de build et la configuration de electron-builder.

{
  "name": "mon-app-electron",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "build": "electron-builder",
    "dist": "electron-builder --dir"
  },
  "devDependencies": {
    "electron": "^28.0.0",
    "electron-builder": "^24.0.0"
  },
  "build": {
    "appId": "com.votreentreprise.monapp",
    "productName": "Ma Super App",
    "copyright": "Copyright © 2023 ${author}",
    "directories": {
      "output": "dist"
    },
    "files": [
      "**/*",
      "!node_modules/*/{src,docs,test,install,example}",
      "!node_modules/.bin"
    ],
    "win": {
      "target": "nsis",
      "icon": "build/icon.ico"
    },
    "mac": {
      "category": "public.app-category.utilities",
      "target": "dmg",
      "icon": "build/icon.icns"
    },
    "linux": {
      "target": ["AppImage", "deb"],
      "icon": "build/icon.png"
    }
  }
}

Explication des champs build :

  • appId : Un identifiant unique pour votre application (souvent un domaine inversé). Indispensable !
  • productName : Le nom de votre application tel qu'il apparaîtra à l'utilisateur.
  • copyright : Informations de copyright.
  • directories.output : Le répertoire où les builds seront générés.
  • files : Les fichiers à inclure dans le paquet final. Il est crucial d'exclure les fichiers inutiles pour réduire la taille.
  • win, mac, linux : Sections spécifiques pour chaque OS.
    • target : Spécifie les formats d'installateur à générer (ex: nsis pour Windows, dmg pour macOS, AppImage et deb pour Linux).
    • icon : Chemin vers l'icône de votre application pour chaque plateforme.

Une fois configuré, exécutez simplement npm run build (ou yarn build) pour générer les installateurs dans le dossier dist.

2. Signature de Code (Code Signing)

La signature de code est essentielle pour la confiance et la sécurité. Elle permet aux utilisateurs de vérifier que votre application provient d'un développeur légitime et n'a pas été altérée. Sans signature, Windows SmartScreen ou macOS Gatekeeper risquent de bloquer votre application ou d'afficher des avertissements effrayants.

Processus de Signature :

  1. Obtenir un Certificat : Vous devez acheter un certificat de signature de code auprès d'une autorité de certification (CA) reconnue (ex: DigiCert, Sectigo). Pour macOS, cela passe par un compte développeur Apple (nécessaire pour la signature et la distribution Mac App Store).

  2. Configuration electron-builder :

    • macOS : electron-builder recherche automatiquement vos certificats dans le trousseau macOS. Assurez-vous d'avoir les certificats "Developer ID Application" et "Developer ID Installer" installés.
    • Windows : Vous pouvez spécifier le chemin vers votre fichier de certificat (.pfx) et son mot de passe, ou laisser electron-builder le trouver dans le magasin de certificats Windows.
    "build": {
  // ... autres configurations
  "mac": {
    "identity": "Developer ID Application: Votre Nom Développeur (XYZ123ABC)"
  },
  "win": {
    "signingTool": "signtool", // ou "osslsigncode" pour Linux/macOS
    "certificateFile": "path/to/your/certificate.pfx",
    "certificatePassword": "votre_mot_de_passe"
  }
}

La signature est effectuée automatiquement par electron-builder lors du processus de build si les certificats sont correctement configurés.

3. Mises à Jour Automatiques avec electron-updater

electron-updater est le module standard pour gérer les mises à jour automatiques dans les applications Electron. Il s'intègre parfaitement avec electron-builder.

Comment ça marche ?

electron-updater utilise différents fournisseurs de mise à jour (GitHub Releases, Amazon S3, un serveur HTTP personnalisé) pour vérifier les nouvelles versions. Pour Windows et macOS, il s'appuie sur le framework Squirrel (Squirrel.Windows et Squirrel.Mac) qui gère le téléchargement et l'installation en arrière-plan sans interruption. Pour Linux, il supporte AppImage et des mises à jour directes.

Implémentation :

  1. Installez electron-updater :

    npm install electron-updater
# ou
yarn add electron-updater

  2. Code dans le processus principal (main process) :

    // main.js ou un fichier de mise à jour dédié
const { app, BrowserWindow, dialog } = require('electron');
const { autoUpdater } = require('electron-updater');

// Configuration de l'auto-updater (optionnel, utile pour le débogage)
autoUpdater.logger = require('electron-log');
autoUpdater.logger.transports.file.level = 'info';

// Activer le mode de développement pour tester les mises à jour localement
// autoUpdater.updateConfigPath = path.join(__dirname, 'dev-app-update.yml');

app.on('ready', () => {
  // Démarrer la vérification des mises à jour après un court délai
  // ou quand l'application est prête
  setTimeout(() => {
    autoUpdater.checkForUpdatesAndNotify();
  }, 5000); // Vérifie après 5 secondes
});

autoUpdater.on('checking-for-update', () => {
  console.log('Vérification des mises à jour...');
});

autoUpdater.on('update-available', (info) => {
  console.log('Mise à jour disponible :', info.version);
  dialog.showMessageBox({
    type: 'info',
    title: 'Mise à jour disponible',
    message: `Une nouvelle version (${info.version}) est disponible ! Elle sera téléchargée en arrière-plan.`,
    buttons: ['Ok']
  });
});

autoUpdater.on('update-not-available', (info) => {
  console.log('Pas de mise à jour disponible.');
});

autoUpdater.on('error', (err) => {
  console.error('Erreur lors de la mise à jour :', err);
  dialog.showErrorBox('Erreur de mise à jour', 'Une erreur est survenue lors de la mise à jour de l\'application.');
});

autoUpdater.on('download-progress', (progressObj) => {
  let log_message = `Téléchargement: ${progressObj.percent.toFixed(2)}%`;
  log_message += ` (${(progressObj.bytesPerSecond / 1024 / 1024).toFixed(2)} MB/s)`;
  log_message += ` - Téléchargé ${ (progressObj.transferred / 1024 / 1024).toFixed(2)} MB`;
  log_message += ` sur ${ (progressObj.total / 1024 / 1024).toFixed(2)} MB`;
  console.log(log_message);
  // Ici, vous pouvez mettre à jour une barre de progression dans l'interface utilisateur
});

autoUpdater.on('update-downloaded', (info) => {
  console.log('Mise à jour téléchargée. Redémarrage nécessaire.');
  dialog.showMessageBox({
    type: 'info',
    title: 'Mise à jour prête',
    message: 'Une nouvelle version a été téléchargée. L\'application va redémarrer pour installer la mise à jour.',
    buttons: ['Redémarrer maintenant', 'Plus tard']
  }).then((buttonIndex) => {
    if (buttonIndex.response === 0) { // 'Redémarrer maintenant'
      autoUpdater.quitAndInstall();
    }
  });
});

// ... le reste de votre code Electron (création de fenêtre, etc.)

    Explication du code :

    • autoUpdater.checkForUpdatesAndNotify(): La fonction principale pour initier la vérification et la notification.
    • Les événements (checking-for-update, update-available, update-downloaded, error, download-progress) vous permettent de fournir des retours à l'utilisateur et de contrôler le processus.
    • autoUpdater.quitAndInstall(): Redémarre l'application et installe la mise à jour téléchargée.

  3. Hébergement des Mises à Jour : electron-builder génère un fichier latest.yml (ou latest.json pour Linux) et les paquets de mise à jour (.exe, .dmg, .AppImage). Vous devez héberger ces fichiers sur un serveur accessible publiquement (GitHub Releases, un bucket S3, un simple serveur web). electron-updater lira le fichier latest.yml pour connaître la dernière version et l'URL de téléchargement.

4. Canaux de Distribution pour Electron

  • Votre Site Web : La méthode la plus courante. Proposez des liens de téléchargement directs pour les installateurs générés.
  • Mac App Store (MAS) : Possible avec Electron, mais implique des restrictions importantes (sandbox, API macOS limitées, processus de revue strict). Nécessite une configuration spécifique dans electron-builder ("mas": {}).
  • Microsoft Store : Également possible, mais avec des restrictions et un processus d'empaquetage spécifique (msix). electron-builder supporte la cible msix.
  • Linux App Stores (Snapcraft, Flatpak) : Des formats universels pour Linux. electron-builder peut générer des snap et deb (qui peuvent être convertis en flatpak via d'autres outils).

Déploiement et Distribution avec Tauri

Tauri, étant plus récent et axé sur la légèreté et la sécurité, adopte une approche légèrement différente pour le déploiement, en s'appuyant davantage sur les outils natifs de Rust et du système d'exploitation.

1. Packaging et Génération d'Installateurs avec Tauri CLI

Tauri intègre nativement la fonctionnalité de build et de packaging via sa CLI (tauri-cli). Il s'appuie sur Cargo (le gestionnaire de paquets et de build de Rust) et des outils spécifiques à chaque plateforme pour générer les installateurs.

Utilisation Basique :

Assurez-vous d'avoir la Tauri CLI installée :

cargo install tauri-cli

Pour construire votre application pour la distribution, utilisez la commande tauri build :

cargo tauri build

Par défaut, cette commande construira votre application pour le système d'exploitation courant et générera l'installateur le plus approprié.

Configuration de tauri.conf.json :

La configuration du build et des installateurs se fait dans le fichier src-tauri/tauri.conf.json.

{
  "build": {
    "devPath": "../dist",
    "distDir": "../dist",
    "beforeBuildCommand": "npm run build",
    "withGlobalTauri": true
  },
  "package": {
    "productName": "Ma Super App Tauri",
    "version": "1.0.0"
  },
  "tauri": {
    "bundle": {
      "active": true,
      "targets": "all",
      "identifier": "com.votreentreprise.monapptauri",
      "icon": [
        "icons/32x32.png",
        "icons/128x128.png",
        "icons/128x128@2x.png",
        "icons/icon.icns",
        "icons/icon.ico"
      ],
      "resources": [],
      "externalBin": [],
      "copyright": "Copyright © 2023 ${author}",
      "category": "DeveloperTool",
      "shortDescription": "",
      "longDescription": "",
      "deb": {
        "depends": []
      },
      "mac": {
        "dmg": {
          "sign": true
        },
        "notarize": true
      },
      "windows": {
        "webviewFixedRuntimePath": null,
        "webviewInstallMode": {
          "type": "embedBootstrapper"
        }
      }
    },
    "security": {
      "csp": null
    }
  }
}

Explication des champs pertinents pour le build/bundle :

  • build.beforeBuildCommand: Commande à exécuter avant de compiler l'application Rust (souvent npm run build pour compiler votre frontend).
  • package.productName, package.version: Informations de base sur votre application.
  • tauri.bundle.active: Active la création de paquets.
  • tauri.bundle.targets: Peut être all (crée tous les types pour la plateforme actuelle), ou des formats spécifiques comme msi, dmg, deb, appimage.
  • tauri.bundle.identifier: L'identifiant unique de votre application.
  • tauri.bundle.icon: Chemins vers vos icônes pour différentes tailles et plateformes.
  • tauri.bundle.mac.dmg.sign: Indique à Tauri de signer le DMG.
  • tauri.bundle.mac.notarize: Important pour macOS, la notarisation est un processus Apple pour s'assurer que votre application est sûre.

Après cargo tauri build, les fichiers d'installation se trouveront dans src-tauri/target/release/bundle/.

2. Signature de Code (Code Signing) avec Tauri

La signature de code est tout aussi importante pour Tauri que pour Electron. Tauri facilite ce processus en s'intégrant aux outils système.

Processus de Signature :

Tauri s'appuie sur la configuration de l'OS pour la signature.

  • macOS : La commande cargo tauri build tente de trouver et d'utiliser vos certificats dans le trousseau macOS. Le champ mac.dmg.sign: true active la signature. Pour la notarisation (obligatoire depuis macOS Catalina pour les applications non distribuées via l'App Store), le champ mac.notarize: true est utilisé avec des variables d'environnement pour votre compte Apple (Apple ID et mot de passe d'application ou clé API).
  • Windows : Tauri utilise signtool.exe (qui fait partie du Windows SDK) ou osslsigncode pour Linux/macOS. Vous devez spécifier le chemin de votre certificat .pfx et son mot de passe via des variables d'environnement (TAURI_WINDOWS_SIGNING_PFX et TAURI_WINDOWS_SIGNING_PASSWORD).

Exemple de configuration de variables d'environnement pour Windows (à ne pas commiter !) :

# Dans votre shell avant de lancer la build
export TAURI_WINDOWS_SIGNING_PFX="/chemin/vers/votre/certificat.pfx"
export TAURI_WINDOWS_SIGNING_PASSWORD="votre_mot_de_passe_pfx"
cargo tauri build

Il est recommandé d'utiliser un outil de gestion de secrets (comme GitHub Actions Secrets) pour ces informations sensibles dans un contexte de CI/CD.

3. Mises à Jour Automatiques avec Tauri

Tauri intègre un système de mise à jour automatique robuste et économe en bande passante, y compris des mises à jour delta (télécharge uniquement les parties modifiées du binaire).

Comment ça marche ?

Le système de mise à jour de Tauri s'appuie sur une API HTTP simple pour vérifier les nouvelles versions et télécharger les binaires. Il est agnostique du fournisseur de backend (vous pouvez utiliser GitHub Releases, un S3, votre propre serveur, etc.).

Implémentation :

  1. Activer l'Auto-Updater dans tauri.conf.json :

    {
  "tauri": {
    "updater": {
      "active": true,
      "endpoints": [
        "https://my-app.com/api/v1/updates/{{target}}/{{current_version}}"
      ],
      "dialog": true,
      "pubkey": "YOUR_UPDATE_PUBLIC_KEY" // Générée par `tauri signer`
    }
  }
}
    • endpoints: L'URL de votre API de mise à jour. Tauri remplacera {{target}} (ex: x86_64-apple-darwin) et {{current_version}}.
    • dialog: Si true, Tauri affiche des boîtes de dialogue natives pour les mises à jour.
    • pubkey: Une clé publique utilisée pour vérifier la signature des mises à jour, garantissant qu'elles proviennent bien de vous. Générez-la avec cargo tauri signer generate. Ne partagez jamais la clé privée !

  2. Code dans le frontend (Rust ou JavaScript) :

    Vous pouvez déclencher manuellement la vérification des mises à jour depuis votre code Rust ou JavaScript :

    // src-tauri/src/main.rs (exemple pour le backend Rust)
#[cfg(target_os = "macos")]
#[tauri::command]
async fn check_for_updates_command(window: tauri::Window) -> Result<(), String> {
    let app_handle = window.app_handle();
    let app_version = app_handle.package_info().version.to_string();

    match tauri::updater::check(&app_handle).await {
        Ok(update) => {
            if update.is_update_available() {
                println!("Mise à jour disponible ! Version: {}", update.latest_version());
                // Ou vous pouvez utiliser update.download_and_install() pour un contrôle plus fin
            } else {
                println!("Pas de mise à jour disponible.");
            }
        }
        Err(e) => {
            eprintln!("Erreur de vérification des mises à jour: {}", e);
            return Err(e.to_string());
        }
    }
    Ok(())
}

fn main() {
    tauri::Builder::default()
        .invoke_handler(tauri::generate_handler![check_for_updates_command])
        .run(tauri::generate_context!())
        .expect("erreur lors de l'exécution de l'application Tauri");
}

    // src/main.js ou un fichier de composant React/Vue (exemple pour le frontend JS)
import { invoke } from "@tauri-apps/api/tauri";
import { checkUpdate, installUpdate } from "@tauri-apps/api/updater";
import { relaunch } from "@tauri-apps/api/process";

async function checkForUpdates() {
  try {
    const { shouldUpdate, manifest } = await checkUpdate();

    if (shouldUpdate) {
      console.log(`Mise à jour disponible: ${manifest?.version}`);
      // Afficher une alerte ou une notification à l'utilisateur
      if (confirm(`Une nouvelle version ${manifest?.version} est disponible. Mettre à jour maintenant ?`)) {
        await installUpdate();
        await relaunch(); // Redémarre l'application après la mise à jour
      }
    } else {
      console.log('Pas de mise à jour disponible.');
    }
  } catch (error) {
    console.error('Erreur lors de la vérification des mises à jour :', error);
  }
}

// Appel au démarrage de l'application ou via un bouton "Vérifier les mises à jour"
checkForUpdates();

    Explication du code :

    • La partie Rust montre comment intégrer la logique de mise à jour directement dans le backend, potentiellement exposée via une commande IPC.
    • La partie JavaScript montre comment utiliser l'API updater de Tauri pour interagir avec le système de mise à jour intégré.
    • checkUpdate(): Vérifie si une nouvelle version est disponible.
    • installUpdate(): Télécharge et installe la mise à jour.
    • relaunch(): Redémarre l'application.

  3. Serveur de Mises à Jour : Votre endpoint (https://my-app.com/api/v1/updates/{{target}}/{{current_version}}) doit retourner une réponse JSON comme celle-ci :

    {
  "url": "https://my-app.com/downloads/my-app-tauri_1.0.1_x64.msi.tar.gz",
  "version": "1.0.1",
  "notes": "Améliorations des performances et correction de bugs.",
  "pub_date": "2023-10-27T10:00:00Z",
  "signature": "VOTRE_SIGNATURE_BINAIRE"
}

    La signature est générée en signant le fichier binaire de la mise à jour avec votre clé privée de mise à jour (celle correspondant à la pubkey dans tauri.conf.json). Utilisez cargo tauri signer sign --path /chemin/vers/le/binaire.

4. Canaux de Distribution pour Tauri

Les options sont similaires à Electron :

  • Votre Site Web : La méthode la plus simple et la plus directe.
  • Magasins d'Applications :
    • Mac App Store : Techniquement possible mais complexe. Tauri ne gère pas directement les exigences de bac à sable du MAS, ce qui peut nécessiter des ajustements de code significatifs. La notarisation est en revanche bien supportée.
    • Microsoft Store : Possible en générant un paquet .msix avec la CLI Tauri et en le soumettant.
    • Linux App Stores (Snapcraft, Flatpak) : Tauri peut générer des paquets deb, rpm et AppImage qui sont des bases pour ces stores.

Meilleures Pratiques pour la Publication

Que vous utilisiez Electron ou Tauri, certaines bonnes pratiques sont universelles pour assurer un déploiement réussi :

  • Tests Rigoureux :
    • Testez votre application sur toutes les plateformes cibles (Windows, macOS, Linux).
    • Testez le processus d'installation et de désinstallation.
    • Testez le processus de mise à jour (des versions anciennes vers la nouvelle, et des mises à jour mineures vs majeures).
    • Vérifiez que toutes les fonctionnalités fonctionnent après l'installation.
  • Icônes et Ressources : Fournissez des icônes de haute qualité pour toutes les tailles et résolutions requises par chaque OS.
  • Optimisation de la Taille :
    • Minifiez et compressez votre code frontend.
    • Supprimez les dépendances inutilisées.
    • Pour Electron, utilisez des optimisations de electron-builder comme la compression asar.
    • Pour Tauri, la taille est généralement plus petite de base grâce à Rust et au WebView natif, mais veillez à ne pas inclure de ressources inutiles.
  • Localisation : Si votre application prend en charge plusieurs langues, assurez-vous que les installateurs et messages de mise à jour sont également localisés.
  • Documentation Utilisateur : Fournissez des instructions claires sur la façon d'installer, d'utiliser et de dépanner votre application.
  • CI/CD (Intégration et Déploiement Continus) :
    • Automatisez votre processus de build, de test, de signature et de publication à l'aide d'outils comme GitHub Actions, GitLab CI/CD, CircleCI.
    • C'est essentiel pour maintenir la qualité et la rapidité des mises à jour. Stockez les secrets de signature en toute sécurité dans l'environnement CI/CD.

Conclusion

La publication d'une application desktop est une étape complexe mais gratifiante qui transforme votre code en un produit utilisable par des millions. Comprendre les subtilités du packaging, de la signature de code, des installateurs et des mises à jour automatiques est crucial pour le succès de votre application.

Electron, avec electron-builder et electron-updater, offre un écosystème mature et robuste, idéal pour les projets nécessitant une grande flexibilité et un support étendu. Tauri, avec sa CLI intégrée et son approche basée sur Rust, fournit une solution plus légère et souvent plus performante, simplifiant de nombreux aspects du déploiement tout en offrant des mises à jour efficaces.

En suivant les directives de cette leçon et en adoptant les meilleures pratiques, vous serez bien équipé pour distribuer vos applications Electron et Tauri de manière professionnelle et efficace, garantissant une excellente expérience pour vos utilisateurs et une maintenance simplifiée pour vous-même. Le travail ne s'arrête pas à la première publication ; les mises à jour régulières et le support sont la clé d'une application réussie sur le long terme.