Redditech - Tauri

Reddit mobile, web and desktop application created with tauri, vuejs, capacitor, oauth and the reddit api

Source code for the demo page can be found on the tauri-reddit-mobile-app repo

Menu

• Setup Tauri for Windows
• Setup Tauri for macOS
• Setup Tauri for Linux
• Setup for Vue.js
• Icons - Generate icons for application
• Updating Dependencies
• Check Compile
• Test unitaire/e2e
• Test unitaire vitest
• Tauri Production
• Capacitor build and run application

Tech Stack 🛠

• Tauri (framework)
• Vue.js (framework front-end in Tauri)
• Rust (back-end in Tauri)
• NodeJS (environnement)
• Cordova

Infos for dependances / environment

It shows a concise list of information about the environment, Rust, Node.js and their versions as well as some relevant configurations.

npm run tauri:info:dependencies

Setup Tauri for Windows

1. Install Microsoft Visual Studio 2022 (MSVC v143 + Windows 10 SDK): https://visualstudio.microsoft.com/fr/vs/
2. Install WebView2 (if windows <= 10) : https://developer.microsoft.com/en-us/microsoft-edge/webview2/#download-section
3. Install Rust : https://www.rust-lang.org/tools/install
4. Install targets rust for build/compile Tauri :

npm run rust:install:target:windows

Setup Tauri for macOS

1. Install macOS et CLang :

xcode-select --install

2. Install Rust :

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

3. Install targets rust for build/compile Tauri :

npm run rust:install:target:macos

Setup Tauri for Linux

1. Dépendances système (Debian) :

sudo apt update
sudo apt install libwebkit2gtk-4.0-dev \
    build-essential \
    curl \
    wget \
    libssl-dev \
    libgtk-3-dev \
    libayatana-appindicator3-dev \
    librsvg2-dev

2. Install Rust :

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

3. Install targets rust for build/compile Tauri :

npm run rust:install:target:linux

Setup for Vue.js

# npm
# Install Node.js and npm
npm install -g npm

# npm
# Install dependencies
npm install

Icons - Generate icons for application

1. Informations - Type files :

icon.icns=macOS
icon.ico=Windows
*.png=Linux
Square*Logo.png& StoreLogo.png=Actuellement inutilisé mais destiné aux cibles AppX/MS Store.

2. Informations - Icon de base :

default format: .png
default size : 1024x1024px with transparency
default name file : ./app-icon.png

3. Generate icons plateforms all :

npm run tauri:generate:icon

4. Add files path icon in src-tauri/tauri.conf.json.

Updating Dependencies

NPM :

Pour voir les mise à jour des packages disponible de npm :

# npm
npm run npm:check:dependencies

Update depencencies to npm (Vue.js/Tauri) :

# npm
npm run npm:update:all-packages-major

Rust :

Update Rust (Rust language) :

# npm
npm run rust:update

# print version rust (rustc = compiler rust)
npm run rust:print:version

Cargo :

Pour voir les mise à jour des packages disponible de cargo :

# npm
# list the installed libraries
npm run cargo:check:dependencies

# npm
# lists installed libraries to see deep details
npm run cargo:check2:dependencies

Update depencencies to cargo (Rust/Tauri) :

# npm
# update just minors
npm run cargo:update:all-packages-minors

# npm
# update minors/major
npm run cargo:update:all-packages-major

Check Compile

