Winzige Desktop-Apps mit Tauri und Vue.js erstellen

Veröffentlicht: 2022-03-10
Kurze Zusammenfassung ↬ Tauri ist eine Toolchain zum Erstellen kleiner, schneller und sicherer Desktop-Apps aus Ihrem vorhandenen HTML, CSS und JavaScript. In diesem Artikel erklärt Kelvin, wie Tauri gut mit dem progressiven Framework Vue.js spielt, indem es beide Technologien integriert, indem es eine Beispiel-Web-App namens nota als native Anwendung bündelt.

Technologie macht unser Leben besser, nicht nur für Benutzer, sondern auch für Schöpfer (Entwickler und Designer). In diesem Artikel stelle ich euch Tauri vor. Dieser Artikel wird Ihnen nützlich sein, wenn:

  • Sie haben Anwendungen im Web mit HTML, CSS und JavaScript erstellt und möchten dieselben Technologien verwenden, um Apps zu erstellen, die auf Windows-, macOS- oder Linux-Plattformen ausgerichtet sind;
  • Sie erstellen bereits plattformübergreifende Desktop-Apps mit Technologien wie Electron und möchten Alternativen prüfen;
  • Sie möchten Apps mit Webtechnologien für Linux-Distributionen wie PureOS erstellen;
  • Sie sind ein Rust-Enthusiast und möchten es anwenden, um native plattformübergreifende Anwendungen zu erstellen.

Wir werden uns ansehen, wie man aus einem bestehenden Webprojekt eine native plattformübergreifende Anwendung erstellt. Lasst uns anfangen!

Hinweis : Dieser Artikel geht davon aus, dass Sie mit HTML, CSS, JavaScript und Vue.js vertraut sind.

Mehr nach dem Sprung! Lesen Sie unten weiter ↓

Was ist Tauri?

Die offizielle Website fasst Tauri gut zusammen:

  • Tauri ist eine mehrsprachige Toolchain zum Erstellen sichererer nativer Apps mit kleinen und schnellen Binärdateien. Mit „polyglott“ meine ich, dass Tauri mehrere Programmiersprachen verwendet. Derzeit werden Rust, JavaScript und TypeScript verwendet. Aber es ist geplant, dass Sie Go, C++, Python und mehr verwenden können.
  • Sie können jedes HTML- und JavaScript-basierte Front-End-Framework wie Vue.js, React oder Angular verwenden, um eine native Desktop-App zu erstellen, und es kann in jede Pipeline integriert werden.
  • Es hilft Ihnen beim Erstellen und Bündeln von Binärdateien für die wichtigsten Desktop-Plattformen (Mobile und WebAssembly folgen in Kürze).

Tauri ermöglicht Ihnen also im Grunde, Webtechnologien zu verwenden, um winzige und sichere native Desktop-Apps zu erstellen.

Auf seiner GitHub-Seite wird Tauri als Framework-agnostische Toolchain zum Erstellen hochsicherer nativer Apps beschrieben, die winzige Binärdateien (dh Dateigröße) haben und sehr schnell sind (dh minimale RAM-Nutzung).

Warum nicht Elektron?

Ein beliebtes Tool für die Verwendung von Webtechnologien zum Erstellen von Desktop-Anwendungen ist Electron.

Electron-Apps haben jedoch eine ziemlich große Bundle-Größe und sie neigen dazu, viel Speicherplatz zu beanspruchen, wenn sie ausgeführt werden. So vergleicht sich Tauri mit Electron:

  • Bündeln
    Die Größe einer Tauri-App kann weniger als 600 KB betragen.
  • Erinnerung
    Der Footprint einer Tauri-App ist weniger als halb so groß wie eine Electron-App.
  • Lizenz
    Bei Tauri ist eine Nachlizenzierung möglich, bei Electron nicht. Electron wird direkt mit Chromium geliefert. Chromium enthält jedoch ein digitales Rechteverwaltungssystem namens Widevine. Die Aufnahme von Widevine in Chromium macht Apps, die mit Electron erstellt wurden, von Benutzern von Plattformen wie PureOS aus dem einzigen Grund verpönt, dass es sich nicht um kostenlose Open-Source-Software (FLOSS) handelt. Plattformen wie PureOS werden von der Free Software Foundation (FSF) verifiziert. Das bedeutet, dass sie nur kostenlose und Open-Source-Software in ihren App-Stores veröffentlichen können.

