From 62421651b7fb4fe77acafb9eddea16dfd90b4bb7 Mon Sep 17 00:00:00 2001 From: robertDinca2003 Date: Tue, 18 Mar 2025 23:12:03 +0200 Subject: [PATCH 1/4] Semi set up --- docs/tauri/0.getting-started/index.md | 1 + docs/tauri/0.getting-started/linux.md | 5 + docs/tauri/0.getting-started/macOs.md | 5 + docs/tauri/0.getting-started/windows.md | 168 ++++++++++++++++++ .../1.build-your-own-text-editor/index.md | 5 + docs/tauri/2.next-challenges.md | 1 + 6 files changed, 185 insertions(+) create mode 100644 docs/tauri/0.getting-started/index.md create mode 100644 docs/tauri/0.getting-started/linux.md create mode 100644 docs/tauri/0.getting-started/macOs.md create mode 100644 docs/tauri/0.getting-started/windows.md create mode 100644 docs/tauri/1.build-your-own-text-editor/index.md create mode 100644 docs/tauri/2.next-challenges.md diff --git a/docs/tauri/0.getting-started/index.md b/docs/tauri/0.getting-started/index.md new file mode 100644 index 0000000..ac8c8b0 --- /dev/null +++ b/docs/tauri/0.getting-started/index.md @@ -0,0 +1 @@ +# Getting Started - Requirements diff --git a/docs/tauri/0.getting-started/linux.md b/docs/tauri/0.getting-started/linux.md new file mode 100644 index 0000000..9de36de --- /dev/null +++ b/docs/tauri/0.getting-started/linux.md @@ -0,0 +1,5 @@ +--- +sidebar_position: 2 +--- + +# Linux diff --git a/docs/tauri/0.getting-started/macOs.md b/docs/tauri/0.getting-started/macOs.md new file mode 100644 index 0000000..e12341d --- /dev/null +++ b/docs/tauri/0.getting-started/macOs.md @@ -0,0 +1,5 @@ +--- +sidebar_position: 3 +--- + +# MacOS diff --git a/docs/tauri/0.getting-started/windows.md b/docs/tauri/0.getting-started/windows.md new file mode 100644 index 0000000..c419018 --- /dev/null +++ b/docs/tauri/0.getting-started/windows.md @@ -0,0 +1,168 @@ +--- +sidebar_position: 1 +--- + +# Windows + +--- + +## **Step 1: Install Required Software** + +### 1. Install Deno (JavaScript/TypeScript Runtime) + +- **Website**: [https://deno.land/](https://deno.land/) +- **Steps**: + 1. Open PowerShell + 2. Run the following command: + ```powershell + irm https://deno.land/install.ps1 | iex + ``` + +--- + +### 2. Install Rust (Tauri Backend) + +- **Website**: [https://www.rust-lang.org/](https://www.rust-lang.org/) +- **Steps**: + 1. Go to the Rust website. + 2. Click the **"Get Started"** button. + 3. Click the **"Other Installation Methods"** hyperlink + 4. Click on `rustup-init.exe` to get the installer. + 5. Run the installer and follow the prompts. + - When prompted, choose **"Proceed with installation"**. + 6. Restart your computer after installation. + +--- + +### 3. Install WebView2 (Windows WebView Runtime) + +- **Website**: [https://developer.microsoft.com/en-us/microsoft-edge/webview2/](https://developer.microsoft.com/en-us/microsoft-edge/webview2/) +- **Steps**: + 1. Go to the WebView2 website. + 2. Download the **Evergreen Standalone Installer**. + 3. Run the installer and follow the prompts. + +--- + +### 4. Install Visual Studio Build Tools (Required for Rust) + +- **Website**: [https://visualstudio.microsoft.com/visual-cpp-build-tools/](https://visualstudio.microsoft.com/visual-cpp-build-tools/) +- **Steps**: + 1. Go to the Visual Studio Build Tools website. + 2. Download the installer. + 3. Run the installer and: + - Select **"Desktop development with C++"** workload. + - Click **"Install"**. + +--- + +## **Step 2: Create a Tauri Project** + +### 1. Open VS Code + +- If you don’t have VS Code, download it from [https://code.visualstudio.com/](https://code.visualstudio.com/). + +### 2. Open the Terminal in VS Code + +- Press **Ctrl + `** (backtick) to open the terminal. + +### 3. Run the Tauri Project Generator + +- In the terminal, run this command: + + ```powershell + deno run -A npm:create-tauri-app@latest + ``` + +- **Follow the prompts**: + 1. **Project name**: Enter a name (e.g., `tauri-deno-app`). + 2. **Package manager**: Choose **Deno**. + 3. **UI template**: Choose **Vite**. + 4. **UI variant**: Choose **TypeScript** (recommended). + +--- + +## **Step 3: Configure the Project** + +### 1. Open the Project in VS Code + +- Click **File → Open Folder** and select the folder created by the Tauri generator (e.g., `tauri-deno-app`). + +### 2. Install Tauri API for Deno + +- In the terminal, run: + + ```powershell + deno add @tauri-apps/api + ``` + +--- + +## **Step 4: Run the Development Server** + +### 1. Start the Frontend + +- In the terminal, run: + + ```powershell + deno task dev + ``` + + This will start the Vite development server. + +### 2. Start the Tauri Backend + +- Open a **new terminal** in VS Code (Ctrl + Shift + `). +- Run: + + ```powershell + deno task tauri + ``` + + This will open a desktop window with your app running. + +--- + +## **Step 5: Build the App** + +### 1. Build the Production Version + +- In the terminal, run: + + ```powershell + deno task build + ``` + +### 2. Find the Installer + +- The installer will be located in: + ``` + src-tauri/target/release/bundle/msi/tauri-deno-app_0.1.0_x64_en-US.msi + ``` + +--- + +## **Troubleshooting** + +### 1. WebView2 Issues + +- Ensure WebView2 is installed by visiting [https://developer.microsoft.com/en-us/microsoft-edge/webview2/](https://developer.microsoft.com/en-us/microsoft-edge/webview2/). + +### 2. Rust/Cargo Errors + +- Visit [https://www.rust-lang.org/](https://www.rust-lang.org/) and reinstall Rust if needed. + +### 3. Deno Permissions + +- If Deno throws permission errors, use the `-A` flag to allow all permissions: + ```powershell + deno run -A npm:create-tauri-app@latest + ``` + +--- + +## **Final Notes** + +- **Deno Documentation**: [https://deno.land/manual](https://deno.land/manual) +- **Tauri Documentation**: [https://tauri.app/v1/guides/](https://tauri.app/v1/guides/) +- **Vite Documentation**: [https://vitejs.dev/guide/](https://vitejs.dev/guide/) diff --git a/docs/tauri/1.build-your-own-text-editor/index.md b/docs/tauri/1.build-your-own-text-editor/index.md new file mode 100644 index 0000000..3314728 --- /dev/null +++ b/docs/tauri/1.build-your-own-text-editor/index.md @@ -0,0 +1,5 @@ +--- +sidebar_position: 2 +--- + +# Build your own text editor diff --git a/docs/tauri/2.next-challenges.md b/docs/tauri/2.next-challenges.md new file mode 100644 index 0000000..0d6bc3f --- /dev/null +++ b/docs/tauri/2.next-challenges.md @@ -0,0 +1 @@ +# Next Challenges From 9b868afd2108e18d39865a4bb276273ad28ee4d9 Mon Sep 17 00:00:00 2001 From: robertDinca2003 Date: Wed, 19 Mar 2025 23:10:15 +0200 Subject: [PATCH 2/4] Added:introduction; prerequisites; project setup; final word --- docs/tauri/0.getting-started/index.md | 1 - docs/tauri/0.getting-started/linux.md | 5 - docs/tauri/0.getting-started/macOs.md | 5 - docs/tauri/0.prerequisites/index.md | 31 +++ docs/tauri/0.prerequisites/linux.md | 64 +++++++ docs/tauri/0.prerequisites/macOs.md | 82 ++++++++ .../windows.md | 89 +-------- docs/tauri/1.getting-started.md | 181 ++++++++++++++++++ .../index.md | 0 docs/tauri/2.next-challenges.md | 1 - docs/tauri/3.next-challenges.md | 68 +++++++ docs/tauri/index.md | 84 +++++++- 12 files changed, 511 insertions(+), 100 deletions(-) delete mode 100644 docs/tauri/0.getting-started/index.md delete mode 100644 docs/tauri/0.getting-started/linux.md delete mode 100644 docs/tauri/0.getting-started/macOs.md create mode 100644 docs/tauri/0.prerequisites/index.md create mode 100644 docs/tauri/0.prerequisites/linux.md create mode 100644 docs/tauri/0.prerequisites/macOs.md rename docs/tauri/{0.getting-started => 0.prerequisites}/windows.md (58%) create mode 100644 docs/tauri/1.getting-started.md rename docs/tauri/{1.build-your-own-text-editor => 2.build-your-own-text-editor}/index.md (100%) delete mode 100644 docs/tauri/2.next-challenges.md create mode 100644 docs/tauri/3.next-challenges.md diff --git a/docs/tauri/0.getting-started/index.md b/docs/tauri/0.getting-started/index.md deleted file mode 100644 index ac8c8b0..0000000 --- a/docs/tauri/0.getting-started/index.md +++ /dev/null @@ -1 +0,0 @@ -# Getting Started - Requirements diff --git a/docs/tauri/0.getting-started/linux.md b/docs/tauri/0.getting-started/linux.md deleted file mode 100644 index 9de36de..0000000 --- a/docs/tauri/0.getting-started/linux.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -sidebar_position: 2 ---- - -# Linux diff --git a/docs/tauri/0.getting-started/macOs.md b/docs/tauri/0.getting-started/macOs.md deleted file mode 100644 index e12341d..0000000 --- a/docs/tauri/0.getting-started/macOs.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -sidebar_position: 3 ---- - -# MacOS diff --git a/docs/tauri/0.prerequisites/index.md b/docs/tauri/0.prerequisites/index.md new file mode 100644 index 0000000..d11072d --- /dev/null +++ b/docs/tauri/0.prerequisites/index.md @@ -0,0 +1,31 @@ +--- +title: Prerequisites +--- + +Before you start building your Tauri app, ensure your system meets the following requirements. Tauri relies on several tools and dependencies to function properly. Follow the instructions for your operating system. + +--- + +### **1. Supported Operating Systems** + +Tauri supports the following operating systems: + +- **Windows** (10/11, 64-bit) +- **Linux** (Debian/Ubuntu, Fedora, Arch, etc.) +- **macOS** (10.13 or later) + +--- + +### 2. Chose your guide based on your operating system + +- [Windows Guide](/docs/tauri/prerequisites/windows) +- [Linux Guide](/docs/tauri/prerequisites/linux) +- [MacOS Guide](/docs/tauri/prerequisites/macOs) + +- **[More detailed documentation](https://tauri.app/start/prerequisites/#rust)** + +--- + +### Already have all the prerequisites installed? Great job! + +- [Getting Started](/docs/tauri/getting-started) diff --git a/docs/tauri/0.prerequisites/linux.md b/docs/tauri/0.prerequisites/linux.md new file mode 100644 index 0000000..7919f03 --- /dev/null +++ b/docs/tauri/0.prerequisites/linux.md @@ -0,0 +1,64 @@ +--- +sidebar_position: 2 +title: Linux +--- + +# **Tauri Setup Guide for Linux** + +--- + +## **Step 1: Install Required Software** + +#### **Linux (Debian/Ubuntu)** + +1. **Install Deno**: + + - Open a terminal and run: + ```bash + curl -fsSL https://deno.land/x/install/install.sh | sh + ``` + +2. **Install Rust**: + + - Open a terminal and run: + ```bash + curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh + ``` + - Restart your terminal after installation. + +3. **Install System Dependencies**: + - Open a terminal and run: + ```bash + sudo apt update + sudo apt install -y libwebkit2gtk-4.0-dev \ + build-essential \ + curl \ + wget \ + libssl-dev \ + libgtk-3-dev \ + libayatana-appindicator3-dev + ``` + +--- + +## **Troubleshooting** + +- **Missing Dependencies**: + - Run: + ```bash + sudo apt update + sudo apt install -y libwebkit2gtk-4.0-dev build-essential curl wget libssl-dev libgtk-3-dev libayatana-appindicator3-dev + ``` +- **Deno Permissions**: + - Use the `-A` flag to allow all permissions: + ```bash + deno run -A npm:create-tauri-app@latest + ``` + +--- + +## **Final Notes** + +- **Deno Documentation**: [https://deno.land/manual](https://deno.land/manual) +- **Tauri Documentation**: [https://tauri.app/v1/guides/](https://tauri.app/v1/guides/) +- **Vite Documentation**: [https://vitejs.dev/guide/](https://vitejs.dev/guide/) diff --git a/docs/tauri/0.prerequisites/macOs.md b/docs/tauri/0.prerequisites/macOs.md new file mode 100644 index 0000000..fc9753c --- /dev/null +++ b/docs/tauri/0.prerequisites/macOs.md @@ -0,0 +1,82 @@ +--- +sidebar_position: 3 +title: MacOs +--- + +# **Tauri Setup Guide for macOS** + +--- + +## **Step 1: Install Required Software** + +#### **1.1 Install Xcode Command Line Tools** + +1. Open the **Terminal** (press `Cmd + Space`, type `Terminal`, and press Enter). +2. Run the following command: + ```bash + xcode-select --install + ``` +3. Follow the prompts to install the Xcode Command Line Tools. + +--- + +#### **1.2 Install Homebrew (Package Manager)** + +1. Open the **Terminal**. +2. Run the following command: + ```bash + /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" + ``` +3. Follow the prompts to complete the installation. + +--- + +#### **1.3 Install Deno** + +1. Open the **Terminal**. +2. Run the following command: + ```bash + brew install deno + ``` + +--- + +#### **1.4 Install Rust** + +1. Open the **Terminal**. +2. Run the following command: + ```bash + curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh + ``` +3. Follow the prompts to complete the installation. +4. Restart your terminal after installation. + +--- + +## **Troubleshooting** + +### **1. Xcode Command Line Tools Issues** + +- If `xcode-select --install` fails, download Xcode from the [Mac App Store](https://apps.apple.com/us/app/xcode/id497799835). + +### **2. Rust/Cargo Errors** + +- Update Rust: + ```bash + rustup update + ``` + +### **3. Deno Permissions** + +- If Deno throws permission errors, use the `-A` flag to allow all permissions: + ```bash + deno run -A npm:create-tauri-app@latest + ``` + +--- + +## **Final Notes** + +- **Deno Documentation**: [https://deno.land/manual](https://deno.land/manual) +- **Tauri Documentation**: [https://tauri.app/v1/guides/](https://tauri.app/v1/guides/) +- **Vite Documentation**: [https://vitejs.dev/guide/](https://vitejs.dev/guide/) diff --git a/docs/tauri/0.getting-started/windows.md b/docs/tauri/0.prerequisites/windows.md similarity index 58% rename from docs/tauri/0.getting-started/windows.md rename to docs/tauri/0.prerequisites/windows.md index c419018..8a91678 100644 --- a/docs/tauri/0.getting-started/windows.md +++ b/docs/tauri/0.prerequisites/windows.md @@ -1,8 +1,9 @@ --- sidebar_position: 1 +title: Windows --- -# Windows +# **Tauri Setup Guide for Windows** --- @@ -56,92 +57,6 @@ sidebar_position: 1 --- -## **Step 2: Create a Tauri Project** - -### 1. Open VS Code - -- If you don’t have VS Code, download it from [https://code.visualstudio.com/](https://code.visualstudio.com/). - -### 2. Open the Terminal in VS Code - -- Press **Ctrl + `** (backtick) to open the terminal. - -### 3. Run the Tauri Project Generator - -- In the terminal, run this command: - - ```powershell - deno run -A npm:create-tauri-app@latest - ``` - -- **Follow the prompts**: - 1. **Project name**: Enter a name (e.g., `tauri-deno-app`). - 2. **Package manager**: Choose **Deno**. - 3. **UI template**: Choose **Vite**. - 4. **UI variant**: Choose **TypeScript** (recommended). - ---- - -## **Step 3: Configure the Project** - -### 1. Open the Project in VS Code - -- Click **File → Open Folder** and select the folder created by the Tauri generator (e.g., `tauri-deno-app`). - -### 2. Install Tauri API for Deno - -- In the terminal, run: - - ```powershell - deno add @tauri-apps/api - ``` - ---- - -## **Step 4: Run the Development Server** - -### 1. Start the Frontend - -- In the terminal, run: - - ```powershell - deno task dev - ``` - - This will start the Vite development server. - -### 2. Start the Tauri Backend - -- Open a **new terminal** in VS Code (Ctrl + Shift + `). -- Run: - - ```powershell - deno task tauri - ``` - - This will open a desktop window with your app running. - ---- - -## **Step 5: Build the App** - -### 1. Build the Production Version - -- In the terminal, run: - - ```powershell - deno task build - ``` - -### 2. Find the Installer - -- The installer will be located in: - ``` - src-tauri/target/release/bundle/msi/tauri-deno-app_0.1.0_x64_en-US.msi - ``` - ---- - ## **Troubleshooting** ### 1. WebView2 Issues diff --git a/docs/tauri/1.getting-started.md b/docs/tauri/1.getting-started.md new file mode 100644 index 0000000..e2ec599 --- /dev/null +++ b/docs/tauri/1.getting-started.md @@ -0,0 +1,181 @@ +--- +title: Getting Started +--- + +## **Step 0: Verify Your Setup** + +After installing the prerequisites, verify your setup by running the following commands in your terminal: + +- **Deno**: + + ```bash + deno --version + ``` + +- **Rust**: + + ```bash + rustc --version + cargo --version + ``` + +- **Node.js** (if installed): + ```bash + node --version + npm --version + ``` + +--- + +## **Step 1: Scaffold the Project** + +1. Open your terminal. +2. Run the following command to create a new Tauri project with Vite and TypeScript: + + ```bash + deno run -A npm:create-tauri-app@latest + ``` + +3. **Follow the prompts**: + - ✔ Project name · your-tauri-project + - ✔ Identifier · com.your-tauri-project.app + - ✔ Choose which language to use for your frontend · TypeScript / JavaScript - (pnpm, yarn, npm, deno, bun) + - ✔ Choose your package manager · deno + - ✔ Choose your UI template · Vanilla + - ✔ Choose your UI flavor · TypeScript + +--- + +## **Step 2: Navigate to the Project Folder** + +1. Move into the project folder: + ```bash + cd your-tauri-project + ``` + +--- + +## **Step 3: Install Tauri API for Deno** + +1. Install the Tauri API for Deno: + ```bash + deno add @tauri-apps/api + ``` + +--- + +## **Step 4: Configure Vite** + +1. Open the `vite.config.ts` file in your project and ensure it looks like this: + + ```typescript + import { defineConfig } from "vite"; + import deno from "vite-plugin-deno"; + + export default defineConfig({ + plugins: [deno()], + }); + ``` + +2. If you don’t have `vite-plugin-deno` installed, add it: + ```bash + deno add vite-plugin-deno + ``` + +--- + +## **Step 5: Set Up the Frontend** + +1. Open the `src/main.ts` file and replace its content with this basic TypeScript example: + + ```typescript + import { invoke } from "@tauri-apps/api"; + + // Create a button that calls a Tauri command + const app = document.querySelector("#app")!; + app.innerHTML = ` +

