¿Qué es Vite? Guía sencilla para creadores de apps

Vite (se pronuncia «vit», la palabra francesa que significa «rápido») es una herramienta de construcción para sitios y aplicaciones 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 servidor web puede servir. Es gratuita, 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 sea quien la ejecuta. 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 vivo 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), lo que es barato y sencillo de alojar.
• Leer los mensajes de error. Cuando la vista previa muestra una superposición de error en rojo o una página en blanco, a menudo es Vite informando de que un archivo no se pudo compilar.
• Conocer sus límites. Vite construye 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. Cambias el punto de sal y lo pruebas de nuevo un segundo después. Eso es el servidor de desarrollo de Vite: cambias un archivo y la página se actualiza al momento, a menudo sin perder lo que hayas 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 para que sea apto para cualquier servidor.

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

Qué hace Vite realmente

Una aplicación 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 gestiona esto 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 ese paso durante el desarrollo y dejar que el navegador cargue los archivos según los necesite. Para producción sigue agrupando —desde Vite 8, con un empaquetador llamado Rolldown—, porque muchos archivos pequeños son más lentos para los visitantes que unos pocos optimizados.

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

Así es, aproximadamente, una app pequeña de Vite + React:

mi-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 y plugins de Vite
  src/
    main.tsx          ← inicia 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. 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.

Al publicar, vite build genera algo como dist/index.html más dist/assets/index-a1b2c3.js. La parte de apariencia aleatoria del nombre de archivo cambia cuando cambia el contenido, de modo 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 en el código del navegador puede verla el visitante, así que las claves secretas nunca deben tener ese prefijo y deben quedarse en un backend. Consulta variables de entorno y secretos.

Términos clave

Malentendidos comunes

• «Vite es un framework.» Es una herramienta de construcción. React, Vue o Svelte son 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 ponerse en internet.» No está pensado para tráfico real. Publica siempre la salida de la construcción de producción.
• «Todo lo que está en .env es secreto.» En una app de Vite, las variables VITE_ se incrustan en los archivos que descarga cada visitante.
• «Si al actualizar una página aparece un 404, la app está rota.» En una aplicación de una sola página, el servidor debe devolver cada ruta a index.html. Es una configuración del alojamiento; consulta cómo solucionar los 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 construcción de producción y corrige los errores o avisos antes de publicar.»
• «Comprueba que ninguna clave secreta esté en variables VITE_ ni en el código del frontend.»
• «La vista previa muestra una página en blanco: revisa los errores de la consola de Vite y del navegador y corrige la causa.» Consulta cómo arreglar una página en blanco.
• «Asegúrate de que al actualizar cualquier URL de página funcione tras publicar, no solo la página de inicio.»

Vite en Mythex

Todo proyecto nuevo de Mythex empieza con Vite, salvo que pidas Next.js, HTML estático o un backend distinto. La vista previa en vivo, en tu sandbox privado, se actualiza a medida que el agente edita archivos, y Publicar construye 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