Passer au contenu principal

Intégrer au projet existant

Si vous avez déjà un projet web existant, ce guide vous guidera à travers l'intégration de Tauri dans votre projet, qu'il s'agisse de Node. s (comme Svelte, React, Vue, ou Angular) ou Rust-based (comme Yew ou Dominator).

info

Avant de continuer, assurez-vous que vous avez rempli les prérequis pour avoir un environnement de développement fonctionnel.

Bien que Tauri soit compatible avec presque n'importe quel framework frontend, nous utiliserons un projet React à travers ce guide créé en utilisant create-react-app. Nous supposerons que vous commencez par une structure de projet similaire à ceci :

.
│── package.json
│── public
│   ╰── index.html
╰── src
    │── App.css
    │── App.jsx
    │── index.css
    ╰── index.js

Créer le projet Rust​

Au cœur de chaque application Tauri se trouve un binaire Rust qui gère les fenêtres, la webview et les appels au système d'exploitation par le biais d'une crate Rust appelé tauri. Ce projet est géré par Cargo, le gestionnaire de paquets officiel et l'outil de construction propulsé par Rust.

Notre CLI Tauri utilise Cargo sous le capot, de sorte que vous avez rarement besoin d'interagir directement avec lui. Cargo dispose de nombreuses autres fonctionnalités utiles qui ne sont pas exposées par notre CLI, comme les tests, le linting et le formatage, alors veuillez vous référer à leur documentation officielle pour en savoir plus.

Installer Tauri CLI

Si vous n'avez pas encore installé le CLI Tauri, vous pouvez le faire avec l'une des commandes ci-dessous. Vous n'êtes pas sûr de savoir quoi utiliser ? Consultez la section dédiée dans la FAQ.

npm install --save-dev @tauri-apps/cli
For npm to detect Tauri correctly you need to add it to the "scripts" section in your package.json file:
package.json
"scripts": {
  "tauri": "tauri"
}

Pour échafauder un projet Rust minimal qui est pré-configuré pour utiliser Tauri, ouvrez un terminal et exécutez la commande suivante :

npm run tauri init

Il vous guidera à travers une série de questions :

  1. Quel est le nom de votre application ?
    Ce sera le nom de votre paquet final et le nom du programme dans votre OS. Vous pouvez utiliser n'importe quel nom que vous voulez ici.

  2. Quel doit être le nom de la fenêtre ?
    Ce sera le nom de la fenêtre principale par défaut. Vous pouvez utiliser n'importe quel nom que vous voulez ici.

  3. Où sont vos ressources web (HTML/CSS/JS) situés par rapport au fichier <current dir>/src-tauri/tauri.conf.json qui sera créé ?
    Ce chemin est celui que Tauri chargera votre resources frontend quand vous compiler en mode production.
    For the project example in this guide, is ../build. Notez que cela peut être quelque chose de différent comme ../dist si vous utilisez un framework différent.

  4. Quelle est l'URL de votre serveur de développement
    Celle - ci peut être soit une URL où est chemin fichier que Tauri chargera pendant le development.
    Pour l'exemple du projet dans ce guide, ceci est http://localhost:3000. Note that it may be something different (or even a directory) if you're using a different framework.

  5. Quelle est votre commande de développement frontend ?
    Celle ci est la commande utilisée pour démarrer votre serveur de développement frontend.
    For the project example in this guide, this is npm run start (make sure to adapt this to use the package manager of your choice).

  6. Quelle est votre commande de build frontend ?
    Celle ci est la commande utilisée pour construire vos fichiers frontend pour la production.
    For the project example in this guide, this is npm run build (make sure to adapt this to use the package manager of your choice).
info

Si vous êtes familier avec Rust, vous remarquerez que tauri init ressemble beaucoup à init cargo. Vous pouvez simplement utiliser cargo init et ajouter les dépendances Tauri nécessaires si vous préférez une installation entièrement manuelle.

La commande tauri init génère un dossier appelé src-tauri. C'est une convention pour les applications Tauri de placer tous les fichiers liés au cœur de l'application dans ce dossier. Passons rapidement à travers le contenu de ce dossier :

  • cargo.toml
    Fichier manifeste de Cargo. Vous pouvez déclarer les crates Rust dont votre application dépend, les métadonnées de votre application, et bien plus encore. Pour la référence complète, voir Format de manifeste de Cargo.

  • tauri.conf.json
    Ce fichier vous permet de configurer et de personnaliser des aspects de votre application Tauri du nom de votre application à la liste des API autorisées. Voir la configuration de l'API de Tauri pour la liste complète des options supportées et des explications approfondies pour chacune d'entre elles.

  • src/main.rs
    C'est le point d'entrée de votre programme Rust et l'endroit où nous démarrons Tauri. Vous y trouverez deux sections :

    src/main.rs
     #![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]

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

    The line beginning with the cfg! ayant qu'un seul but : elle désactive la fenêtre d'invite de commande qui s'afficherait normalement sur Windows si vous exécutez une application groupée. Si vous êtes sous Windows, essayez de le commenter et de voir ce qui se passe.

    La fonction main est le point d'entrée et la première fonction qui est appelée lorsque votre programme s'exécute.

  • icônes
    Il y a de fortes chances que vous souhaitiez une icône élégante pour votre application ! Pour vous permettre de démarrer rapidement, nous avons inclus un ensemble d'icônes par défaut. Vous devez les changer avant de publier votre application. Pour en savoir plus sur les différents formats d'icônes, consultez le tutoriels sur les icônes de Tauri.

