Création de petites applications de bureau avec Tauri et Vue.js

La technologie améliore nos vies, pas seulement les utilisateurs, mais aussi les créateurs (développeurs et designers). Dans cet article, je vais vous présenter Tauri. Cet article vous sera utile si :

• vous avez créé des applications sur le Web avec HTML, CSS et JavaScript, et vous souhaitez utiliser les mêmes technologies pour créer des applications destinées aux plates-formes Windows, macOS ou Linux ;
• vous créez déjà des applications de bureau multiplateformes avec des technologies comme Electron, et vous souhaitez découvrir des alternatives ;
• vous souhaitez créer des applications avec des technologies Web pour les distributions Linux, telles que PureOS ;
• vous êtes un passionné de Rust et vous souhaitez l'appliquer pour créer des applications multiplateformes natives.

Nous verrons comment créer une application multiplateforme native à partir d'un projet Web existant. Allons-y !

Remarque : cet article suppose que vous maîtrisez HTML, CSS, JavaScript et Vue.js.

Qu'est-ce que Tauri ?

Le site officiel résume bien Tauri :

• Tauri est une chaîne d'outils polyglotte permettant de créer des applications natives plus sécurisées avec des binaires minuscules et rapides. Par "polyglotte", je veux dire que Tauri utilise plusieurs langages de programmation. Pour le moment, Rust, JavaScript et TypeScript sont utilisés. Mais il est prévu de vous permettre d'utiliser Go, C++, Python, etc.
• Il vous permet d'utiliser n'importe quel framework frontal basé sur HTML et JavaScript, tel que Vue.js, React ou Angular, pour créer une application de bureau native, et il peut être intégré dans n'importe quel pipeline.
• Il vous aide à créer et à regrouper des fichiers binaires pour les principales plates-formes de bureau (mobile et WebAssembly à venir).

Donc, fondamentalement, Tauri vous permet d'utiliser les technologies Web pour créer des applications de bureau natives minuscules et sécurisées.

Sur sa page GitHub, Tauri est décrit comme une chaîne d'outils indépendante du framework pour créer des applications natives hautement sécurisées qui ont de minuscules binaires (c'est-à-dire la taille du fichier) et qui sont très rapides (c'est-à-dire une utilisation minimale de la RAM).

Pourquoi pas Electron ?

Un outil populaire pour utiliser les technologies Web pour créer des applications de bureau est Electron.

Cependant, les applications Electron ont une taille de paquet assez importante et elles ont tendance à occuper beaucoup de mémoire lors de leur exécution. Voici comment Tauri se compare à Electron :

• Empaqueter
  La taille d'une application Tauri peut être inférieure à 600 Ko.
• Mémoire
  L'empreinte d'une application Tauri est inférieure à la moitié de la taille d'une application Electron.
• Licence
  Le renouvellement de licence est possible avec Tauri, mais pas avec Electron. Electron est livré avec Chromium dès la sortie de la boîte. Cependant, Chromium inclut un système de gestion des droits numériques nommé Widevine. L'inclusion de Widevine dans Chromium rend les applications créées avec Electron mal vues par les utilisateurs de plates-formes telles que PureOS pour la seule raison qu'il ne s'agit pas d'un logiciel open source gratuit (FLOSS). Les plateformes comme PureOS sont vérifiées par la Free Software Foundation (FSF). Cela signifie qu'ils ne peuvent publier que des logiciels gratuits et open source dans leurs magasins d'applications.

En un mot, si votre application est construite avec Electron, elle ne sera jamais expédiée officiellement dans la boutique PureOS. Cela devrait être une préoccupation pour les développeurs ciblant de telles distributions.

Plus de fonctionnalités de Tauri

• La sécurité est vraiment importante pour l'équipe Tauri. Les applications créées avec Tauri sont censées être sécurisées dès le départ.
• Tauri est compatible avec n'importe quel framework frontal, vous n'avez donc pas à changer votre pile.
• Il dispose de nombreux modèles de conception pour vous aider à choisir des fonctionnalités importantes avec des configurations simples.

Avantages de Tauri

• Tauri vous permet de prendre la base de code que vous avez créée pour le Web et de la transformer en une application de bureau native, sans rien changer.
• Bien que vous puissiez utiliser Rust dans un projet basé sur Tauri, il est totalement facultatif. Si vous le faisiez, vous n'auriez pas besoin de modifier quoi que ce soit dans votre base de code d'origine destinée au Web.

Tauri du monde réel

Si vous faites partie de la communauté Vue.js depuis un certain temps, vous avez entendu parler de Guillaume Chau, membre de l'équipe principale de Vue.js. Il est responsable de l'interface de ligne de commande (CLI) Vue.js, ainsi que d'autres bibliothèques impressionnantes Vue.js. Il a récemment créé guijs, qui signifie « interface utilisateur graphique pour les projets JavaScript ». Il s'agit d'une application de bureau native alimentée par Tauri pour gérer visuellement vos projets JavaScript.

Guijs est un exemple de ce qui est possible avec Tauri, et le fait qu'un membre principal de l'équipe Vue.js travaille sur l'application nous indique que Tauri fonctionne bien avec Vue.js (parmi d'autres frameworks frontaux). Consultez le référentiel guijs sur GitHub si vous êtes intéressé. Et, oui, c'est open-source.

