Saltar al contenido

Crear un proyecto

Algo que hace que Tauri sea tan flexible es su capacidad para trabajar con prácticamente cualquier framework frontend. Hemos creado la utilidad create-tauri-app para ayudarte a crear un nuevo proyecto de Tauri usando una de las plantillas de frameworks mantenidas oficialmente.

create-tauri-app incluye actualmente plantillas para vanilla (HTML, CSS y JavaScript sin framework), Vue.js, Svelte, React, SolidJS, Angular, Preact, Yew, Leptos y Sycamore. También puedes encontrar o agregar tus propias plantillas y frameworks comunitarios en el repositorio Awesome Tauri.

Alternativamente, puedes agregar Tauri a un proyecto existente para convertir rápidamente tu código base actual en una app de Tauri.

Para empezar a usar create-tauri-app, ejecuta uno de los siguientes comandos en la carpeta donde te gustaría configurar tu proyecto. Si no estás seguro de qué comando usar, recomendamos el comando de Bash en Linux y macOS y el comando de PowerShell en Windows.

sh <(curl https://create.tauri.app/sh)

Sigue las indicaciones para elegir el nombre de tu proyecto, lenguaje de frontend, gestor de paquetes y framework de frontend, y las opciones del framework de frontend si corresponde.

  1. Elige un nombre y un identificador de paquete (unique-id para tu app):

    ? Project name (tauri-app) ›
    ? Identifier (com.tauri-app.app) ›
  2. Selecciona una variante para tu frontend. Primero el lenguaje:

    ? Choose which language to use for your frontend ›
    Rust (cargo)
    TypeScript / JavaScript (pnpm, yarn, npm, bun)
    .NET (dotnet)
  3. Selecciona un gestor de paquetes (si hay varios disponibles):

    Opciones para TypeScript / JavaScript:

    ? Choose your package manager ›
    pnpm
    yarn
    npm
    bun
  4. Selecciona una plantilla de UI y variante (si hay varias disponibles):

    Opciones para Rust:

    ? Choose your UI template ›
    Vanilla
    Yew
    Leptos
    Sycamore

    Opciones para TypeScript / JavaScript:

    ? Choose your UI template ›
    Vanilla
    Vue
    Svelte
    React
    Solid
    Angular
    Preact
    ? Choose your UI flavor ›
    TypeScript
    JavaScript

    Opciones para .NET:

    ? Choose your UI template ›
    Blazor (https://dotnet.microsoft.com/en-us/apps/aspnet/web-apps/blazor/)

Una vez completado, la utilidad informa que la plantilla ha sido creada y muestra cómo ejecutarla usando el gestor de paquetes configurado. Si detecta dependencias faltantes en tu sistema, imprime una lista de paquetes y sugiere cómo instalarlos.

Una vez que create-tauri-app haya finalizado, puedes navegar a la carpeta de tu proyecto, instalar las dependencias y luego usar la CLI de Tauri para iniciar el servidor de desarrollo:

cd tauri-app
npm install
npm run tauri dev

Ahora verás abrirse una nueva ventana con tu app en ejecución.

¡Felicitaciones! ¡Has creado tu app de Tauri! 🚀

Si ya tienes un frontend existente o prefieres configurarlo tú mismo, puedes usar la CLI de Tauri para inicializar el backend de tu proyecto por separado.

  1. Crea un nuevo directorio para tu proyecto e inicializa el frontend. Puedes usar HTML, CSS y JavaScript puros, o cualquier framework que prefieras como Next.js, Nuxt, Svelte, Yew o Leptos. Solo necesitas una forma de servir la app en tu navegador. A modo de ejemplo, así es como configurarías una aplicación simple con Vite:

    mkdir tauri-app
    cd tauri-app
    npm create vite@latest .
  2. Luego, instala la herramienta de CLI de Tauri usando el gestor de paquetes de tu elección. Si estás usando cargo para instalar la CLI de Tauri, tendrás que instalarla globalmente.

    npm install -D @tauri-apps/cli@latest
  3. Determina la URL de tu servidor de desarrollo frontend. Esta es la URL que Tauri usará para cargar tu contenido. Por ejemplo, si estás usando Vite, la URL por defecto es http://localhost:5173.

  4. En el directorio de tu proyecto, inicializa Tauri:

    npx tauri init

    Después de ejecutar el comando, mostrará un prompt pidiéndote diferentes opciones:

    What is your app name? tauri-app
    What should the window title be? tauri-app
    Where are your web assets located? ..
    What is the url of your dev server? http://localhost:5173
    What is your frontend dev command? pnpm run dev
    What is your frontend build command? pnpm run build

    Esto creará un directorio src-tauri en tu proyecto con los archivos de configuración necesarios de Tauri.

  5. Configura la opción server.watch.ignored en vite.config.ts para evitar que Vite observe el directorio src-tauri:

    vite.config.ts
    import { defineConfig } from "vite";
    export default defineConfig({
    server: {
    watch: {
    ignored: ["**/src-tauri/**"],
    },
    },
    });
  6. Verifica que tu app de Tauri esté funcionando ejecutando el servidor de desarrollo:

    npx tauri dev

    Este comando compilará el código de Rust y abrirá una ventana con tu contenido web.

¡Felicitaciones! ¡Has creado un nuevo proyecto de Tauri utilizando la CLI de Tauri! 🚀


© 2026 Colaboradores de Tauri. CC-BY / MIT