Skip to content
Learni
View all tutorials
Développement Desktop

How to Create a Desktop Application with Tauri in 2026

18 minBEGINNER
RustTauriDesktop
Lire en français

Introduction

Tauri lets you build native desktop applications by combining a secure Rust backend with a modern web frontend. Unlike Electron, Tauri apps are significantly lighter because they use the operating system's native webviews. This tutorial walks you through building your first application in 2026 step by step. You will learn how to initialize a project, expose Rust commands, and produce the final executable. Each step provides complete, working code you can copy directly.

Prerequisites

  • Node.js 20+ and npm
  • Rust (via rustup)
  • Basic knowledge of JavaScript/TypeScript
  • An editor such as VS Code

Installing Dependencies

terminal
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
npm install -g @tauri-apps/cli

This command installs Rust via rustup and the Tauri CLI globally. Verify the installation with 'tauri --version' before continuing.

Creating the Tauri Project

terminal
npm create tauri-app@latest my-tauri-app
cd my-tauri-app
npm install

This command initializes a Tauri project using Vite as the default frontend. The src-tauri folder contains the Rust code.

Main Configuration

src-tauri/tauri.conf.json
{
  "productName": "My Tauri App",
  "version": "0.1.0",
  "identifier": "com.example.myapp",
  "build": {
    "beforeBuildCommand": "npm run build",
    "beforeDevCommand": "npm run dev",
    "devUrl": "http://localhost:1420",
    "frontendDist": "../dist"
  },
  "app": {
    "windows": [
      {
        "title": "My Tauri App",
        "width": 800,
        "height": 600
      }
    ],
    "security": {
      "csp": null
    }
  },
  "bundle": {
    "active": true,
    "targets": "all",
    "icon": [
      "icons/32x32.png",
      "icons/128x128.png",
      "icons/128x128@2x.png",
      "icons/icon.icns",
      "icons/icon.ico"
    ]
  }
}

This JSON file defines the app name, window settings, build commands, and icons. Update the identifier and dimensions as needed.

Simple Rust Command

src-tauri/src/main.rs
use tauri::Manager;

#[tauri::command]
fn greet(name: &str) -> String {
    format!("Hello, {}! Welcome to Tauri.", name)
}

fn main() {
    tauri::Builder::default()
        .invoke_handler(tauri::generate_handler![greet])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

The #[tauri::command] macro exposes the greet function to the frontend. generate_handler! registers it so JavaScript can call it.

Calling from the Frontend

src/App.tsx
import { invoke } from '@tauri-apps/api/core';

function App() {
  const handleGreet = async () => {
    const result = await invoke<string>('greet', { name: 'Utilisateur' });
    alert(result);
  };

  return (
    <div>
      <button onClick={handleGreet}>Dire bonjour</button>
    </div>
  );
}

export default App;

invoke allows calling the Rust command from the frontend. The generic type provides type safety.

Best Practices

  • Always validate inputs in Rust commands
  • Use minimal permissions in tauri.conf.json
  • Keep frontend and backend code clearly separated
  • Test regularly on all three target platforms
  • Keep Rust dependencies up to date

Common Mistakes to Avoid

  • Forgetting to register the command in generate_handler!
  • Skipping required system dependencies on Linux
  • Using incompatible Node and Rust versions
  • Ignoring build errors caused by missing icons

Going Further

Explore Tauri plugins to add advanced features such as notifications or local storage. Check out our Learni trainings to master Tauri and Rust in depth.

How to Create Desktop Apps with Tauri in 2026 | Learni