Una configuración lista para Vite, Next.js o Astro en 30 segundos
Arrancas un proyecto nuevo. Sabes que quieres TypeScript, Tailwind, el alias @/*, quizá un proxy de desarrollo a tu backend, quizá salida standalone para Docker. La documentación "oficial" reparte todo eso en seis páginas, y los snippets siempre asumen otro snippet que no has leído todavía. Acabas copiando media configuración de un tutorial y otra mitad de otro, y pasas la hora siguiente depurando por qué nada funciona.
Este generador te da el único archivo de configuración que necesitas: precableado, comentado, listo para copiar y pegar. Elige el framework (Vite, Next.js o Astro), activa las opciones que quieras y la configuración generada se actualiza en vivo a la derecha. Cópiala a la raíz de tu proyecto, ejecuta npm install para los plugins listados y ya puedes escribir código.
Ningún archivo se envía a ningún sitio. Todo se ejecuta en tu navegador, incluida la generación. La salida es una configuración limpia y moderna que coincide con lo que los equipos de los frameworks recomiendan en 2025.
Cómo se usa
- Elige un framework arriba: Vite para una SPA rápida, Next.js para una app React fullstack, Astro para un sitio estático centrado en contenido.
- Activa los interruptores a la izquierda. Cada uno cambia la configuración generada a la derecha en tiempo real, incluidos los comentarios inline para que entiendas qué hace cada sección.
- Para Vite, elige un flavor (React, Vue, Svelte, SolidJS, Vanilla). Para Next, elige un router (App o Pages) y el modo de salida (default, standalone, static export). Para Astro, elige las integraciones (React, Vue, Svelte).
- ¿Necesitas un proxy de desarrollo para Vite? Activa el interruptor Proxy y escribe la ruta y el destino. ¿Necesitas habilitar dominios de imagen en Next? Escribe un host por línea en el textarea.
- Cuando la vista previa esté correcta, pulsa Copiar arriba del panel de vista previa y pégala como vite.config.ts / next.config.ts / astro.config.mjs en la raíz del proyecto.
- Instala los plugins que importa la configuración (sus nombres aparecen en las líneas `import` de arriba). La mayoría son paquetes oficiales tipo `@vitejs/plugin-react`, `@astrojs/react` o `next-intl`.
- También puedes pulsar Reset para volver a un valor por defecto sensato del framework activo: útil al experimentar.
Cuándo te resulta útil
Seis momentos típicos en los que el generador ahorra minutos reales:
- Arrancar un proyecto desde cero. Has ejecutado `npm create vite@latest` y quieres añadir Tailwind, un alias y un proxy sin leer tres posts de blog. Eliges Vite, activas opciones y pegas encima la configuración generada. Listo en 30 segundos.
- Migrar de Pages Router a App Router. Next.js 16 trae App Router por defecto. El generador muestra la configuración moderna con App Router, next-intl, typedRoutes y salida standalone, todo montado como recomienda el equipo de Next en 2025. Copia y adapta.
- Configurar Docker para una app Next.js. Necesitas output: 'standalone' para que la imagen Docker sea pequeña, pero también typedRoutes y dominios de imagen. El generador escribe todo el bloque correcto en lugar de adivinar nombres de campo.
- Cambiar de create-react-app a Vite. CRA está sin mantenimiento. El generador te da una configuración Vite + React + TS + Tailwind + @/* que entra limpia, sin el infierno de configuración de Webpack ni los workarounds de `craco`.
- Añadir un proxy de API en desarrollo. Tu frontend está en localhost:5173, tu backend Go/Python/Rust en localhost:8080. Necesitas que /api redirija al backend con el bypass de CORS correcto. El generador escribe el bloque proxy con `changeOrigin` y `secure: false`.
- Levantar un sitio de contenido con Astro. Quieres salida estática, islas de React para piezas interactivas, Tailwind y enrutado i18n. La documentación de Astro lo tiene, pero repartido en cinco guías. El generador lo concentra en un archivo.