Cette commande vérifie rapidement votre code pour s'assurer qu'il se compile mais ne produit pas d'exécutable et ne lance pas l'application (seulement pour s'assurer que le projet Rust compile) :

# npm
npm run dev:check-compile

Application type : Desktop (.exe)

# npm
npm run dev:desktop

Application type : WebApp
Start the development server on http://localhost:1473/

# npm
npm run dev:web

Test unitaire/e2e

Informations sur Cypress / Vitest et Test unitaire / e2e :

1. Cypress = Test e2e, Cypress est principalement utilisé pour les tests d'interface utilisateur et d'API, ce qui signifie qu'il est plus adapté pour tester le comportement global de votre application, y compris l'interaction de l'utilisateur avec l'interface utilisateur et les appels d'API.
   
   
2. Vitest = Test unitaire, test les components de Vue.js. Vitest utilise : Vitest + Vue test utils
   Vitest watch les fichiers de test unitaire (*.spec.ts) a chaque changement dans le code de vos test unitaire.

Informations sur les rapports de test générer avec Cypress et Vitest :

1. Cypress/e2e : Les rapports de test sont générer dans le dossier 'cypress/e2e/reports' (il ne sont pas générer avec les command 'npm run test:e2e:dev:..' il faut qu'il sois lancer en mode 'prod'. Le rapport de test générer est un fichier *.html
   
   
2. Vitest/unitaire : Les rapports de test sont générer dans le dossier 'vitest/unit/reports', et le rapport de test générer est un fichier *.html

Development :

# npm
# run test e2e and unit (Cypress / Vitest)
npm run test:unit-e2e:dev:chrome
npm run test:unit-e2e:dev:firefox
npm run test:unit-e2e:dev:edge

# npm
# run test e2e (Cypress)
npm run test:e2e:dev:chrome
npm run test:e2e:dev:firefox
npm run test:e2e:dev:edge

# npm
# run test unit (Vitest)
npm run test:unit:dev

Production :

# npm
# run test e2e and unit (Cypress / Vitest)
npm run test:unit-e2e:prod:chrome
npm run test:unit-e2e:prod:firefox
npm run test:unit-e2e:prod:edge

# npm
# run test e2e (Cypress)
npm run test:e2e:prod:chrome
npm run test:e2e:prod:firefox
npm run test:e2e:prod:edge

# npm
# run test unit (Vitest)
npm run test:unit:prod

Test unitaire vitest

npm run test
npm run test:unit:dev
npm run test:unit:dev:gui
npm run test:unit:prod

Tauri Production

Install for production - Windows / macOS / Linux :

Par défaut, Rust installe uniquement les chaînes d'outils pour la cible de votre machine.
Vous devez donc d'abord installer la chaîne d'outils pour le system souhaiter.

Exemple pour ajouter/installer la chaine d'outils Windows 32bit :

rustup target add i686-pc-windows-msvc

Supprimer une target spécifique :

rustup target remove i686-pc-windows-msvc

Lister les targets déjà installer :

rustup target list

Targets disponible : https://doc.rust-lang.org/nightly/rustc/platform-support.html

Il y a toujours une chaine d'outils qui est utilisé par défault, c'est celui qui est choisi lors de la compilation
Pour connaitre la chaine d'outils actuellement utilisé :

rustup default

Pour changer la chaine d'outils par défault utilisé, exemple pour Windows-32bit :

rustup default stable-i686-pc-windows-msvc

Réduire la taille de l'application :

Documentation : https://tauri.app/fr/v1/guides/building/app-size#rust-build-time-optimizations

1. Rust Build-Time Optimizations (optimisation lors du build) en ajoutant des données dans le fichier Cargot.toml :

  [profile.release]
  panic = "abort" # Éliminer la logique de nettoyage de panique coûteuse
  codegen-units = 1 # Compiler les crates l'une après l'autre pour que le compilateur puisse optimiser mieux
  lto = true # Active les optimisations de link
  opt-level = "s" # Optimiser la taille du binaire
  strip = true # Supprimer automatiquement les symboles du binaire.

Après avoir build, récupérer le binaires et/ou le programme d'installation pour le système d'exploitation ciblé :

Cette commande intègre vos ressources Web dans un seul binaire avec votre code Rust.
Le binaire lui-même sera situé dans :

src-tauri/target/release/[app name]

Et les programmes d'installation seront situés dans :

src-tauri/target/release/bundle/

Build - Windows - .msi / .exe :

IMPORTANT : Veuillez noter que les installateurs de .msi ne peuvent être créés que sous Windows car la compilation croisée ne fonctionne pas encore.

IMPORTANT (2) : Windows 11 sont compatible nativement, mais en-dessous de Windows 11 il n'y as pas WebView2 installer par défault.
Il faudra le packager dans l'installeur .msi pour que ce sois compatible à partir de Windows7 et +.

Dossier src-tauri :

64-bit Windows (Windows 7+) :

npm run build:windows:x64

32-bit Windows (Windows 7+) :

npm run build:windows:x86

Build - Linux - .deb / .AppImage :

IMPORTANT : Veuillez noter que les paquets .deb / .appimage ne peuvent être créés que sur Linux car la compilation croisée ne fonctionne pas encore.

IMPORTANT (2) : Compiler un .appimage pour faciliter les utilisateurs. Une application .appimage est similaire à un fichier .exe sur Windows.

ARM64 Linux (kernel 4.1, glibc 2.17+) :

npm run build:linux:arm64

32-bit Linux (kernel 3.2+, glibc 2.17+) :

npm run build:linux:x86

64-bit Linux (kernel 3.2+, glibc 2.17+) :

npm run build:linux:x64

Build - macOS - .app / .dmg :

IMPORTANT : Veuillez noter que les bundles .app et .dmg ne peuvent être créés que sur macOS car la compilation croisée ne fonctionne pas encore.

IMPORTANT (2) : Compiler un .app pour faciliter les utilisateurs. Une application .app est similaire à un fichier .exe sur Windows.

IMPORTANT (3) : La version minimale du système d'exploitation nécessaire pour qu'une application Tauri puisse fonctionner sur macOS est 10.13. Si vous avez besoin du support pour les nouvelles API macOS comme window.print qui n'est pris en charge que depuis la version macOS 11.

Dossier src-tauri :

ARM64 macOS (11.0+, Big Sur+) : produit un binaire macOS pour les machines Apple en silicium.

npm run build:macos:arm64_silicium

64-bit macOS (10.7+, Lion+) : produit un binaire macOS pour les machines Apple basé sur Intel.

npm run build:macos:x64_intel

ARM64/64-bit macOS (11.0+, Big Sur+ / 10.7+, Lion+) : produit un binaire macOS universel qui s'exécute à la fois sur le silicium Apple et sur les Mac à processeur Intel.

npm run build:macos:universal

Checkout the deployment documentation for more information.

Capacitor build and run application

npm run android
npm run android:studio