Crear tu Primer Proyecto

Con create-tauri-app (recomendado)

# npm
npm create tauri-app@latest

# pnpm
pnpm create tauri-app

# yarn
yarn create tauri-app

# bun
bun create tauri-app

# cargo (sin Node.js)
cargo install create-tauri-app --locked
cargo create-tauri-app

El asistente pregunta:

1. Nombre del proyecto
2. Identificador (formato reverse-domain: com.miapp.dev)
3. Framework frontend: Vanilla, React, Vue, Svelte, SolidJS, Angular, Preact, Yew, Leptos
4. Variante: TypeScript o JavaScript

Agregar Tauri a proyecto existente

Si ya tienes un frontend:

cd mi-proyecto-existente
npm install -D @tauri-apps/cli@latest
npx tauri init

tauri init pregunta:

• Nombre de la app
• Titulo de la ventana
• Directorio de assets web (ej: ../dist)
• URL del servidor de desarrollo (ej: http://localhost:5173)
• Comando de desarrollo frontend (ej: npm run dev)
• Comando de build frontend (ej: npm run build)

Estructura del proyecto

mi-app/
├── src/                    # Frontend (HTML, CSS, JS)
│   ├── index.html
│   ├── main.ts
│   └── styles.css
├── src-tauri/              # Backend Rust
│   ├── src/
│   │   ├── lib.rs          # Logica principal y comandos
│   │   └── main.rs         # Entry point
│   ├── capabilities/       # Permisos por ventana
│   ├── icons/              # Iconos de la app
│   ├── Cargo.toml          # Dependencias Rust
│   └── tauri.conf.json     # Configuracion de Tauri
├── package.json
└── vite.config.ts          # (o config de tu bundler)

Archivos clave

src-tauri/tauri.conf.json — configuracion central:

{
  "productName": "mi-app",
  "version": "0.1.0",
  "identifier": "com.miapp.dev",
  "build": {
    "frontendDist": "../dist",
    "devUrl": "http://localhost:5173",
    "beforeDevCommand": "npm run dev",
    "beforeBuildCommand": "npm run build"
  },
  "app": {
    "windows": [
      {
        "title": "Mi App",
        "width": 800,
        "height": 600
      }
    ]
  }
}

src-tauri/src/lib.rs — donde defines comandos Rust:

#[tauri::command]
fn greet(name: &str) -> String {
    format!("Hola, {}! Saludos desde Rust!", name)
}

#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
    tauri::Builder::default()
        .invoke_handler(tauri::generate_handler![greet])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

Ejecutar en desarrollo

npm run tauri dev

Esto:

1. Inicia el servidor de desarrollo frontend
2. Compila el codigo Rust (la primera vez toma unos minutos)
3. Abre la ventana de la app con el webview

Los cambios en el frontend se reflejan con hot reload. Los cambios en Rust requieren recompilacion automatica.

Compilar para produccion

npm run tauri build

Genera el instalador en src-tauri/target/release/bundle/.

Frameworks soportados

Framework	Plantilla	SSG/SPA
React	Vite	SPA
Vue	Vite	SPA
Svelte	Vite	SPA
SolidJS	Vite	SPA
Angular	Angular CLI	SPA
Next.js	Next.js	SSG (requiere export)
Nuxt	Nuxt	SSG (requiere generate)
SvelteKit	SvelteKit	SSG (adapter-static)

Tauri funciona como servidor web estatico. Para frameworks con SSR (Next.js, Nuxt, SvelteKit), necesitas configurar Static Site Generation (SSG).

Resumen

• create-tauri-app crea un proyecto completo con frontend y backend
• tauri init agrega Tauri a un proyecto frontend existente
• El frontend va en src/, el backend Rust en src-tauri/
• tauri.conf.json es la configuracion central
• npm run tauri dev para desarrollo, npm run tauri build para produccion
• Cualquier framework funciona si genera HTML/CSS/JS estatico

---

← Requisitos e Instalacion | Indice | Siguiente: Arquitectura →