Desarrollo

Ahora que tienes todo configurado, estás listo para ejecutar tu aplicación usando Tauri.

Si estás utilizando un framework UI o empaquetador de JavaScript, es probable que tengas acceso a un servidor de desarrollo que acelerará tu proceso de desarrollo, por lo que si aún no has configurado la URL de dev de tu app y el script que la inicia, puedes hacerlo a través de los valores de configuración devUrl y beforeDevCommand:

tauri.conf.json

{
  "build": {
    "devUrl": "http://localhost:3000",
    "beforeDevCommand": "npm run dev"
  }
}

Nota

Cada framework tiene sus propias herramientas de desarrollo. Está fuera del alcance de este documento cubrirlas todas o mantenerse al día.

Consulta la documentación de tu framework para obtener más información y determinar los valores correctos a configurar.

De lo contrario, si no estás utilizando un framework UI o empaquetador de módulos, puedes apuntar Tauri al código fuente de tu frontend y la CLI de Tauri iniciará un servidor de desarrollo por ti:

tauri.conf.json

{
  "build": {
    "frontendDist": "./src"
  }
}

Ten en cuenta que en este ejemplo, la carpeta src debe incluir un archivo index.html junto con cualquier otro activo cargado por tu frontend.

Seguridad del servidor de dev sin framework / Vanilla

El servidor de desarrollo integrado de Tauri no admite autenticación mutua ni cifrado. Nunca deberías usarlo para el desarrollo en redes no confiables. Consulta las consideraciones de seguridad del servidor de desarrollo para obtener una explicación más detallada.

Desarrollar tu aplicación de escritorio

Para desarrollar tu aplicación para escritorio, ejecuta el comando tauri dev.

npm

npm run tauri dev

yarn

yarn tauri dev

pnpm

pnpm tauri dev

deno

deno task tauri dev

bun

bun tauri dev

cargo

cargo tauri dev

La primera vez que ejecutes este comando, el gestor de paquetes de Rust puede necesitar varios minutos para descargar y compilar todos los paquetes requeridos. Dado que se almacenan en caché, las compilaciones posteriores son mucho más rápidas, ya que solo se necesita recompilar tu código.

Una vez que Rust haya terminado de compilar, se abre el webview mostrando tu aplicación web. Puedes realizar cambios en tu aplicación web y, si tus herramientas lo admiten, el webview debería actualizarse automáticamente, al igual que un navegador.

Abrir el inspector web

Puedes abrir el inspector web para depurar tu aplicación haciendo clic derecho en el webview y seleccionando "Inspeccionar" o usando el atajo Ctrl + Shift + I en Windows y Linux o el atajo Cmd + Option + I en macOS.

Desarrollar tu aplicación móvil

El desarrollo para dispositivos móviles es similar a cómo funciona el desarrollo de escritorio, pero debes ejecutar tauri android dev o tauri ios dev en su lugar:

npm

npm run tauri [android|ios] dev

yarn

yarn tauri [android|ios] dev

pnpm

pnpm tauri [android|ios] dev

deno

deno task tauri [android|ios] dev

bun

bun tauri [android|ios] dev

cargo

cargo tauri [android|ios] dev

La primera vez que ejecutes este comando, el gestor de paquetes de Rust puede necesitar varios minutos para descargar y compilar todos los paquetes requeridos. Dado que se almacenan en caché, las compilaciones posteriores son mucho más rápidas, ya que solo se necesita recompilar tu código.

Servidor de desarrollo

El servidor de desarrollo en móvil funciona de manera similar al de escritorio, pero si estás intentando ejecutar en un dispositivo iOS físico, debes configurarlo para escuchar en una dirección particular proporcionada por la CLI de Tauri, definida en la variable de entorno TAURI_DEV_HOST. Esta dirección es una dirección de red pública (que es el comportamiento predeterminado) o la dirección TUN del dispositivo iOS real, lo cual es más seguro, pero actualmente requiere Xcode para conectarse al dispositivo.

