Créer un projet

Une chose qui rend Tauri si flexible est sa capacité à fonctionner avec pratiquement n’importe quel framework frontend. Nous avons créé l’utilitaire create-tauri-app pour vous aider à créer un nouveau projet Tauri en utilisant l’un des modèles de framework officiellement maintenus.

create-tauri-app inclut actuellement des modèles pour vanilla (HTML, CSS et JavaScript sans framework), Vue.js, Svelte, React, SolidJS, Angular, Preact, Yew, Leptos, et Sycamore. Vous pouvez également trouver ou ajouter vos propres modèles et frameworks communautaires dans le dépôt Awesome Tauri.

Alternativement, vous pouvez ajouter Tauri à un projet existant pour transformer rapidement votre base de code existante en une application Tauri.

Utiliser `create-tauri-app`

Pour commencer à utiliser create-tauri-app, exécutez l’une des commandes ci-dessous dans le dossier où vous souhaitez configurer votre projet. Si vous n’êtes pas sûr de la commande à utiliser, nous recommandons la commande Bash sur Linux et macOS et la commande PowerShell sur Windows.

sh <(curl https://create.tauri.app/sh)

irm https://create.tauri.app/ps | iex

sh (curl -sSL https://create.tauri.app/sh | psub)

npm create tauri-app@latest

yarn create tauri-app

pnpm create tauri-app

deno run -A npm:create-tauri-app

bun create tauri-app

cargo install create-tauri-app --locked
cargo create-tauri-app

Suivez les invites pour choisir le nom de votre projet, le langage frontend, le gestionnaire de paquets, le framework frontend et les options du framework frontend le cas échéant.

Échafauder un nouveau projet

Choisissez un nom et un identifiant de paquet (identifiant unique pour votre application) :
```
? Project name (tauri-app) ›
? Identifier (com.tauri-app.app) ›
```

Sélectionnez une variante pour votre frontend. D’abord le langage :

? Choose which language to use for your frontend ›
Rust  (cargo)
TypeScript / JavaScript  (pnpm, yarn, npm, bun)
.NET  (dotnet)

Sélectionnez un gestionnaire de paquets (s’il y en a plusieurs disponibles) :

Options pour TypeScript / JavaScript :
```
? Choose your package manager ›
pnpm
yarn
npm
bun
```

Sélectionnez un modèle d’interface utilisateur et une variante (s’il y en a plusieurs disponibles) :

Options pour Rust :

? Choose your UI template ›
Vanilla
Yew
Leptos
Sycamore

Options pour TypeScript / JavaScript :

? Choose your UI template ›
Vanilla
Vue
Svelte
React
Solid
Angular
Preact

? Choose your UI flavor ›
TypeScript
JavaScript

Options pour .NET :

? Choose your UI template ›
Blazor  (https://dotnet.microsoft.com/en-us/apps/aspnet/web-apps/blazor/)

Une fois terminé, l’utilitaire signale que le modèle a été créé et affiche comment l’exécuter en utilisant le gestionnaire de paquets configuré. S’il détecte des dépendances manquantes sur votre système, il imprime une liste de paquets et indique comment les installer.

Démarrer le serveur de développement

Une fois create-tauri-app terminé, vous pouvez naviguer dans le dossier de votre projet, installer les dépendances, puis utiliser la CLI Tauri pour démarrer le serveur de développement :

cd tauri-app
npm install
npm run tauri dev

cd tauri-app
yarn install
yarn tauri dev

cd tauri-app
pnpm install
pnpm tauri dev

cd tauri-app
deno install
deno task tauri dev

cd tauri-app
bun install
bun tauri dev

cd tauri-app
cargo tauri dev

Vous verrez maintenant une nouvelle fenêtre s’ouvrir avec votre application en cours d’exécution.

Félicitations ! Vous avez créé votre application Tauri ! 🚀

Configuration manuelle (CLI Tauri)

Si vous avez déjà un frontend existant ou si vous préférez le configurer vous-même, vous pouvez utiliser la CLI Tauri pour initialiser le backend de votre projet séparément.

Créez un nouveau répertoire pour votre projet et initialisez le frontend. Vous pouvez utiliser du HTML, CSS et JavaScript simples, ou tout framework que vous préférez tel que Next.js, Nuxt, Svelte, Yew ou Leptos. Vous avez juste besoin d’un moyen de servir l’application dans votre navigateur. Juste à titre d’exemple, voici comment configurer une simple application Vite :
- npm
- yarn
- pnpm
- deno
- bun
mkdir tauri-app cd tauri-app npm create vite@latest .
mkdir tauri-app cd tauri-app yarn create vite .
mkdir tauri-app cd tauri-app pnpm create vite .
mkdir tauri-app cd tauri-app deno run -A npm:create-vite .
mkdir tauri-app cd tauri-app bun create vite

Ensuite, installez l’outil CLI de Tauri en utilisant votre gestionnaire de paquets préféré. Si vous utilisez cargo pour installer la CLI Tauri, vous devrez l’installer globalement.

npm install -D @tauri-apps/cli@latest

yarn add -D @tauri-apps/cli@latest

pnpm add -D @tauri-apps/cli@latest

deno add -D npm:@tauri-apps/cli@latest

bun add -D @tauri-apps/cli@latest

cargo install tauri-cli --version "^2.0.0" --locked

Déterminez l’URL de votre serveur de développement frontend. C’est l’URL que Tauri utilisera pour charger votre contenu. Par exemple, si vous utilisez Vite, l’URL par défaut est http://localhost:5173.

Dans le répertoire de votre projet, initialisez Tauri :

npx tauri init

yarn tauri init

pnpm tauri init

deno task tauri init

bun tauri init

cargo tauri init

Après avoir exécuté la commande, une invite vous demandera différentes options :

✔ What is your app name? tauri-app
✔ What should the window title be? tauri-app
✔ Where are your web assets located? ..
✔ What is the url of your dev server? http://localhost:5173
✔ What is your frontend dev command? pnpm run dev
✔ What is your frontend build command? pnpm run build

Cela créera un répertoire src-tauri dans votre projet avec les fichiers de configuration Tauri nécessaires.

Vérifiez que votre application Tauri fonctionne en exécutant le serveur de développement :
- npm
- yarn
- pnpm
- deno
- bun
- cargo
npx tauri dev
yarn tauri dev
pnpm tauri dev
deno task tauri dev
bun tauri dev
cargo tauri dev
Cette commande compilera le code Rust et ouvrira une fenêtre avec votre contenu web.

Félicitations ! Vous avez créé un nouveau projet Tauri en utilisant la CLI Tauri ! 🚀

Prochaines étapes

Support on Open Collective Sponsor on GitHub