Tauri 2.0 Project Structure Files and Folders Explained

my-tauri-app/
├── src/                          # Frontend source code (React/Vue/Svelte)
│   ├── App.tsx                   # Main application component
│   ├── App.css                   # Component styles
│   ├── main.tsx                  # Frontend entry point
│   ├── assets/                   # Static assets (images, fonts, etc.)
│   └── components/               # React/Vue/Svelte components
│
├── src-tauri/                    # Tauri backend (Rust)
│   ├── src/
│   │   ├── main.rs               # Rust entry point
│   │   ├── lib.rs                # Library code (optional)
│   │   └── commands/             # Custom command modules
│   ├── Cargo.toml                # Rust dependencies and metadata
│   ├── Cargo.lock                # Dependency lock file
│   ├── tauri.conf.json           # Tauri configuration
│   ├── build.rs                  # Build script
│   ├── capabilities/             # Permission configuration
│   │   └── default.json          # Default permissions
│   ├── icons/                    # Application icons
│   │   ├── 32x32.png
│   │   ├── 128x128.png
│   │   ├── [email protected]
│   │   ├── icon.icns             # macOS icon
│   │   └── icon.ico              # Windows icon
│   └── target/                   # Rust build output
│       ├── debug/                # Debug builds
│       └── release/              # Release builds
│
├── public/                       # Public static files
│   └── favicon.ico               # Website favicon
│
├── dist/                         # Frontend build output (generated)
│
├── node_modules/                 # Node.js dependencies (generated)
│
├── package.json                  # Node dependencies and scripts
├── package-lock.json             # Node dependency lock file
├── vite.config.ts                # Vite configuration
├── tsconfig.json                 # TypeScript configuration
├── tsconfig.node.json            # TypeScript config for Node
├── index.html                    # HTML entry point
├── .gitignore                    # Git ignore rules
└── README.md                     # Project documentation

// src/main.tsx - React application entry point
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css";

// Mount React application to DOM
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// Purpose:
// - Initialize React application
// - Mount to DOM element with id="root"
// - Apply global styles
// - Enable strict mode for development warnings

// src/App.tsx - Main application component
import { useState } from "react";
import { invoke } from "@tauri-apps/api/core";
import "./App.css";

function App() {
  // Component state
  const [message, setMessage] = useState("");

  // Call Tauri backend command
  async function handleAction() {
    const result = await invoke<string>("my_command", {
      param: "value",
    });
    setMessage(result);
  }

  return (
    <div className="container">
      <h1>My Tauri App</h1>
      <button onClick={handleAction}>Call Backend</button>
      {message && <p>{message}</p>}
    </div>
  );
}

export default App;

// Purpose:
// - Root component rendered by main.tsx
// - Contains main application UI
// - Handles user interactions
// - Communicates with Tauri backend via invoke()

// src-tauri/src/main.rs - Rust application entry point
#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]

// Define Tauri command
#[tauri::command]
fn my_command(param: String) -> String {
    format!("Received: {}", param)
}

// Mobile entry point (Tauri 2.0)
#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
    tauri::Builder::default()
        // Register commands
        .invoke_handler(tauri::generate_handler![my_command])
        // Setup window event handlers
        .setup(|app| {
            // Initialization code here
            Ok(())
        })
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

fn main() {
    run();
}

// Purpose:
// - Entry point for Rust application
// - Register Tauri commands
// - Configure application behavior
// - Handle initialization logic

[package]
name = "my-tauri-app"
version = "0.1.0"
edition = "2021"

# Application metadata
[package.metadata]
authors = ["Your Name <[email protected]>"]
license = "MIT"
repository = "https://github.com/yourusername/my-tauri-app"

[build-dependencies]
tauri-build = { version = "2.0", features = [] }

[dependencies]
serde = { version = "1", features = ["derive"] }
serde_json = "1"
tauri = { version = "2.0", features = ["devtools"] }

# Optional: Additional dependencies for functionality
tokio = { version = "1", features = ["full"] }  # Async runtime
reqwest = { version = "0.11", features = ["json"] }  # HTTP client
rusqlite = "0.30"  # SQLite database

# Target-specific dependencies
[target.'cfg(not(any(target_os = "android", target_os = "ios")))'.dependencies]
tauri-plugin-shell = "2.0"

# Build optimizations
[profile.release]
panic = "abort"
codegen-units = 1
lto = true
opt-level = "s"  # Optimize for size
strip = true  # Strip symbols

# Purpose:
# - Define Rust package metadata
# - Specify Tauri and other dependencies
# - Configure build optimizations
# - Manage feature flags

// src-tauri/build.rs - Build script
fn main() {
    tauri_build::build()
}

// Purpose:
// - Runs before main compilation
// - Generates code from tauri.conf.json
// - Bundles assets and resources
// - Sets up build environment
// - Usually doesn't need modification

{
  // Build configuration
  "build": {
    "beforeDevCommand": "npm run dev",
    "beforeBuildCommand": "npm run build",
    "devUrl": "http://localhost:1420",
    "frontendDist": "../dist"
  },
  
  // Application metadata
  "productName": "my-tauri-app",
  "version": "0.1.0",
  "identifier": "com.mycompany.mytauriapp",
  
  // Application configuration
  "app": {
    "windows": [
      {
        "title": "My Tauri App",
        "width": 800,
        "height": 600
      }
    ],
    "security": {
      "csp": "default-src 'self'"
    }
  },
  
  // Bundle configuration
  "bundle": {
    "active": true,
    "targets": "all",
    "icon": [
      "icons/32x32.png",
      "icons/128x128.png",
      "icons/icon.icns",
      "icons/icon.ico"
    ]
  }
}

