Tutorial de Tauri - Capítulo 3: Tu primera aplicación Tauri

Indice Tutorial >>

Llegó el momento de ensuciarnos las manos. En este capítulo vamos a crear tu primera aplicación Tauri desde cero. Será un «Hola Mundo» sencillo, pero te servirá para entender cómo funciona todo.

Crear el proyecto

Tauri tiene un comando que genera proyectos nuevos con todo configurado. Abre tu terminal, ve a la carpeta donde quieras crear el proyecto y ejecuta:

npm create tauri-app@latest

La primera vez que ejecutes este comando, npm te preguntará si deseas instalar el paquete create-tauri-app. Escribe ‘y’ y pulsa Enter para continuar.

El asistente te hará varias preguntas. Vamos a responderlas:

Nombre del proyecto

? Project name > hola-mundo-tauri

Escribe hola-mundo-tauri o el nombre que prefieras.

Identificador

? Identifier > com.tauri.dev

Es un identificador único para tu app, como en las aplicaciones móviles. Usa el formato com.tunombre.app. Puedes dejarlo por defecto por ahora.

Lenguaje del frontend

? Choose which language to use for your frontend >
  TypeScript / JavaScript
  Rust

Selecciona TypeScript / JavaScript.

Gestor de paquetes

? Choose your package manager >
  npm
  pnpm
  yarn
  bun

Selecciona npm.

Framework de UI

? Choose your UI template >
  Vanilla
  Vue
  Svelte
  React
  Solid
  Angular
  Preact

Para este primer ejemplo, selecciona Vanilla. Es HTML, CSS y JavaScript puro, sin frameworks. Más adelante usaremos React.

Variante

? Choose your UI flavor >
  TypeScript
  JavaScript

Selecciona JavaScript para mantenerlo simple.

Instalar dependencias y ejecutar

Entra en la carpeta del proyecto e instala las dependencias:

cd hola-mundo-tauri
npm install

Ahora viene lo emocionante. Ejecuta:

npm run tauri dev

La primera vez tarda un poco porque Rust necesita compilar todo. Las siguientes ejecuciones serán mucho más rápidas.

Cuando termine, se abrirá una ventana de aplicación de escritorio con el contenido por defecto.

¡Felicidades! Acabas de ejecutar tu primera aplicación Tauri.

Personalizar la aplicación

Vamos a modificar la aplicación para que muestre nuestro propio mensaje. Abre el proyecto en tu editor de código.

Busca el archivo index.html en la raíz del proyecto y modifica el contenido del body:

<body>
  <div class="container">
    <h1>¡Hola Mundo!</h1>
    <p>Esta es mi primera aplicación con Tauri</p>
  </div>
</body>

Guarda el archivo. Si tienes npm run tauri dev ejecutándose, la aplicación se actualizará automáticamente gracias al hot reload.

Añadir estilos

Abre src/styles.css (o créalo si no existe) y añade:

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.container {
  text-align: center;
  padding: 2rem;
}

h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

p {
  font-size: 1.2rem;
  opacity: 0.9;
}

Guarda y mira cómo la app se actualiza con el nuevo diseño.

Añadir interactividad

Vamos a añadir un botón que cambie el mensaje. Modifica el HTML:

<div class="container">
  <h1 id="titulo">¡Hola Mundo!</h1>
  <p>Esta es mi primera aplicación con Tauri</p>
  <button id="cambiar-btn">Cambiar mensaje</button>
</div>

Añade estilos para el botón:

button {
  margin-top: 2rem;
  padding: 1rem 2rem;
  font-size: 1rem;
  border: none;
  border-radius: 8px;
  background: white;
  color: #667eea;
  cursor: pointer;
  transition: transform 0.2s;
}

button:hover {
  transform: scale(1.05);
}

Y el JavaScript en src/main.js:

const titulo = document.getElementById("titulo");
const boton = document.getElementById("cambiar-btn");

const mensajes = [
  "¡Hola Mundo!",
  "¡Bienvenido a Tauri!",
  "¡Esto es genial!",
  "Aplicaciones nativas con web"
];

let indice = 0;

boton.addEventListener("click", () => {
  indice = (indice + 1) % mensajes.length;
  titulo.textContent = mensajes[indice];
});

Ahora cada vez que hagas clic en el botón, el mensaje cambiará.

Resumen

En este capítulo has aprendido a:

Crear un proyecto Tauri con el asistente
Ejecutar la aplicación en modo desarrollo
Modificar HTML, CSS y JavaScript
Aprovechar el hot reload

En el próximo capítulo exploraremos la estructura de un proyecto Tauri en detalle para entender qué hace cada archivo y carpeta.

Nos vemos en el Capítulo 4.

¿Te está gustando este tutorial?

Este tutorial forma parte del libro Tauri 2.0: Aplicaciones de Escritorio con React y Rust, disponible en Amazon en formato papel y ebook. El libro incluye todos los capítulos, tres proyectos completos paso a paso y contenido exclusivo que no encontrarás en el blog.

Consíguelo en Amazon