La arquitectura de las vistas previas instantáneas de Fly.io en Coderblock

Una buena vista previa de desarrollo no debería limitarse a mostrar cómo podría verse una aplicación. Debería permitirte utilizarla mientras la creas: navegar entre páginas, crear una cuenta, guardar datos, subir archivos, procesar pagos y probar la lógica del backend.

Eso es exactamente lo que hace la vista previa instantánea de Coderblock.

Después de describir una aplicación —o de partir de una de las plantillas disponibles—, el proyecto queda accesible en una dirección específica. Gracias a la recarga en caliente, cada cambio posterior aparece en la vista previa en cuestión de segundos.

Desde la perspectiva del usuario, el proceso es sencillo: describe una funcionalidad y observa cómo cobra forma. Sin embargo, detrás de esa sencillez hay una arquitectura que coordina el código del frontend, los servicios backend, la autenticación, las bases de datos, el almacenamiento, los secretos y el despliegue de la vista previa.

El chat es la interfaz de control

Con Coderblock, el chat se convierte en el punto de entrada de todo el proceso de desarrollo. No necesitas empezar configurando infraestructura, repositorios ni servicios independientes de frontend y backend. Describe en lenguaje natural lo que quieres crear y el agente transformará tu idea en una aplicación funcional.

Por ejemplo:

• “Crea una plataforma de reservas para un gimnasio”.
• “Añade el inicio de sesión y permite que cada miembro vea únicamente sus propias reservas”.
• “Crea una vista de administración con una tabla de reservas”.
• “Permite que los clientes paguen 9,99 € al mes”.
• “Haz que la barra de navegación permanezca fija en dispositivos móviles”.

Por tanto, una sola petición puede generar cambios en varias capas del stack. El frontend generado utiliza React, Vite, TypeScript y Tailwind CSS. En una aplicación web estándar, el backend se ejecuta en un proyecto específico de Supabase con Postgres, Supabase Auth, Storage y Deno Edge Functions.

Esto significa que la vista previa no es una simple representación visual de la petición. Es una aplicación full-stack real. Un formulario puede guardar datos en Postgres. Una página protegida puede utilizar la sesión del usuario autenticado. Una carga puede guardar archivos en Storage. La lógica del backend puede ejecutarse mediante Edge Functions.

En los proyectos Enterprise Web Platform, Coderblock utiliza en su lugar un backend con Python y FastAPI, junto con Neon Postgres. El principio sigue siendo el mismo: describe el comportamiento que buscas, deja que el agente lo implemente y comprueba inmediatamente el resultado en la vista previa.

---

De la petición a la vista previa con recarga en caliente

El ciclo de desarrollo puede entenderse como un proceso de cinco pasos.

1. Describe lo que quieres crear

La petición puede referirse a un único detalle de la interfaz o a una funcionalidad que abarque todo el sistema. “Cambia el color del botón” es principalmente una modificación visual. “Añade cuentas de equipo con espacios de trabajo privados” es algo muy distinto: puede requerir cambios en la interfaz, la autenticación, la base de datos, los permisos y la lógica de la aplicación.

Con Coderblock, no tienes que convertir esa petición en una lista de rutas, migraciones, gestores de sesiones y políticas de acceso. Describe el resultado que quieres conseguir. El agente se encarga de los detalles necesarios para hacerlo realidad.

2. La aplicación se actualiza de extremo a extremo

Cuando una funcionalidad lo requiere, la IA realiza cambios coordinados en las distintas capas de la aplicación.

Si se necesitan datos persistentes, puede diseñar y ejecutar la migración correspondiente del esquema de Postgres. Si hace falta autenticación, puede conectar la interfaz con Supabase Auth y aplicar políticas de Row Level Security basadas en el usuario actual.

Todas las aplicaciones incluyen además una tabla de perfiles y una estructura básica para gestionar roles. Esto proporciona al agente una base uniforme para crear funcionalidades como paneles personales, áreas privadas y vistas de administración sin tener que reinventar el sistema de autenticación en cada ocasión.

3. El backend sigue formando parte de la aplicación

Una vista previa rápida solo resulta realmente útil si todo lo que hay detrás de la interfaz continúa funcionando. Por eso, Coderblock mantiene la aplicación conectada a su base de datos, autenticación, almacenamiento y funciones backend. Desde la pestaña Backend, puedes consultar las tablas del proyecto, los usuarios autenticados, el almacenamiento y las funciones disponibles.

La ventaja es que cada iteración se apoya en la anterior.

Añadir una tabla no implica crear una simulación temporal, sino modificar el modelo de datos de la aplicación. La siguiente petición puede aprovechar esa misma estructura para incorporar filtros, paneles, relaciones o permisos.

