Crear un Proyecto

Una cosa 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 Tauri usando una de las plantillas de framework mantenidas oficialmente.

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

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

Usando `create-tauri-app`

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

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

irm https://create.tauri.app/ps | iex

sh (curl -sSL https://create.tauri.app/sh | psub)

npm create tauri-app@latest

yarn create tauri-app

pnpm create tauri-app

deno run -A npm:create-tauri-app

bun create tauri-app

cargo install create-tauri-app --locked
cargo create-tauri-app

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

Crear un nuevo proyecto

Elige un nombre y un identificador de paquete (identificador único para tu aplicación):
```
? Project name (tauri-app) ›
? Identifier (com.tauri-app.app) ›
```

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)

Selecciona un administrador de paquetes (si hay varios disponibles):

Opciones para TypeScript / JavaScript:
```
? Choose your package manager ›
pnpm
yarn
npm
bun
```

Selecciona una plantilla de interfaz de usuario 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 administrador de paquetes configurado. Si detecta dependencias faltantes en tu sistema, imprime una lista de paquetes y sugiere cómo instalarlos.

Iniciar el servidor de desarrollo

Después de que create-tauri-app haya completado, puedes navegar a la carpeta de tu proyecto, instalar dependencias y luego usar la CLI de Tauri para iniciar el servidor de desarrollo:

cd tauri-app
npm install
npm run tauri dev

cd tauri-app
yarn install
yarn tauri dev

cd tauri-app
pnpm install
pnpm tauri dev

cd tauri-app
deno install
deno task tauri dev

cd tauri-app
bun install
bun tauri dev

cd tauri-app
cargo tauri dev

Ahora verás abrirse una nueva ventana con tu aplicación ejecutándose.

¡Felicidades! ¡Has creado tu aplicación Tauri! 🚀

Configuración Manual (CLI 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.

Crea un nuevo directorio para tu proyecto e inicializa el frontend. Puedes usar HTML simple, CSS y JavaScript, o cualquier framework que prefieras como Next.js, Nuxt, Svelte, Yew o Leptos. Solo necesitas una forma de servir la aplicación en tu navegador. Solo como ejemplo, así es como configurarías una aplicación Vite simple:
- npm
- yarn
- pnpm
- deno
- bun
mkdir tauri-app cd tauri-app npm create vite@latest .
mkdir tauri-app cd tauri-app yarn create vite .
mkdir tauri-app cd tauri-app pnpm create vite .
mkdir tauri-app cd tauri-app deno run -A npm:create-vite .
mkdir tauri-app cd tauri-app bun create vite

Luego, instala la herramienta CLI de Tauri usando tu administrador de paquetes preferido. Si estás usando cargo para instalar la CLI de Tauri, tendrás que instalarla globalmente.

npm install -D @tauri-apps/cli@latest

yarn add -D @tauri-apps/cli@latest

pnpm add -D @tauri-apps/cli@latest

deno add -D npm:@tauri-apps/cli@latest

bun add -D @tauri-apps/cli@latest

cargo install tauri-cli --version "^2.0.0" --locked

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 predeterminada es http://localhost:5173.

En el directorio de tu proyecto, inicializa Tauri:

npx tauri init

yarn tauri init

pnpm tauri init

deno task tauri init

bun tauri init

cargo tauri init

Después de ejecutar el comando, se mostrará un mensaje 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 de Tauri necesarios.

Verifica que tu aplicación Tauri esté funcionando ejecutando el servidor de desarrollo:
- npm
- yarn
- pnpm
- deno
- bun
- cargo
npx tauri dev
yarn tauri dev
pnpm tauri dev
deno task tauri dev
bun tauri dev
cargo tauri dev
Este comando compilará el código Rust y abrirá una ventana con tu contenido web.

¡Felicidades! ¡Has creado un nuevo proyecto Tauri usando la CLI de Tauri! 🚀

Próximos pasos

Support on Open Collective Sponsor on GitHub