Tauri Project Structure Deep Dive - Frontend, Backend & Configuration Explained

Tauri Project Structure Deep Dive - Frontend, Backend & Configuration Explained

Understanding the folder structure of a Tauri desktop application is key to building powerful cross-platform apps. This guide breaks down the frontend files, the Rust backend in src-tauri, and the crucial tauri.conf.json configuration that ties everything together. You'll see how the frontend and backend communicate and how window and build settings are managed.

Code

{
  // Frontend: package.json snippet with Tauri scripts
  "scripts": {
    "tauri:dev": "tauri dev",       // Runs Tauri dev server with hot reload
    "tauri:build": "tauri build"    // Builds the desktop app bundle
  },
  "dependencies": {
    "@tauri-apps/api": "^1.0.0"     // Tauri frontend API for invoking backend commands
  }
}

// src/main.ts - Frontend entry point using Tauri API
import { invoke } from '@tauri-apps/api/tauri'

async function greet() {
  const message = await invoke('greet', { name: 'Tauri User' })  // Calls Rust backend command
  console.log(message)
}

greet()

// src-tauri/Cargo.toml - Rust backend dependencies
[dependencies]
tauri = { version = "1.0", features = ["api-all"] }

// src-tauri/src/lib.rs - Rust backend entry point
use tauri::command;

#[command]
fn greet(name: &str) -> String {
  format!("Hello, {}!", name)  // Exposed command callable from frontend
}

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

// tauri.conf.json - Core configuration example
{
  "package": {
    "productName": "MyTauriApp",
    "version": "0.1.0"
  },
  "tauri": {
    "windows": [
      {
        "title": "My Tauri App",
        "width": 800,
        "height": 600,
        "resizable": true,
        "fullscreen": false
      }
    ],
    "bundle": {
      "identifier": "com.example.mytauiapp"
    },
    "build": {
      "devPath": "http://localhost:1420",  // Dev server URL for hot reload
      "distDir": "../dist"
    }
  }
}

Key Points

• The frontend folder contains typical web files like package.json, index.html, and main.ts where UI and frontend logic live.
• The src-tauri folder holds the Rust backend with Cargo.toml for dependencies and lib.rs as the command entry point.
• tauri.conf.json configures app metadata, window properties, bundle identifiers, and dev server settings.
• The frontend communicates with the backend via Tauri’s invoke API calling Rust commands annotated with #[command].
• Window size, title, and platform-specific icons are managed through the configuration and backend folders for a seamless cross-platform experience.