Comment fonctionne Tauri

À un niveau élevé, Tauri utilise Node.js pour échafauder une fenêtre de rendu HTML, CSS et JavaScript en tant qu'interface utilisateur (UI), gérée et amorcée par Rust. Le produit est un binaire monolithique qui peut être distribué sous forme de types de fichiers courants pour Linux (deb/appimage), macOS (app/dmg) et Windows (exe/msi).

Comment sont créées les applications Tauri

Une application Tauri est créée en suivant les étapes suivantes :

1. Tout d'abord, créez une interface dans votre framework GUI et préparez le HTML, le CSS et le JavaScript pour la consommation.
2. La CLI Tauri Node.js le prend et configure le coureur Rust en fonction de votre configuration.
3. En mode développement, il crée une fenêtre WebView, avec débogage et Hot Module Reloading .
4. En mode build, il rige le bundler et crée une application finale en fonction de vos paramètres.

Configuration de votre environnement

Maintenant que vous savez ce qu'est Tauri et comment il fonctionne, laissez-moi vous expliquer comment configurer votre machine pour le développement avec Tauri.

Remarque : La configuration ici est pour les machines Linux, mais des guides pour macOS et pour Windows sont également disponibles.

Configuration Linux

La nature polyglotte de Tauri signifie qu'il nécessite un certain nombre de dépendances d'outils. Commençons par installer certaines des dépendances. Exécutez ce qui suit :

 $ sudo apt update && sudo apt install libwebkit2gtk-4.0-dev build-essential curl libssl-dev appmenu-gtk3-module

Une fois que ce qui précède a réussi, procédez à l'installation de Node.js (si vous ne l'avez pas déjà), car Tauri nécessite son runtime. Vous pouvez le faire en exécutant ceci :

 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash

Cela installera nvm (gestionnaire de versions Node.js), qui vous permet de gérer facilement le runtime Node.js et de basculer facilement entre les versions de Node.js. Une fois installé, exécutez ceci pour afficher une liste des versions de Node.js :

 nvm ls-remote

Au moment de la rédaction, la version la plus récente est la 14.1.0. Installez-le comme ceci :

 nvm install v14.1.0

Une fois Node.js entièrement configuré, vous devrez installer le compilateur Rust et le gestionnaire de packages Rust : Cargo. La commande ci-dessous installerait les deux :

 $ curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

Après avoir exécuté cette commande, assurez-vous que Cargo et Rust sont dans votre $PATH en exécutant ce qui suit :

 rust --version

Si tout s'est bien passé, cela devrait renvoyer un numéro de version.

D'après la documentation de Tauri, assurez-vous d'être sur la dernière version en exécutant la commande suivante :

 $ rustup update stable

Voila ! Vous êtes sur le point de préparer votre machine à 100 % pour Tauri. Il ne reste plus qu'à installer la caisse tauri-bundler . Il est préférable de quitter votre CLI et d'exécuter la commande ci-dessous dans une nouvelle fenêtre CLI :

 $ cargo install tauri-bundler --force

Eurêka ! Si tout s'est bien passé, votre machine est maintenant prête pour Tauri. Ensuite, nous commencerons à intégrer Tauri avec Vue.js. Allons-y !

Fil

L'équipe Tauri recommande d'installer le gestionnaire de packages Yarn. Alors installons-le de cette façon:

 npm install -g yarn

Exécutez ensuite ce qui suit :

 yarn --version

Si tout fonctionnait, un numéro de version aurait dû être renvoyé.

Intégration de Tauri avec Vue.js

Maintenant que Tauri est installé, regroupons un projet Web existant. Vous pouvez trouver la démo en direct du projet sur Netlify. Allez-y et bifurquez le référentiel, qui servira de shell. Après l'avoir forké, assurez-vous de cloner le fork en exécutant ceci :

 git clone https://github.com/[yourUserName]/nota-web

Après avoir cloné le projet, exécutez la commande suivante pour installer les dépendances :

 yarn

Ensuite, lancez ceci :

 yarn serve

Votre application doit être exécutée sur localhost:8080 . Tuez le serveur en cours d'exécution et installons le plugin CLI Vue.js pour Tauri.