Kurz gesagt, wenn Ihre App mit Electron erstellt wurde, wird sie niemals offiziell im PureOS Store ausgeliefert. Dies sollte ein Problem für Entwickler sein, die auf solche Distributionen abzielen.

Weitere Funktionen von Tauri

  • Sicherheit ist dem Tauri-Team sehr wichtig. Mit Tauri erstellte Apps sollen von Anfang an sicher sein.
  • Tauri ist mit jedem Front-End-Framework kompatibel, sodass Sie Ihren Stack nicht ändern müssen.
  • Es verfügt über viele Designmuster, die Ihnen bei der Auswahl wichtiger Funktionen mit einfachen Konfigurationen helfen.

Vorteile von Tauri

  • Mit Tauri können Sie die Codebasis, die Sie für das Web erstellt haben, in eine native Desktop-App verwandeln, ohne etwas zu ändern.
  • Obwohl Sie Rust in einem Tauri-basierten Projekt verwenden könnten, ist dies völlig optional. In diesem Fall müssten Sie nichts an Ihrer ursprünglichen Codebasis für das Web ändern.

Tauri aus der realen Welt

Wenn Sie schon länger Teil der Vue.js-Community sind, haben Sie sicher schon von Guillaume Chau gehört, einem Mitglied des Kernteams von Vue.js. Er ist verantwortlich für die Vue.js-Befehlszeilenschnittstelle (CLI) sowie für andere großartige Vue.js-Bibliotheken. Kürzlich hat er Guijs erstellt, was für „Graphical User Interface for JavaScript Projects“ steht. Es ist eine Tauri-betriebene native Desktop-App zur visuellen Verwaltung Ihrer JavaScript-Projekte.

Guijs ist ein Beispiel dafür, was mit Tauri möglich ist, und die Tatsache, dass ein Kernmitglied des Vue.js-Teams an der App arbeitet, sagt uns, dass Tauri gut mit Vue.js (neben anderen Front-End-Frameworks) zusammenspielt. Sehen Sie sich bei Interesse das guijs-Repository auf GitHub an. Und ja, es ist Open Source.

Wie Tauri funktioniert

Auf hoher Ebene verwendet Tauri Node.js, um ein HTML-, CSS- und JavaScript-Rendering-Fenster als Benutzeroberfläche (UI) zu erstellen, das von Rust verwaltet und gebootstrapped wird. Das Produkt ist eine monolithische Binärdatei, die als gängige Dateitypen für Linux (deb/appimage), macOS (app/dmg) und Windows (exe/msi) verteilt werden kann.

Wie Tauri-Apps erstellt werden

Eine Tauri-App wird über die folgenden Schritte erstellt:

  1. Erstellen Sie zunächst eine Schnittstelle in Ihrem GUI-Framework und bereiten Sie HTML, CSS und JavaScript für die Verwendung vor.
  2. Das Tauri Node.js CLI nimmt es und rüstet den Rust-Runner entsprechend Ihrer Konfiguration auf.
  3. Im Entwicklungsmodus erstellt es ein WebView-Fenster mit Debugging und Hot Module Reloading .
  4. Im Build-Modus rüstet es den Bundler und erstellt eine endgültige Anwendung gemäß Ihren Einstellungen.

Einrichten Ihrer Umgebung

Nachdem Sie nun wissen, was Tauri ist und wie es funktioniert, möchte ich Sie durch die Einrichtung Ihres Computers für die Entwicklung mit Tauri führen.

Hinweis : Das Setup hier ist für Linux-Rechner, aber Anleitungen für macOS und für Windows sind ebenfalls verfügbar.

Linux-Setup

Die polyglotte Natur von Tauri bedeutet, dass es eine Reihe von Tool-Abhängigkeiten erfordert. Beginnen wir damit, einige der Abhängigkeiten zu installieren. Führen Sie Folgendes aus:

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

Sobald das obige erfolgreich ist, fahren Sie mit der Installation von Node.js fort (falls Sie es noch nicht haben), da Tauri seine Laufzeit benötigt. Sie können dies tun, indem Sie Folgendes ausführen:

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

