Frontend Apps
1. Visão Geral
Frontend Apps são aplicações de interface (sites estáticos, SPAs, dashboards) hospedadas e publicadas pela plataforma. A tela de listagem é filtrável por Squad, mostra as colunas App, Stack, Branch, Artifacts, Sync, Last Update, Environments e Actions, e tem dois botões de criação: Create App (via vibe code) e Import from GitHub.
2. Criando um Frontend App
Existem duas formas de criar um Frontend App:
Vibe Code (Create App)
O assistente Create App gera a aplicação a partir de uma descrição em linguagem natural:
- Descreva o que você quer construir (ex: "A landing page for a coffee shop with menu and contact form...").
- Escolha o Model de IA usado para gerar o código (ex:
Claude Sonnet 4.6). - Clique em Next — a plataforma faz perguntas de acompanhamento e então gera (scaffold) o app.
Ao criar via vibe code, a plataforma já cuida do Dockerfile automaticamente — não é preciso configurar nada manualmente para essa parte.
Import from GitHub
Importa um frontend já existente a partir de um repositório Git:
| Campo | Obrigatório | Descrição |
|---|---|---|
| App Name | Sim | Nome do app. Apenas letras minúsculas, números e hífens. |
| GitHub URL | Sim | URL do repositório (ex: https://github.com/owner/repo). |
| Branch | Sim | Branch usada para build/deploy. Padrão: main. |
| Container Port | Sim | Porta exposta pelo container da aplicação. Padrão: 80. |
| App Folder in Repository (optional) | Não | Subpasta do app dentro do repositório, se não estiver na raiz (ex: apps/api). |
| Dockerfile Path (optional) | Não | Caminho do Dockerfile, relativo à pasta do app. Padrão: Dockerfile. |
| Pastas adicionais (optional) | Não | Pastas irmãs de monorepo necessárias para o build (ex: flow-api,components). |
| GitHub Token (optional) | Não | Token de acesso, necessário apenas para repositórios privados. É criptografado antes de ser armazenado. |
Quando o app é importado do GitHub, é obrigatório ter um Dockerfile configurado corretamente no repositório: é a partir dele que a plataforma constrói a imagem da aplicação. Se o Dockerfile estiver ausente ou não subir a aplicação na porta informada em Container Port, o build falha.
3. Ambientes (Environments)
Cada Frontend App tem ambientes (ex: Test, Production), cada um mostrando:
| Campo | Descrição |
|---|---|
| Status | Ex: Running, Not Deployed. |
| Artifact | Identificador/tag da imagem publicada nesse ambiente. |
| Replicas | Número de réplicas rodando. |
| Memory | Memória alocada. |
| Secrets | Secrets vinculadas a esse ambiente. |
| ConfigMaps | Config Maps vinculados a esse ambiente. |
4. IDE do App
Ao abrir um Frontend App (Open IDE), a tela tem 4 abas:
| Aba | Descrição |
|---|---|
| Code | Editor de arquivos do repositório, com árvore de arquivos à esquerda. |
| Preview | Live preview da aplicação em execução. |
| Preview Logs | Logs da execução do preview. |
| Builds | Histórico de builds da aplicação. |
O botão Build (canto superior direito) dispara um novo build da aplicação a partir do repositório configurado.
AI Copilot
No painel lateral direito, o AI Copilot permite pedir para a IA modificar, criar ou analisar o código do app, com atalhos rápidos como Error handling, Refactor e Add tests. É possível escolher o modelo de IA usado (ex: Claude Sonnet).
5. Publicando um Frontend App
Diferente de um Backend App, publicar um Frontend App é mais direto: basta fazer o build e o deploy — a plataforma já gera automaticamente um link público para acessar a aplicação. Não é necessário configurar uma rota em API Management.
6. Perguntas frequentes
Um Frontend App pode chamar um Flow ou Backend App?
Sim. Para não deixar a URL de destino fixa no código, guarde-a em um Config Map com um valor por ambiente e vincule-o ao app — assim o mesmo código funciona em test e em production.
Dá para usar um Dockerfile próprio mesmo criando via vibe code? Sim — o código gerado pelo vibe code fica disponível na aba Code da IDE e pode ser alterado, incluindo o Dockerfile.