vue-cli-plugin-tauri

L'équipe Tauri a créé un plug-in CLI Vue.js qui installe et transforme rapidement votre application monopage (SPA) Vue.js en une minuscule application de bureau multiplateforme à la fois rapide et sécurisée. Installons ce plugin :

 vue add tauri

Une fois le plugin installé, ce qui peut prendre un certain temps, il vous demandera un titre de fenêtre. Tapez simplement nota et appuyez sur "Entrée".

Examinons les changements introduits par le plugin Tauri.

package.json

Le plugin Tauri a ajouté deux scripts dans la section scripts de notre fichier package.json . Elles sont:

 "tauri:build": "vue-cli-service tauri:build", "tauri:serve": "vue-cli-service tauri:serve"

Le script tauri:serve doit être utilisé pendant le développement. Alors exécutons-le :

 yarn tauri:serve

Ce qui précède téléchargerait les caisses Rust nécessaires pour démarrer notre application. Après cela, il lancera notre application en mode développement , où il créera une fenêtre WebView, avec débogage et Hot Module Reloading !

src-tauri

Vous remarquerez également que le plugin a ajouté un répertoire src-tauri à la racine du répertoire de votre application. Dans ce répertoire se trouvent des fichiers et des dossiers utilisés par Tauri pour configurer votre application de bureau. Voyons le contenu :

 icons/ src/ build.rs cmd.rs main.rs Cargo.lock Cargo.toml rustfmt.toml tauri.conf.json tauri.js

Le seul changement que nous aurions besoin de faire est dans src-tauri/Cargo.toml . Cargo.toml est comme le fichier package.json pour Rust. Trouvez la ligne ci-dessous dans Cargo.toml :

 name = "app"

Changez-le en ceci :

 name = "nota"

C'est tout ce que nous devons changer pour cet exemple !

Regroupement

Pour regrouper nota pour votre plate-forme actuelle, exécutez simplement ceci :

 yarn tauri:build

Remarque : Comme pour la fenêtre de développement, la première fois que vous l'exécuterez, il faudra un certain temps pour collecter les caisses Rust et tout construire. Lors des exécutions suivantes, il n'aura qu'à reconstruire les caisses Tauri elles-mêmes.

Lorsque ce qui précède est terminé, vous devriez avoir un binaire de nota pour votre système d'exploitation actuel. Pour moi, j'ai un binaire .deb créé dans le répertoire src-tauri/target/release/bundle/deb/

Aller multiplateforme

Vous avez probablement remarqué que la commande yarn tauri:build vient de générer un binaire pour votre système d'exploitation. Alors, générons les binaires pour d'autres systèmes d'exploitation. Pour y parvenir, nous allons mettre en place un workflow sur GitHub. Nous utilisons GitHub ici pour servir de support de distribution pour notre application multiplateforme. Ainsi, vos utilisateurs peuvent simplement télécharger les fichiers binaires dans l'onglet "Release" du projet. Le flux de travail que nous implémenterions créerait automatiquement nos binaires pour nous via la puissance des actions GitHub. Allons-y.

Création du flux de travail Tauri

Grâce à Jacob Bolda, nous avons un flux de travail pour créer et publier automatiquement des applications multiplateformes avec Tauri sur GitHub. Outre la création du binaire pour les différentes plates-formes (Linux, Mac et Windows), l'action téléchargerait également le binaire pour vous en tant que version sur GitHub. Il utilise également l'action Créer une version créée par Jacob pour y parvenir.

Pour utiliser ce workflow, créez un répertoire .github à la racine de nota-web . Dans ce répertoire, créez un autre répertoire nommé workflows . Nous créerions ensuite un fichier de workflow dans .github/workflows/ , et le release-tauri-app.yml .

Dans release-tauri-app.yml , nous ajouterions un flux de travail qui construit les binaires pour Linux, macOS et Windows. Ce flux de travail téléchargerait également les fichiers binaires en tant que version préliminaire sur GitHub. Le flux de travail serait déclenché chaque fois que nous poussions vers le maître.