Dadurch wird nvm (Node.js-Versionsmanager) installiert, mit dem Sie die Node.js-Laufzeit einfach verwalten und problemlos zwischen den Versionen von Node.js wechseln können. Führen Sie nach der Installation dies aus, um eine Liste der Node.js-Versionen anzuzeigen:

 nvm ls-remote

Zum Zeitpunkt des Schreibens ist die neueste Version 14.1.0. Installieren Sie es so:

 nvm install v14.1.0

Sobald Node.js vollständig eingerichtet ist, müssen Sie den Rust-Compiler und den Rust-Paketmanager Cargo installieren. Der folgende Befehl würde beide installieren:

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

Stellen Sie nach Ausführung dieses Befehls sicher, dass sich Cargo und Rust in Ihrem $PATH befinden, indem Sie Folgendes ausführen:

 rust --version

Wenn alles gut gegangen ist, sollte dies eine Versionsnummer zurückgeben.

Stellen Sie gemäß der Tauri-Dokumentation sicher, dass Sie die neueste Version verwenden, indem Sie den folgenden Befehl ausführen:

 $ rustup update stable

Voila! Sie sind dem Ziel, Ihre Maschine zu 100 % für Tauri vorzubereiten, einen Schritt näher gekommen. Jetzt muss nur noch die tauri-bundler Kiste installiert werden. Am besten beenden Sie Ihre CLI und führen den folgenden Befehl in einem neuen CLI-Fenster aus:

 $ cargo install tauri-bundler --force

Eureka! Wenn alles geklappt hat, ist Ihre Maschine jetzt bereit für Tauri. Als nächstes beginnen wir mit der Integration von Tauri in Vue.js. Lasst uns anfangen!

Garn

Das Tauri-Team empfiehlt die Installation des Yarn-Paketmanagers. Also lass es uns so installieren:

 npm install -g yarn

Führen Sie dann Folgendes aus:

 yarn --version

Wenn alles funktioniert hat, sollte eine Versionsnummer zurückgegeben werden.

Integration von Tauri mit Vue.js

Nachdem wir Tauri installiert haben, bündeln wir ein vorhandenes Webprojekt. Die Live-Demo des Projekts finden Sie auf Netlify. Fahren Sie fort und forken Sie das Repository, das als Shell dienen wird. Stellen Sie nach dem Forken sicher, dass Sie den Fork klonen, indem Sie Folgendes ausführen:

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

Führen Sie nach dem Klonen des Projekts Folgendes aus, um die Abhängigkeiten zu installieren:

 yarn

Führen Sie dann Folgendes aus:

 yarn serve

Ihre Anwendung sollte auf localhost:8080 ausgeführt werden. Beenden Sie den laufenden Server und installieren Sie das Vue.js-CLI-Plugin für Tauri.

vue-cli-plugin-tauri

Das Tauri-Team hat ein Vue.js-CLI-Plugin entwickelt, das Ihre Vue.js-Single-Page-Anwendung (SPA) schnell manipuliert und in eine kleine plattformübergreifende Desktop-App verwandelt, die sowohl schnell als auch sicher ist. Lassen Sie uns dieses Plugin installieren:

 vue add tauri

Nachdem das Plugin installiert ist, was eine Weile dauern kann, werden Sie nach einem Fenstertitel gefragt. Geben Sie einfach nota ein und drücken Sie „Enter“.

Lassen Sie uns die Änderungen untersuchen, die durch das Tauri-Plugin eingeführt wurden.

Paket.json

Das Tauri-Plug-in hat zwei Skripte im Abschnitt scripts unserer Datei package.json . Sie sind:

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

Das tauri:serve Skript sollte während der Entwicklung verwendet werden. Also lassen Sie es uns ausführen:

 yarn tauri:serve

Das obige würde die Rust-Kisten herunterladen, die zum Starten unserer App benötigt werden. Danach wird unsere App im Entwicklungsmodus gestartet, wo ein WebView-Fenster mit Debugging und Hot Module Reloading erstellt wird!

src-tauri

Sie werden auch feststellen, dass das Plugin ein src-tauri Verzeichnis zum Stammverzeichnis Ihres App-Verzeichnisses hinzugefügt hat. In diesem Verzeichnis befinden sich Dateien und Ordner, die von Tauri zum Konfigurieren Ihrer Desktop-App verwendet werden. Schauen wir uns den Inhalt an:

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