Para utilizar la dirección del dispositivo iOS debes abrir Xcode antes de ejecutar el comando dev y asegurarte de que tu dispositivo esté conectado a través de la red en el menú Window > Devices and Simulators. Luego debes ejecutar tauri ios dev --force-ip-prompt para seleccionar la dirección del dispositivo iOS (una dirección IPv6 que termina con ::2).

Para hacer que tu servidor de desarrollo escuche en el host correcto de modo que sea accesible por el dispositivo iOS, debes ajustar su configuración para usar el valor TAURI_DEV_HOST si ha sido proporcionado. Aquí hay un ejemplo de configuración para Vite:

import { defineConfig } from 'vite';

const host = process.env.TAURI_DEV_HOST;

// https://vitejs.dev/config/
export default defineConfig({
  clearScreen: false,
  server: {
    host: host || false,
    port: 1420,
    strictPort: true,
    hmr: host
      ? {
          protocol: 'ws',
          host,
          port: 1421,
        }
      : undefined,
  },
});

Consulta la guía de configuración de tu framework para obtener más información.

Nota

Los proyectos creados con create-tauri-app configuran tu servidor de desarrollo para el desarrollo móvil de forma predeterminada.

Selección de dispositivo

De forma predeterminada, el comando dev móvil intenta ejecutar tu aplicación en un dispositivo conectado, y en su defecto te solicita que selecciones un simulador para usar. Para definir el objetivo de ejecución por adelantado, puedes proporcionar el nombre del dispositivo o simulador como argumento:

npm

npm run tauri ios dev 'iPhone 15'

yarn

yarn tauri ios dev 'iPhone 15'

pnpm

pnpm tauri ios dev 'iPhone 15'

deno

deno task tauri ios dev 'iPhone 15'

bun

bun tauri ios dev 'iPhone 15'

cargo

cargo tauri ios dev 'iPhone 15'

Usar Xcode o Android Studio

Como alternativa, puedes optar por utilizar Xcode o Android Studio para desarrollar tu aplicación. Esto puede ayudarte a solucionar algunos problemas de desarrollo utilizando el IDE en lugar de las herramientas de línea de comandos. Para abrir el IDE móvil en lugar de ejecutar en un dispositivo o simulador conectado, usa la bandera --open:

npm

npm run tauri [android|ios] dev --open

yarn

yarn tauri [android|ios] dev --open

pnpm

pnpm tauri [android|ios] dev --open

deno

deno task tauri [android|ios] dev --open

bun

bun tauri [android|ios] dev --open

cargo

cargo tauri [android|ios] dev --open

Nota

Si tienes la intención de ejecutar la aplicación en un dispositivo iOS físico, también debes proporcionar el argumento --host y tu servidor de desarrollo debe usar el valor process.env.TAURI_DEV_HOST como host. Consulta la guía de configuración de tu framework para obtener más información.

npm

npm run tauri [android|ios] dev --open --host

yarn

yarn tauri [android|ios] dev --open --host

pnpm

pnpm tauri [android|ios] dev --open --host

deno

deno task tauri [android|ios] dev --open --host

bun

bun tauri [android|ios] dev --open --host

cargo

cargo tauri [android|ios] dev --open --host

Precaución

Para usar Xcode o Android Studio, el proceso de la CLI de Tauri debe estar ejecutándose y no se puede finalizar. Se recomienda utilizar el comando tauri [android|ios] dev --open y mantener el proceso activo hasta que cierres el IDE.

Abrir el inspector web

• iOS

  Se debe usar Safari para acceder al inspector web de tu aplicación de iOS.

  Abre Safari en tu Mac, elige Safari > Configuración en la barra de menú, haz clic en Avanzado y luego selecciona Mostrar funciones para desarrolladores web.

  Si estás ejecutando en un dispositivo físico, debes habilitar el Inspector web en Configuración > Safari > Avanzado.

  Después de seguir todos los pasos deberías ver un menú Desarrollo en Safari, donde encontrarás los dispositivos y aplicaciones conectados para inspeccionar. Selecciona tu dispositivo o simulador y haz clic en localhost para abrir la ventana de Herramientas de desarrollo de Safari.