Et voilà, vous avez maintenant ajouté Tauri à votre projet existant et vous devriez voir un répertoire src-tauri qui ressemble à ceci:

│── package.json
│── public
│   ╰── index.html
│── src
│   │── App.css
│   │── App.jsx
│   │── index.css
│   ╰── index.js
╰── src-tauri
    │── Cargo.toml
    │── build.rs
    │── icons
    │── src
    ╰── tauri.conf.json

Invoquer des commandes​

Tauri vous permet d'améliorer votre frontend avec des capacités natives. Nous appelons ces Commandes, essentiellement des fonctions Rust que vous pouvez appeler depuis votre JavaScript en frontend. Cela vous permet de gérer des traitements ou des appels plus lourds via l'OS dans un code Rust beaucoup plus performant.

Faisons un exemple simple :

src-tauri/src/main.rs
#[tauri::command]
fn greet(name: &str) -> String {
   format!("Hello, {}!", name)
}

Une commande est comme n'importe quelle fonction Rust normale, avec l'ajout de la macro d'attribut #[tauri::command] qui permet à votre fonction de communiquer avec le contexte JavaScript.

Enfin, nous devons également parler à Tauri de notre commande nouvellement créée afin qu'elle puisse effectuer les appels en conséquence. Ceci est fait avec la combinaison de la fonction .invoke_handler() et de la macro generate_handler![] que vous pouvez voir ci-dessous :

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

Maintenant vous êtes prêt à appeler votre commande depuis le frontend !

Il y a deux façons différentes d'appeler des commandes depuis votre projet frontend :

  1. Utilisation de la bibliothèque JavaScript @tauri-apps/api (préféré)
  2. Utiliser withGlobalTauri pour utiliser une version pré-groupée de l'API Tauri

Nous allons passer en revue les deux ci-dessous.

Utilisation de la bibliothèque JavaScript​

Pour appeler notre commande nouvellement créée, nous utiliserons la bibliothèque JavaScript @tauri-apps/api. Il offre des moyens d'accéder à des fonctionnalités natives telles que le système de fenêtrage, de fichiers, etc., à travers des abstractions JavaScript. Vous pourrez l'installer à l'aide du gestionnaire de paquets de votre choix:

npm install @tauri-apps/api

Vous pouvez maintenant importer la fonction invoke de la bibliothèque et l'utiliser pour appeler notre commande :

src/App.jsx
import logo from './logo.svg';
import './App.css';

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

function App() {
  // maintenant  vous pouvez exécuter notre commande !
  // Clique droite sur l'arrière-plan de l'application et ouvre les outils de développement.
  // Vous devriez apercevoir "Hello, World !" dans la console !
  invoke('greet', { name: 'World' })
  // `invoke` retourne une promesse
  .then((response) => console.log(response))

  return (
    // -- snip --
  )
}

Utilisation de withGlobalTauri​

Pour interagir avec Tauri depuis votre interface sans utiliser le package JavaScript @tauri-apps/api vous devrez activer withGlobalTauri dans votre fichier tauri.conf.json:

tauri.conf.json
{
  "build": {
    "beforeBuildCommand": "npm run build",
    "beforeDevCommand": "npm run dev",
    "devPath": "http://localhost:3000",
    "distDir": "../build",
    "withGlobalTauri": true
  },

Cela injectera une version pré-compilée des fonctions API dans votre frontend.

Vous pouvez maintenant modifier le fichier App.jsx pour appeler votre commande :

src/App.js
import logo from './logo.svg';
import './App.css';

// accède a la fonction invoke depuis tauri 
const { invoke } = window.__TAURI__.tauri

fonction App() {
  // maintenant nous pouvons appeler notre Commande!
  // Clique droite sur l'arrière-plan de l'application et ouvre les outils de développement.
  // Vous devriez apercevoir "Hello, World !" dans la console !
  invoke('greet', { name: 'World' })
  // `invoke` retourne une promesse
  .then((response) => console.log(response))

  return (
    // -- snip --
  )
}

Exécuter votre application​

Maintenant, vous pouvez exécuter la commande suivante dans votre terminal pour lancer de votre application en mode développement:

npm run tauri dev

:::astuce

Si vous voulez en savoir plus sur la communication entre Rust et JavaScript, veuillez lire le Tauri Inter-Process Communication guide.

:::