4. La vista previa se actualiza en tiempo real

El proyecto se despliega en su dirección de vista previa específica, <app>.coderblock.dev. Cuando la aplicación cambia, la recarga en caliente despliega rápidamente las actualizaciones y las hace visibles en el entorno en ejecución.

La ventaja no es solo la velocidad, sino también la continuidad durante todo el proceso.

No tienes que crear una nueva demo en cada iteración ni cambiar de entorno. Puedes moverte continuamente entre el chat, la vista previa y el backend mientras trabajas siempre sobre la misma aplicación.

La capa de vista previa de Fly.io forma parte de este proceso de despliegue, pero la experiencia es sencilla: cada proyecto dispone de un entorno de desarrollo accesible, las actualizaciones se despliegan rápidamente y la vista previa permanece conectada a todos los servicios full-stack de la aplicación.

No necesitas configurar servidores de vista previa ni pipelines de despliegue antes de probar lo que acabas de crear.

5. Prueba, corrige y continúa

Aquí es donde entra en juego el verdadero valor de la vista previa. Puedes navegar por la aplicación, comprobar su comportamiento responsive, crear cuentas, enviar formularios, verificar permisos y probar el comportamiento asociado a distintos roles.

Si algo no funciona como esperabas, no tienes que volver al código para averiguar qué debes cambiar. Basta con describir el siguiente ajuste.

Describir → generar → previsualizar → probar → perfeccionar

Esta es precisamente la razón por la que la velocidad de Coderblock no depende únicamente de la generación de código. Todo el proceso de desarrollo se mantiene dentro del mismo flujo de trabajo.

Los secretos permanecen fuera del código

Un entorno de desarrollo rápido nunca debería obligarte a sacrificar la seguridad.

Cuando una integración requiere un secreto, Coderblock lo gestiona mediante una solicitud específica de variables de entorno. El valor se almacena en el repositorio de secretos del proyecto en el servidor, sin insertarse en el código generado ni en la conversación habitual.

Stripe es un buen ejemplo de este enfoque.

En el modo gestionado predeterminado, el agente recopila la información necesaria, como el país y el nombre de la empresa, y crea una cuenta de Stripe gestionada para el proyecto. No tienes que administrar directamente las claves de API, y Coderblock también se encarga de configurar los webhooks.

La configuración de pagos y la verificación KYC pueden completarse después mediante el enlace de incorporación alojado por Stripe.

En el modo BYOK, el agente solicita de forma segura STRIPE_SECRET_KEY, la almacena en el servidor y configura automáticamente el webhook. En ambos casos, Coderblock puede crear los productos y precios necesarios en Stripe, configurar el proceso de pago y conectar los distintos componentes con la aplicación. Puedes realizar pruebas antes de habilitar los pagos reales.

La vista previa y producción son cosas distintas

La vista previa sirve para crear y experimentar. Producción sirve para publicar. Son dos etapas diferentes, y Coderblock las mantiene separadas.

Cuando la aplicación está lista, puedes seleccionar Publicar para desplegarla en <app>.coderblock.app. SSL está incluido y las versiones posteriores utilizan actualizaciones rápidas en caliente.

Esto evita que un cambio experimental realizado en el chat se convierta automáticamente en una versión de producción. También puedes conectar un dominio personalizado desde Configuración → Dominios, siguiendo las instrucciones para configurar los registros DNS. Como alternativa, puedes comprar el dominio directamente a través de Coderblock; en ese caso, DNS y SSL se configuran automáticamente.

El resultado es un proceso claro:

Chat → Vista previa → Pruebas → Publicación

El chat dirige el desarrollo, la vista previa te permite ver y probar el resultado, el backend garantiza que la aplicación sea realmente funcional y la publicación pone en línea la versión aprobada.

Una arquitectura diseñada para iterar

El verdadero valor de un sistema de vistas previas instantáneas no reside en un único componente de infraestructura. Reside en la capacidad de todo el sistema para seguir el ritmo del proceso creativo. Con Coderblock, el frontend, la base de datos, la autenticación, el almacenamiento, las funciones, los secretos y el entorno de vista previa forman parte del mismo flujo de trabajo. Puedes empezar con una frase, obtener una aplicación full-stack funcional, probarla de inmediato y seguir modificándola mediante una conversación.

Sin configurar servidores manualmente. Sin cambiar constantemente entre distintas herramientas. Sin convertir cada modificación en un nuevo despliegue.

La infraestructura permanece prácticamente invisible. Tú puedes centrarte en lo importante: crear, probar e iterar.