• Android

  El inspector está habilitado de forma predeterminada para los emuladores de Android, pero debes habilitarlo para los dispositivos físicos. Conecta tu dispositivo Android a la computadora, abre la aplicación Configuración en el dispositivo Android, selecciona Acerca del teléfono, desplázate hasta Número de compilación y tócalo 7 veces. Esto habilitará el Modo desarrollador para tu dispositivo Android y la configuración de Opciones para desarrolladores.

  Para habilitar la depuración de aplicaciones en tu dispositivo, debes ingresar a la configuración de Opciones para desarrolladores, activar el interruptor de opciones de desarrollador y habilitar la Depuración por USB.

  Nota

  Cada distribución de Android tiene su propia forma de habilitar el Modo desarrollador. Consulta la documentación de tu fabricante para obtener más información.

  El inspector web para Android funciona con las DevTools de Google Chrome y se puede acceder navegando a chrome://inspect en el navegador Chrome de tu computadora. Tu dispositivo o emulador debería aparecer en la lista de dispositivos remotos si tu aplicación Android se está ejecutando, y puedes abrir las herramientas de desarrollo haciendo clic en inspect en la entrada correspondiente a tu dispositivo.

Solución de problemas

1. Error al ejecutar el script de compilación en Xcode

Tauri se conecta al proyecto Xcode de iOS creando una fase de compilación que ejecuta la CLI de Tauri para compilar el código fuente de Rust como una biblioteca que se carga en tiempo de ejecución. La fase de compilación se ejecuta en el contexto del proceso de Xcode, por lo que es posible que no pueda usar modificaciones de shell como adiciones al PATH, así que ten cuidado al usar herramientas como gestores de versiones de Node.js que podrían no ser compatibles.

2. Solicitud de permiso de red en la primera ejecución de la aplicación de iOS

La primera vez que ejecutas tauri ios dev, es posible que veas que iOS te solicita permiso para buscar y conectarse a dispositivos en tu red local. Este permiso es necesario porque, para acceder a tu servidor de desarrollo desde un dispositivo iOS, debe estar expuesto en la red local. Para ejecutar tu aplicación en tu dispositivo, debes hacer clic en Permitir y reiniciar tu aplicación.

Reaccionar a cambios en el código fuente

De manera similar a cómo tu webview refleja los cambios en tiempo real, tauri dev vigila tu carpeta src-tauri y sus crates dependientes en el workspace en busca de cambios, de modo que tu aplicación se recompila y reinicia automáticamente cada vez que los modificas.

Puedes desactivar este comportamiento usando la bandera --no-watch en el comando tauri dev.

Para ignorar el rastreo de ciertos archivos, puedes crear archivos .taurignore que funcionan como archivos .gitignore regulares:

.taurignore

build/
src/generated/*.rs
deny.toml

Los archivos .taurignore generalmente se colocan en el directorio src-tauri o en la carpeta raíz del cargo workspace. Actualmente, tauri dev busca archivos .taurignore en cualquier lugar dentro del ancestro común de las carpetas rastreadas y la carpeta raíz del workspace de Cargo.

Usar las DevTools del navegador

Las API de Tauri solo funcionan en la ventana de tu aplicación, por lo que una vez que comiences a usarlas ya no podrás abrir tu frontend en el navegador de tu sistema.

Si prefieres utilizar las herramientas de desarrollo de tu navegador, debes configurar tauri-invoke-http para conectar las llamadas a la API de Tauri a través de un servidor HTTP.

Control de versiones

En el repositorio de tu proyecto, DEBES hacer commit del archivo src-tauri/Cargo.lock junto con src-tauri/Cargo.toml en git porque Cargo utiliza el lockfile para proporcionar compilaciones deterministas. Como resultado, se recomienda que todas las aplicaciones incluyan su Cargo.lock en el control de versiones. NO DEBES hacer commit de la carpeta src-tauri/target ni de ninguno de sus contenidos.