// Controls:
// - Development server settings
// - Window appearance and behavior
// - Security policies (CSP)
// - Build and bundle options
// - Platform-specific settings

{
  "name": "my-tauri-app",
  "private": true,
  "version": "0.1.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "tauri": "tauri",
    "tauri:dev": "tauri dev",
    "tauri:build": "tauri build"
  },
  "dependencies": {
    "@tauri-apps/api": "^2.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@tauri-apps/cli": "^2.0.0",
    "@types/react": "^18.2.0",
    "@types/react-dom": "^18.2.0",
    "@vitejs/plugin-react": "^4.2.0",
    "typescript": "^5.3.0",
    "vite": "^5.0.0"
  }
}

// Purpose:
// - Define Node.js dependencies
// - Configure npm scripts
// - Set project metadata
// - Manage frontend tooling

// vite.config.ts - Vite build configuration
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  
  // Vite server configuration
  server: {
    port: 1420,
    strictPort: true,
  },
  
  // Environment variables prefix
  envPrefix: ["VITE_", "TAURI_"],
  
  // Build options
  build: {
    target: "esnext",
    minify: "esbuild",
    sourcemap: false,
  },
  
  // Clear console on updates
  clearScreen: false,
});

// Purpose:
// - Configure Vite dev server
// - Set build optimizations
// - Configure plugins (React, Vue, etc.)
// - Handle environment variables

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    
    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    
    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

// Purpose:
// - Configure TypeScript compiler
// - Set type checking strictness
// - Define module resolution
// - Specify included files

src-tauri/target/
├── debug/                        # Development builds
│   ├── my-tauri-app              # Debug executable
│   ├── my-tauri-app.exe          # Windows debug executable
│   └── build/                    # Build artifacts
│
└── release/                      # Production builds
    ├── my-tauri-app              # Optimized executable
    ├── my-tauri-app.exe          # Windows release executable
    └── bundle/                   # Platform installers
        ├── nsis/                 # Windows NSIS installer
        │   └── my-tauri-app_0.1.0_x64-setup.exe
        ├── msi/                  # Windows MSI installer
        │   └── my-tauri-app_0.1.0_x64_en-US.msi
        ├── dmg/                  # macOS disk image
        │   └── my-tauri-app_0.1.0_x64.dmg
        ├── deb/                  # Debian package
        │   └── my-tauri-app_0.1.0_amd64.deb
        └── appimage/             # Linux AppImage
            └── my-tauri-app_0.1.0_amd64.AppImage

// This directory is gitignored and regenerated on each build
// Size: Can be several GB with all build artifacts

// src-tauri/capabilities/default.json - Permission configuration
{
  "identifier": "default",
  "description": "Default permissions for the application",
  "windows": ["main"],
  "permissions": [
    "core:default",
    "shell:default",
    "dialog:default",
    "fs:default",
    "http:default"
  ]
}

// Purpose:
// - Define API access permissions
// - Restrict frontend capabilities
// - Enhance application security
// - Control which windows have which permissions

// Common permissions:
// - core:default - Basic Tauri APIs
// - fs:read-file - Read files
// - fs:write-file - Write files
// - shell:execute - Run commands
// - dialog:open - File dialogs
// - http:request - HTTP requests

src/
├── components/              # Reusable UI components
│   ├── Button.tsx
│   ├── Input.tsx
│   └── Modal.tsx
├── hooks/                   # Custom React hooks
│   ├── useTauri.ts
│   └── useFileSystem.ts
├── services/                # API and service layers
│   ├── tauriAPI.ts         # Tauri command wrappers
│   └── database.ts         # Database operations
├── utils/                   # Utility functions
│   ├── helpers.ts
│   └── constants.ts
├── types/                   # TypeScript type definitions
│   └── index.d.ts
├── styles/                  # Global styles
│   ├── global.css
│   └── variables.css
├── App.tsx                  # Root component
└── main.tsx                 # Entry point

src-tauri/src/
├── main.rs                  # Entry point and command registration
├── lib.rs                   # Library exports (optional)
├── commands/                # Tauri command modules
│   ├── mod.rs              # Module exports
│   ├── file_ops.rs         # File operations commands
│   ├── database.rs         # Database commands
│   └── system.rs           # System commands
├── state/                   # Application state
│   ├── mod.rs
│   └── app_state.rs
├── models/                  # Data models
│   ├── mod.rs
│   └── user.rs
├── utils/                   # Utility functions
│   ├── mod.rs
│   └── helpers.rs
└── error.rs                 # Error types

// Example main.rs with organized imports:
mod commands;
mod state;
mod models;
mod utils;

#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
    tauri::Builder::default()
        .manage(state::AppState::default())
        .invoke_handler(tauri::generate_handler![
            commands::file_ops::read_file,
            commands::file_ops::write_file,
            commands::database::query,
            commands::system::get_info,
        ])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

# Dependencies
node_modules/

# Build output
dist/
src-tauri/target/

# Environment variables
.env
.env.local

# IDE files
.vscode/
.idea/
*.swp
*.swo

# OS files
.DS_Store
Thumbs.db

# Logs
*.log
npm-debug.log*
yarn-debug.log*

# Temporary files
*.tmp
*.temp