Die einzige Änderung, die wir vornehmen müssten, ist in src-tauri/Cargo.toml . Cargo.toml ist wie die package.json -Datei für Rust. Finden Sie die folgende Zeile in Cargo.toml :

 name = "app"

Ändern Sie es so:

 name = "nota"

Das ist alles, was wir für dieses Beispiel ändern müssen!

Bündelung

Um nota für Ihre aktuelle Plattform zu bündeln, führen Sie einfach Folgendes aus:

 yarn tauri:build

Hinweis : Wie beim Entwicklungsfenster wird es beim ersten Start einige Zeit dauern, die Rust-Kisten zu sammeln und alles zu bauen. Bei späteren Läufen müssen nur die Tauri-Kisten selbst wieder aufgebaut werden.

Wenn das obige abgeschlossen ist, sollten Sie eine nota -Binärdatei für Ihr aktuelles Betriebssystem haben. Für mich habe ich eine .deb -Binärdatei im Verzeichnis src-tauri/target/release/bundle/deb/ erstellt.*

Plattformübergreifend gehen

Sie haben wahrscheinlich bemerkt, dass der Befehl yarn tauri:build gerade eine Binärdatei für Ihr Betriebssystem generiert hat. Lassen Sie uns also die Binärdateien für andere Betriebssysteme generieren. Dazu richten wir einen Workflow auf GitHub ein. Wir nutzen hier GitHub als Distributionsmedium für unsere plattformübergreifende App. Ihre Benutzer könnten also einfach die Binärdateien auf der Registerkarte „Release“ des Projekts herunterladen. Der Workflow, den wir implementieren würden, würde unsere Binärdateien automatisch für uns über die Leistungsfähigkeit von GitHub-Aktionen erstellen. Lasst uns anfangen.

Erstellen des Tauri-Workflows

Dank Jacob Bolda haben wir einen Workflow zum automatischen Erstellen und Freigeben von plattformübergreifenden Apps mit Tauri auf GitHub. Neben dem Erstellen der Binärdatei für die verschiedenen Plattformen (Linux, Mac und Windows) würde die Aktion die Binärdatei auch für Sie als Release auf GitHub hochladen. Um dies zu erreichen, wird auch die von Jacob erstellte Aktion „Release erstellen“ verwendet.

Um diesen Workflow zu verwenden, erstellen Sie ein .github -Verzeichnis im Stammverzeichnis von nota-web . Erstellen Sie in diesem Verzeichnis ein weiteres Verzeichnis namens workflows . Wir würden dann eine Workflow-Datei in .github/workflows/ erstellen und sie release-tauri-app.yml .

In release-tauri-app.yml würden wir einen Workflow hinzufügen, der die Binärdateien für Linux, macOS und Windows erstellt. Dieser Workflow würde auch die Binärdateien als Draft-Release auf GitHub hochladen. Der Workflow würde immer dann ausgelöst, wenn wir zum Master pushen.

Öffnen release-tauri-app.yml und fügen Sie das folgende Snippet hinzu:

 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

Um den Workflow zu testen, committe und pushe deine Änderungen in den master -Branch deines Forks. Nachdem Sie erfolgreich auf GitHub gepusht haben, können Sie dann in GitHub auf die Registerkarte „Aktionen“ und dann auf den Link „Build prüfen“ klicken, um den Fortschritt des Workflows anzuzeigen.

Nach erfolgreicher Ausführung der Aktion können Sie den Release-Entwurf unter „Releases“ auf der Repository-Seite auf GitHub sehen. Anschließend können Sie Ihre Freigabe veröffentlichen!

Fazit

In diesem Artikel wurde eine mehrsprachige Toolchain zum Erstellen sicherer, plattformübergreifender und winziger nativer Anwendungen vorgestellt. Wir haben gesehen, was Tauri ist und wie man es in Vue.js integriert. Schließlich haben wir unsere erste Tauri-App gebündelt, indem wir das yarn tauri:build ausgeführt haben, und wir haben auch eine GitHub-Aktion verwendet, um Binärdateien für Linux, macOS und Windows zu erstellen.

Lassen Sie mich wissen, was Sie von Tauri halten – ich wäre gespannt, was Sie damit bauen. Sie können dem Discord-Server beitreten, wenn Sie Fragen haben.

Das Repository für diesen Artikel befindet sich auf GitHub. Sehen Sie sich auch die vom GitHub-Workflow generierten Binärdateien an.