Frontend Apps
1. Visión General
Los Frontend Apps son aplicaciones de interfaz (sitios estáticos, SPAs, dashboards) alojadas y publicadas por la plataforma. La pantalla de listado es filtrable por Squad, muestra las columnas App, Stack, Branch, Artifacts, Sync, Last Update, Environments y Actions, y tiene dos botones de creación: Create App (vía vibe code) e Import from GitHub.
2. Creando un Frontend App
Existen dos formas de crear un Frontend App:
Vibe Code (Create App)
El asistente Create App genera la aplicación a partir de una descripción en lenguaje natural:
- Describe lo que quieres construir (ej: "A landing page for a coffee shop with menu and contact form...").
- Elige el Model de IA usado para generar el código (ej:
Claude Sonnet 4.6). - Haz clic en Next — la plataforma hace preguntas de seguimiento y luego genera (scaffold) el app.
Al crear vía vibe code, la plataforma ya se encarga del Dockerfile automáticamente — no hace falta configurar nada manualmente para esa parte.
Import from GitHub
Importa un frontend ya existente desde un repositorio Git:
| Campo | Obligatorio | Descripción |
|---|---|---|
| App Name | Sí | Nombre del app. Solo letras minúsculas, números y guiones. |
| GitHub URL | Sí | URL del repositorio (ej: https://github.com/owner/repo). |
| Branch | Sí | Branch usada para build/deploy. Por defecto: main. |
| Container Port | Sí | Puerto expuesto por el contenedor de la aplicación. Por defecto: 80. |
| App Folder in Repository (optional) | No | Subcarpeta del app dentro del repositorio, si no está en la raíz (ej: apps/api). |
| Dockerfile Path (optional) | No | Ruta del Dockerfile, relativa a la carpeta del app. Por defecto: Dockerfile. |
| Carpetas adicionales (optional) | No | Carpetas hermanas del monorepo necesarias para el build (ej: flow-api,components). |
| GitHub Token (optional) | No | Token de acceso, necesario solo para repositorios privados. Se cifra antes de ser almacenado. |
Cuando el app se importa desde GitHub, es obligatorio tener un Dockerfile configurado correctamente en el repositorio: es a partir de él que la plataforma construye la imagen de la aplicación. Si el Dockerfile falta, o no levanta la aplicación en el puerto indicado en Container Port, el build falla.
3. Entornos (Environments)
Cada Frontend App tiene entornos (ej: Test, Production), cada uno mostrando:
| Campo | Descripción |
|---|---|
| Status | Ej: Running, Not Deployed. |
| Artifact | Identificador/tag de la imagen publicada en ese entorno. |
| Replicas | Número de réplicas corriendo. |
| Memory | Memoria asignada. |
| Secrets | Secrets vinculados a ese entorno. |
| ConfigMaps | Config Maps vinculados a ese entorno. |
4. IDE del App
Al abrir un Frontend App (Open IDE), la pantalla tiene 4 pestañas:
| Pestaña | Descripción |
|---|---|
| Code | Editor de archivos del repositorio, con árbol de archivos a la izquierda. |
| Preview | Live preview de la aplicación en ejecución. |
| Preview Logs | Logs de la ejecución del preview. |
| Builds | Historial de builds de la aplicación. |
El botón Build (esquina superior derecha) dispara un nuevo build de la aplicación a partir del repositorio configurado.
AI Copilot
En el panel lateral derecho, el AI Copilot permite pedirle a la IA que modifique, cree o analice el código del app, con atajos rápidos como Error handling, Refactor y Add tests. Es posible elegir el modelo de IA usado (ej: Claude Sonnet).
5. Publicando un Frontend App
A diferencia de un Backend App, publicar un Frontend App es más directo: basta con hacer el build y el deploy — la plataforma ya genera automáticamente un link público para acceder a la aplicación. No es necesario configurar una ruta en API Management.
6. Preguntas frecuentes
¿Un Frontend App puede llamar a un Flow o Backend App?
Sí. Para no dejar la URL de destino fija en el código, guárdala en un Config Map con un valor por entorno y vincúlalo al app — así el mismo código funciona en test y en production.
¿Se puede usar un Dockerfile propio aun creando vía vibe code? Sí — el código generado por el vibe code queda disponible en la pestaña Code del IDE y puede modificarse, incluido el Dockerfile.