Ouvrez release-tauri-app.yml et ajoutez l'extrait ci-dessous :

 name: release-tauri-app on: push: branches: - master paths: - '**/package.json' jobs: check-build: runs-on: ubuntu-latest timeout-minutes: 30 steps: — uses: actions/checkout@v2 — name: setup node uses: actions/setup-node@v1 with: node-version: 12 — name: install rust stable uses: actions-rs/toolchain@v1 with: toolchain: stable profile: minimal — name: install webkit2gtk run: | sudo apt-get update sudo apt-get install -y webkit2gtk-4.0 — run: yarn — name: build nota for tauri app run: yarn build — run: cargo install tauri-bundler --force — name: build tauri app run: yarn tauri:build create-release: needs: check-build runs-on: ubuntu-latest outputs: RELEASE_UPLOAD_URL: ${{ steps.create_tauri_release.outputs.upload_url }} steps: — uses: actions/checkout@v2 — name: setup node uses: actions/setup-node@v1 with: node-version: 12 — name: get version run: echo ::set-env name=PACKAGE_VERSION::$(node -p "require('./package.json').version") — name: create release id: create_tauri_release uses: jbolda/[email protected] env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} with: tag_name: ${{ matrix.package.name }}-v${{ env.PACKAGE_VERSION }} release_name: 'Release nota app v${{ env.PACKAGE_VERSION }}' body: 'See the assets to download this version and install.' draft: true prerelease: false create-and-upload-assets: needs: create-release runs-on: ${{ matrix.platform }} timeout-minutes: 30 strategy: fail-fast: false matrix: platform: [ubuntu-latest, macos-latest, windows-latest] include: — platform: ubuntu-latest buildFolder: bundle/deb ext: \_0.1.0_amd64.deb compressed: '' — platform: macos-latest buildFolder: bundle/osx ext: .app compressed: .tgz — platform: windows-latest buildFolder: '' ext: .x64.msi compressed: '' steps: — uses: actions/checkout@v2 — name: setup node uses: actions/setup-node@v1 with: node-version: 12 — name: install rust stable uses: actions-rs/toolchain@v1 with: toolchain: stable profile: minimal — name: install webkit2gtk (ubuntu only) if: matrix.platform == 'ubuntu-latest' run: | sudo apt-get update sudo apt-get install -y webkit2gtk-4.0 — run: yarn — name: build nota for tauri app run: yarn build — run: cargo install tauri-bundler --force — name: build tauri app run: yarn tauri:build — name: compress (macos only) if: matrix.platform == 'macos-latest' working-directory: ${{ format('./src-tauri/target/release/{0}', matrix.buildFolder ) }} run: tar -czf ${{ format('nota{0}{1}', matrix.ext, matrix.compressed ) }} ${{ format('nota{0}', matrix.ext ) }} — name: upload release asset id: upload-release-asset uses: actions/[email protected] env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} with: upload_url: ${{ needs.create-release.outputs.RELEASE_UPLOAD_URL }} asset_path: ${{ format('./src-tauri/target/release/{0}/nota{1}{2}', matrix.buildFolder, matrix.ext, matrix.compressed ) }} asset_name: ${{ format('nota{0}{1}', matrix.ext, matrix.compressed ) }} asset_content_type: application/zip — name: build tauri app in debug mode run: yarn tauri:build --debug — name: compress (macos only) if: matrix.platform == 'macos-latest' working-directory: ${{ format('./src-tauri/target/debug/{0}', matrix.buildFolder ) }} run: tar -czf ${{ format('nota{0}{1}', matrix.ext, matrix.compressed ) }} ${{ format('nota{0}', matrix.ext ) }} — name: upload release asset with debug mode on id: upload-release-asset-debug-mode uses: actions/[email protected] env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} with: upload_url: ${{ needs.create-release.outputs.RELEASE_UPLOAD_URL }} asset_path: ${{ format('./src-tauri/target/debug/{0}/nota{1}{2}', matrix.buildFolder, matrix.ext, matrix.compressed ) }} asset_name: ${{ format('nota-debug{0}{1}', matrix.ext, matrix.compressed ) }} asset_content_type: application/zip

Pour tester le flux de travail, validez et envoyez vos modifications à la branche master de votre fork. Après avoir poussé avec succès vers GitHub, vous pouvez ensuite cliquer sur l'onglet "Actions" dans GitHub, puis cliquer sur le lien "Vérifier la construction" pour voir la progression du flux de travail.

Une fois l'action exécutée avec succès, vous pouvez voir le brouillon de la version dans "Releases" sur la page du référentiel sur GitHub. Vous pouvez ensuite publier votre communiqué !

Conclusion

Cet article a introduit une chaîne d'outils polyglotte pour créer des applications natives sécurisées, multiplateformes et minuscules. Nous avons vu ce qu'est Tauri et comment l'intégrer à Vue.js. Enfin, nous avons regroupé notre première application Tauri en exécutant yarn tauri:build , et nous avons également utilisé une action GitHub pour créer des binaires pour Linux, macOS et Windows.

Faites-moi savoir ce que vous pensez de Tauri - je serais ravi de voir ce que vous construisez avec. Vous pouvez rejoindre le serveur Discord si vous avez des questions.

Le dépôt de cet article est sur GitHub. Consultez également les fichiers binaires générés par le workflow GitHub.