Vite
Ce guide vous accompagnera à travers la création de votre premiÚre application Tauri en utilisant l'outil de construction frontend Vite.
Before we continue, make sure you have completed the prerequisites to have a working development environment.
Tauri est un framework pour développer des applications de bureau avec n'importe quel framework frontend et un backend en Rust. Chaque application se compose de deux parties :
- Le binaire en Rust qui crĂ©e les fenĂȘtres et expose les fonctionnalitĂ©s natives Ă ces fenĂȘtres
- Le framework frontend de votre choix qui crĂ©e l'interface utilisateur dans la fenĂȘtre
Dans ce qui suit, nous allons d'abord configurer le frontend, puis mettre en place le projet Rust et enfin vous montrer comment communiquer entre les deux.
create-tauri-app
The easiest way to scaffold a new project is the create-tauri-app
utility. It provides opinionated templates for vanilla HTML/CSS/JavaScript and many frontend frameworks like React, Svelte and Yew.
- Bash
- PowerShell
- Cargo
- npm
- Yarn
- pnpm
- Bun
sh <(curl https://create.tauri.app/sh)
irm https://create.tauri.app/ps | iex
cargo install create-tauri-app --locked
cargo create-tauri-app
npm create tauri-app@latest
yarn create tauri-app
pnpm create tauri-app
bunx create-tauri-app
Please note that you do not need to follow the rest of this guide if you use create-tauri-app
, but we still recommend reading it to understand the setup.
Voici un aperçu de ce que nous allons construire :
CrĂ©er le Frontendâ
Vite est un bundler en frontend et un outil de construction, ce qui signifie qu'il fournit diverses fonctionnalités telles que Hot Module Reloading (HMR) pendant le développement, mais il convertit également votre code source en HTML, CSS et JavaScript optimisés lors de la compilation pour la production. Nous recommandons Vite pour sa vitesse, sa facilité de configuration et son grand écosystÚme de plugins.
Vite comes with a scaffolding utility similar to create-tauri-app
that can quickly set up a new project from many pre-defined templates. Vous pouvez choisir parmi de nombreux frameworks frontend comme React, Svelte ou Vue. Pour ce guide, nous choisirons le modĂšle vanilla-ts
pour créer un petit projet sans aucun framework frontend.
- npm
- Yarn
- pnpm
npm create vite@latest
yarn create vite
pnpm create vite
Project name:
Ce sera le nom du projet. Il correspond au nom du dossier créé par l'utilitaire mais n'aura aucune importance pour notre application. Vous pouvez utiliser n'importe quel nom que vous voulez ici.Select a framework:
Si vous prévoyez d'utiliser un framework frontend, vous pouvez le choisir ici. Pour ce tutoriel, nous assumerons que vous avez choisi duvanilla
.Select a variant:
Vite offre une variante Typescript et vanilla JavaScript pour chaque template, que vous pourrez sélectionner ici. Nous recommandons fortement TypeScript car cela aide à écrire du code plus sécurisé, augmente la maintenabilité ainsi que l'efficacité. Pour ce tutoriel, nous assumerons que vous avez choisi duvanilla
.
Lors du démarrage du frontend via la commande vite
, Vite recherche un fichier de configuration nommé vite.config.ts
à l'intérieur de la racine du projet. Nous voulons personnaliser ce fichier pour obtenir la meilleure compatibilité avec Tauri. Si elle n'est pas créée par l'échafaudage ci-dessus (comme si vous utilisez du JavaScript vanilla), vous devrez créer le fichier vite.config.ts
fichier Ă la racine du projet.
Mettre Ă jour le fichier avec le contenu suivant :
import { defineConfig } from 'vite'
export default defineConfig({
// prevent vite from obscuring rust errors
clearScreen: false,
// Tauri expects a fixed port, fail if that port is not available
server: {
strictPort: true,
},
// to access the Tauri environment variables set by the CLI with information about the current target
envPrefix: ['VITE_', 'TAURI_PLATFORM', 'TAURI_ARCH', 'TAURI_FAMILY', 'TAURI_PLATFORM_VERSION', 'TAURI_PLATFORM_TYPE', 'TAURI_DEBUG'],
build: {
// Tauri uses Chromium on Windows and WebKit on macOS and Linux
target: process.env.TAURI_PLATFORM == 'windows' ? 'chrome105' : 'safari13',
// don't minify for debug builds
minify: !process.env.TAURI_DEBUG ? 'esbuild' : false,
// produce sourcemaps for debug builds
sourcemap: !!process.env.TAURI_DEBUG,
},
})
Notez que si vous n'utilisez pas JavaScript vanilla, vous devez conserver les plugins spécifiques au framework qui étaient déjà dans ce fichier.
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.
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
- Yarn
- pnpm
- Bun
- Cargo
npm install --save-dev @tauri-apps/cli@">1.0.0"
"scripts": {
"tauri": "tauri"
}
yarn add -D @tauri-apps/cli@^1.0.0
pnpm add -D @tauri-apps/cli@1
bun add -D @tauri-apps/cli@1.0.0
cargo install tauri-cli --version "^1.0.0"
Pour échafauder un projet Rust minimal qui est pré-configuré pour utiliser Tauri, ouvrez un terminal et exécutez la commande suivante :
- npm
- Yarn
- pnpm
- Cargo
npm run tauri init
yarn tauri init
pnpm tauri init
cargo tauri init
Il vous guidera à travers une série de questions :
- 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. - 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. - 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.Use../dist
for this value. - 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.Usehttp://localhost:5173
for this value. - Quelle est votre commande de développement frontend ?
Celle ci est la commande utilisée pour démarrer votre serveur de développement frontend.Usenpm run dev
(make sure to adapt this to use the package manager of your choice). - Quelle est votre commande de build frontend ?
Celle ci est la commande utilisée pour construire vos fichiers frontend pour la production.Usenpm run build
(make sure to adapt this to use the package manager of your choice).
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.
Maintenant que nous avons préparé notre frontend et initialisé le projet Rust le fichier tauri.conf.json
créé devrait ressembler à ceci :
{
"build": {
// Cette commande s'exécutera lorsque vous exécuterez `tauri build`.
"beforeBuildCommand": "npm run build",
// Cette commande s'exécutera lorsque vous exécuterez `tauri dev`
"beforeDevCommand": "npm run dev",
"devPath": "http://localhost:5173",
"distDir": "../dist"
},
Et c'est tout! Maintenant, vous pouvez exécuter la commande suivante dans votre terminal pour lancer de votre application en mode développement:
- npm
- Yarn
- pnpm
- bun
- Cargo
npm run tauri dev
yarn tauri dev
pnpm tauri dev
bunx tauri dev
cargo tauri dev
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 :
#[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 :
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 !
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
- Yarn
- pnpm
- Bun
npm install @tauri-apps/api@">1.0.0"
yarn add @tauri-apps/api@^1.0.0
pnpm add @tauri-apps/api@1
bun add @tauri-apps/api@1.0.0
Avec la bibliothÚque installée, vous pourrez ajouter ceci à votre fichier main.ts
pour appeler la commande:
import { invoke } from '@tauri-apps/api'
// Ă prĂ©sent, 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` renvoie une promesse (Promise)
.then((response) => console.log(response))
:::astuce
Si vous voulez en savoir plus sur la communication entre Rust et JavaScript, veuillez lire le Tauri Inter-Process Communication guide.
:::