Hello, Tauri + Vite!

+ +

+ `; + + // Add event listener to the button + const greetBtn = document.querySelector("#greet-btn")!; + const message = document.querySelector("#message")!; + + greetBtn.addEventListener("click", async () => { + const response = await invoke("greet", { name: "Tauri User" }); + message.textContent = response as string; + }); + ``` + +--- + +## **Step 6: Set Up the Tauri Backend** + +1. Open the `src-tauri/src/main.rs` file and add a simple command: + + ```rust + #[tauri::command] + fn greet(name: &str) -> String { + format!("Hello, {}!", name) + } + + fn main() { + tauri::Builder::default() + .invoke_handler(tauri::generate_handler![greet]) + .run(tauri::generate_context!()) + .expect("error while running tauri application"); + } + ``` + +--- + +## **Step 7: Run the Development Server** + +1. Install dependecies: + + ```bash + deno install + ``` + +2. Start the Tauri development medium: + + ```bash + deno task tauri dev + ``` + + This will open a desktop window with your app running. + +--- + +## **Step 8: Build the App** + +1. Build the production version: + + ```bash + deno task build + ``` + +2. The installer will be located in: + - **Windows**: `.msi` file in `src-tauri/target/release/bundle/msi/`. + - **Linux**: `.deb` or `.AppImage` file in `src-tauri/target/release/bundle/`. + - **macOS**: `.dmg` file in `src-tauri/target/release/bundle/dmg/`. + +--- + +## **Project Structure** + +``` +tauri-vite-app/ +├─ src/ # Vite frontend (TypeScript) +│ ├─ main.ts # Entry point +│ └─ assets/ # Static assets +├─ src-tauri/ # Tauri backend (Rust) +│ ├─ src/ # Rust source files +│ └─ tauri.conf.json # Tauri configuration +├─ deno.json # Deno configuration +└─ vite.config.ts # Vite configuration +``` + +--- diff --git a/docs/tauri/1.build-your-own-text-editor/index.md b/docs/tauri/2.build-your-own-text-editor/index.md similarity index 100% rename from docs/tauri/1.build-your-own-text-editor/index.md rename to docs/tauri/2.build-your-own-text-editor/index.md diff --git a/docs/tauri/2.next-challenges.md b/docs/tauri/2.next-challenges.md deleted file mode 100644 index 0d6bc3f..0000000 --- a/docs/tauri/2.next-challenges.md +++ /dev/null @@ -1 +0,0 @@ -# Next Challenges diff --git a/docs/tauri/3.next-challenges.md b/docs/tauri/3.next-challenges.md new file mode 100644 index 0000000..5a6dcb5 --- /dev/null +++ b/docs/tauri/3.next-challenges.md @@ -0,0 +1,68 @@ +--- +title: Next Challenges +--- + +# **Next Challenges: Where Will You Take Tauri?** + +--- + +You’ve built a text editor—a fantastic start! Now, let’s dream bigger. Here’s how to stretch your skills, fuel your curiosity, and join a community shaping the future of apps. + +--- + +### **1. Explore New Horizons** + +**Break boundaries with these ideas:** + +- **Build tools you wish existed**: + - A privacy-first note app with local encryption. + - A markdown-powered journal with cloud sync. + - A code snippet manager that integrates with GitHub. +- **Solve niche problems**: + - A minimalist podcast editor for creators. + - A habit tracker with system-tray reminders. + - A local-only file organizer with AI tagging. +- **Play with hardware**: + - A CPU/RAM monitor with real-time graphs. + - A Bluetooth device configurator for IoT tinkerers. + - A custom macro pad controller for streamers. + +**Why?** +Tauri lets you blend web creativity with native power. Every project teaches you something new—system APIs, Rust optimizations, or polished UI design. + +--- + +### **4. Master the Fundamentals** + +**Skills to quietly level up:** + +- **Rust’s superpowers**: Learn ownership, error handling, and concurrency by optimizing your app’s core logic. +- **System integration**: Dive into OS-specific features (menus, notifications, file watchers). +- **Performance tuning**: Profile memory usage, speed up searches, or lazy-load heavy components. + +--- + +### **5. Join the Movement** + +**Leave your mark:** + +- **Contribute to open-source**: Fix a Tauri plugin, improve docs, or share your project template. +- **Build in public**: Post progress on GitHub, write a devlog, or stream your process. +- **Collaborate**: Team up to build a plugin others need (e.g., a calendar picker or terminal emulator). + +--- + +### **6. Stay Inspired** + +**Keep the fire alive:** + +- **Steal ideas**: Rebuild features from apps you admire (e.g., VS Code’s extensions, Notion’s drag-and-drop). +- **Follow trends**: Experiment with AI integration (Rust + Python?), or build a Tauri-powered PWA. +- **Connect**: Join IP Workshops, and learn from others’ “aha!” moments. + +--- + +**Your next step?** +Pick _one_ idea that makes you think, _“I wanna try that!”_—then start small. The rest will follow. 🚀 + +_“The best way to learn is to build things that excite you.”_ — Someone who probably built a text editor once. diff --git a/docs/tauri/index.md b/docs/tauri/index.md index 115b97a..b6837dc 100644 --- a/docs/tauri/index.md +++ b/docs/tauri/index.md @@ -1,5 +1,87 @@ --- sidebar_position: 2 +title: Tauri Desktop Applications --- -# Tauri Desktop Applications +# **What is Tauri?** + +--- + +Tauri is an **open-source framework** for building **small, fast, and secure desktop applications** using web technologies (HTML, CSS, JavaScript/TypeScript). Unlike traditional solutions like Electron, Tauri uses your operating system's native webview (e.g., WebKit on macOS, WebView2 on Windows) instead of bundling a full browser engine. + +--- + +### **Key Features & Benefits** + +1. **Lightweight & Efficient**: + + - Apps are **10–100x smaller** than Electron (e.g., a simple app can be as small as **2MB** vs. Electron’s 100MB+). + - Minimal memory usage and faster startup times. + +2. **Cross-Platform**: + + - Build for **Windows, macOS, and Linux** from a single codebase. + - Native system integrations (tray icons, file system access, notifications, etc.). + +3. **Security-First**: + + - Built with **Rust** (memory-safe language) for the backend. + - Secure IPC (inter-process communication) between frontend and backend. + - Reduced attack surface compared to Chromium-based frameworks. + +4. **Modern Web Tech**: + + - Use any frontend framework (React, Vue, Svelte, etc.) or vanilla HTML/CSS/JS. + - Access **system APIs** via JavaScript (e.g., file system, clipboard, hardware). + +5. **Native Performance**: + + - Rust backend handles heavy computations, while the webview focuses on UI. + - Direct access to OS features without performance bottlenecks. + +6. **Extensible**: + - Plugin system for adding native functionality (e.g., SQLite, biometric auth). + - Integrates with tools like Vite, Webpack, or Rollup. + +--- + +### **Why Choose Tauri Over Electron?** + +| **Aspect** | **Tauri** | **Electron** | +| ---------------- | --------------------------------- | -------------------------------- | +| **App Size** | 2–20 MB | 100–300 MB | +| **Memory Usage** | Minimal (uses system webview) | High (bundles Chromium) | +| **Security** | Rust backend + secure IPC | Larger attack surface (Chromium) | +| **Performance** | Native-speed Rust integration | JavaScript-only backend | +| **Flexibility** | Modern tooling (Vite, Deno, etc.) | Limited to Node.js ecosystem | + +--- + +### **Use Cases** + +Tauri is ideal for: + +- **Lightweight apps** where bundle size matters (e.g., utilities, tools). +- **Privacy-focused apps** (password managers, note-taking apps). +- **Cross-platform apps** needing native OS integrations. +- Projects prioritizing **performance** and **security**. + +--- + +### **Who Uses Tauri?** + +Companies like Microsoft, Discord, and Logseq leverage Tauri for its efficiency and security. The framework is **open-source** (MIT/Apache 2.0) and backed by a growing community. + +--- + +### **Getting Started** + +```bash +npm create tauri-app@latest +``` + +**Learn more**: [Tauri’s Official Website](https://tauri.app) | [GitHub](https://github.com/tauri-apps/tauri) + +--- + +In short, Tauri combines **web flexibility** with **native performance**, making it a top choice for modern desktop app development. 🚀 From 6059a4cd49d012f1c6ea14773ad20cbc9a79149d Mon Sep 17 00:00:00 2001 From: robertDinca2003 Date: Thu, 20 Mar 2025 13:12:03 +0200 Subject: [PATCH 3/4] Added main course --- .../2.build-your-own-text-editor/index.md | 160 ++++++++++++++++++ docs/tauri/3.next-challenges.md | 3 +- 2 files changed, 162 insertions(+), 1 deletion(-) diff --git a/docs/tauri/2.build-your-own-text-editor/index.md b/docs/tauri/2.build-your-own-text-editor/index.md index 3314728..04c1eef 100644 --- a/docs/tauri/2.build-your-own-text-editor/index.md +++ b/docs/tauri/2.build-your-own-text-editor/index.md @@ -3,3 +3,163 @@ sidebar_position: 2 --- # Build your own text editor + +_"Are you excited?😄"_ + +## Task 1: Core Functionalities + +--- + +### **1. Project Setup** + +- Create Tauri project using `vanilla-ts` template + +### **2. Frontend Structure** + +- Create HTML with: + - `