¿Qué es Vite? Guía en lenguaje sencillo para creadores de apps

Vite (se pronuncia «vit», que en francés significa «rápido») es una herramienta de compilación para sitios web y apps web. Mientras construyes, ejecuta un servidor de desarrollo que muestra tus cambios en el navegador casi al instante. Cuando estás listo para publicar, empaqueta tu código en archivos pequeños y optimizados que cualquier servicio de alojamiento puede servir. Es gratuito, de código abierto y la herramienta predeterminada de muchos proyectos de React, Vue y Svelte.

Por qué Vite importa cuando creas con IA

Quizá nunca escribas un comando de Vite, pero si tu app se creó con un creador de apps con IA, lo más probable es que Vite la esté ejecutando. Mythex empieza los proyectos nuevos con Vite + React + TypeScript + Tailwind, salvo que pidas otra cosa (cómo se elige la tecnología).

Saber qué hace Vite te ayuda a:

• Entender la vista previa. La vista previa en directo que se actualiza mientras la IA edita archivos suele ser un servidor de desarrollo de Vite.
• Entender la publicación. Una app de Vite se convierte en una carpeta de archivos estáticos (HTML, JavaScript, CSS e imágenes), que es barata y sencilla de alojar.
• Leer los mensajes de error. Cuando la vista previa muestra una capa roja de error o una página en blanco, a menudo es Vite informando de que un archivo no se ha compilado.
• Conocer sus límites. Vite compila el frontend. Si tu app necesita un backend (una base de datos, claves de API secretas, pagos), eso se ejecuta en otro lugar. Consulta frontend frente a backend.

Una analogía cotidiana

Piensa en la cocina de un restaurante.

• Durante la preparación del servicio (desarrollo), el chef prueba y ajusta cada plato sobre la marcha. Cambia el condimento y lo prueba otra vez un segundo después. Eso es el servidor de desarrollo de Vite: cambias un archivo, la página se actualiza al momento, a menudo sin perder lo que hubieras escrito en un formulario.
• Para un pedido de catering (producción), todo se cocina, se porciona, se empaqueta y se etiqueta para que viaje bien y pueda servirse en cualquier lugar. Eso es vite build: tu código se agrupa, se reduce y recibe nombres de archivo con huella digital, listos para cualquier servicio de alojamiento.

Las mismas recetas, dos formas muy distintas de trabajarlas, y Vite hace ambas.

Qué hace Vite realmente

Una app web moderna está formada por muchos archivos: componentes, estilos, imágenes y bibliotecas de terceros. Los navegadores no pueden usar todo eso tal como está escrito. TypeScript tiene que convertirse en JavaScript, el JSX de React tiene que transformarse y las clases de Tailwind tienen que convertirse en CSS.

Vite lo gestiona en dos modos:

Las herramientas antiguas agrupaban toda la app antes de mostrar nada, así que arrancar y actualizar un proyecto grande podía tardar mucho. El truco de Vite es saltarse eso durante el desarrollo y dejar que el navegador cargue los archivos según se necesiten. Para producción sigue agrupando —desde Vite 8, con un empaquetador llamado Rolldown— porque muchos archivos pequeños son más lentos para el visitante que unos pocos optimizados.

Un ejemplo práctico: qué hay dentro de un proyecto de Vite

Esto es, aproximadamente, lo que contiene una app pequeña de Vite + React:

my-app/
  index.html          ← la única página HTML desde la que arranca la app
  package.json        ← lista de bibliotecas y scripts (dev, build)
  vite.config.ts      ← ajustes de Vite y plugins
  src/
    main.tsx          ← arranca React y lo monta en index.html
    App.tsx           ← el componente principal de tu app
    index.css         ← estilos, p. ej. @import "tailwindcss";
  public/             ← archivos que se copian tal cual (favicon, robots.txt)

Y los scripts de package.json:

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

Ahora sigue un solo cambio:

1. Le pides a la IA que «ponga el título en azul».
2. Edita una clase en App.tsx.
3. Vite detecta que el archivo cambió, transforma solo ese archivo y envía la actualización al navegador.
4. El título se pone azul en la vista previa, normalmente en menos de un segundo.

Cuando publicas, vite build genera algo como dist/index.html más dist/assets/index-a1b2c3.js. Esa parte de apariencia aleatoria del nombre cambia cada vez que cambia el contenido, así que los navegadores y las CDN pueden guardar los archivos en caché durante mucho tiempo sin servir código obsoleto.

Variables de entorno en Vite

Vite solo expone al código del navegador las variables cuyo nombre empieza por VITE_, por ejemplo VITE_PUBLIC_MAP_ID. Es una medida de seguridad: cualquier cosa que esté en el código del navegador puede verla el visitante, así que las claves secretas nunca deben llevar ese prefijo y deben quedarse en un backend. Consulta variables de entorno y secretos.

Términos clave

Falsas creencias habituales

• «Vite es un framework». Es una herramienta de compilación. React, Vue o Svelte es el framework; Vite lo ejecuta y lo empaqueta.
• «Una app de Vite incluye un backend». Una app estándar de Vite es solo frontend. Las bases de datos, los inicios de sesión y las claves secretas necesitan un servidor o una API junto a ella.
• «El servidor de desarrollo puede estar en línea». No está pensado para tráfico real. Publica siempre la salida de la compilación de producción.
• «Todo lo que está en .env es secreto». En una app de Vite, las variables VITE_ se incorporan a los archivos que descarga cada visitante.
• «Si al recargar una página aparece un 404, la app está rota». En una aplicación de una sola página, el alojamiento debe devolver todas las rutas a index.html. Es un ajuste del alojamiento; consulta cómo solucionar errores 404 tras publicar.

Qué pedir a tu creador con IA

• «¿Esta app es solo de Vite (frontend) o también tiene backend? ¿Dónde se ejecuta cada parte?».
• «Ejecuta la compilación de producción y corrige los errores o advertencias antes de publicar».
• «Comprueba que no haya claves secretas en variables VITE_ ni en ningún código del frontend».
• «La vista previa muestra una página en blanco: revisa los errores de Vite y de la consola del navegador y corrige la causa». Consulta cómo solucionar una página en blanco.
• «Asegúrate de que recargar cualquier URL de página funcione tras publicar, no solo la página de inicio».

Vite en Mythex

Cada proyecto nuevo de Mythex empieza con Vite, salvo que pidas Next.js, HTML estático u otro backend. La vista previa en directo de tu entorno privado se actualiza a medida que el agente edita archivos, y Publicar compila la app y la despliega; no tienes que configurar ningún alojamiento tú mismo. Si más adelante necesitas una API o una base de datos, pídelo en el chat y Mythex puede añadir un servicio de backend junto al frontend de Vite (apps de varios servicios).

Preguntas