Qwik
This guide will walk you through creating your first Tauri app using the Qwik web framework.
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.
Voici un aperçu de ce que nous allons construire :
Créer le Frontend
Qwik is primarily designed for Server-Side Rendering (SSR). To make Qwik work with Tauri we are going to use a "Static Site" adapter to create a frontend based on Static-Site Generation (SSG).
Qwik comes with a scaffolding utility similar to create-tauri-app
that can quickly set up a new project with many customization options. For this guide, we will select the TypeScript template.
- npm
- Yarn
- pnpm
npm create qwik@latest
yarn create qwik@latest
pnpm create qwik@latest
Project name\ This will be the name of your JavaScript project. 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.
App starter\ We will select the
Basic App (QwikCity)
option for an example template.Install dependencies\ Yes, if you want it to install the dependencies automatically.
Qwik in SSG mode
- npm
- Yarn
- pnpm
npm run qwik add
yarn create qwik add
pnpm qwik add
Select Static site (.html files)
adapter. Then you can build static pages via:
- npm
- Yarn
- pnpm
npm run build
yarn build
pnpm build
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.
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 !
To call our newly created command we will use the @tauri-apps/api
JavaScript library. 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:
With the library installed, we can now create a new Qwik component. We'll create it in src/components/greet/greet.tsx
:
import { $, component$, useSignal } from '@builder.io/qwik'
import { invoke } from '@tauri-apps/api/tauri'
export default component$(() => {
const greetMsg = useSignal('')
const greet = $(async (name: string) => {
greetMsg.value = await invoke('greet', { name })
})
return (
<div>
<button onClick$={() => greet('Qwik')}>Greet</button>
<p>{greetMsg.value}</p>
</div>
)
})
You can now add this component into src/routes/index.tsx
:
// ...
import Greet from '~/components/greet/greet'
export default component$(() => {
return (
<>
<Greet />
...
</>
)
})
If you want to know more about the communication between Rust and JavaScript, please read the Tauri Inter-Process Communication guide.