Frontend Apps
1. Overview
Frontend Apps are interface applications (static sites, SPAs, dashboards) hosted and published by the platform. The listing screen is filterable by Squad, shows the columns App, Stack, Branch, Artifacts, Sync, Last Update, Environments, and Actions, and has two creation buttons: Create App (via vibe code) and Import from GitHub.
2. Creating a Frontend App
There are two ways to create a Frontend App:
Vibe Code (Create App)
The Create App wizard generates the application from a natural-language description:
- Describe what you want to build (e.g. "A landing page for a coffee shop with menu and contact form...").
- Choose the AI Model used to generate the code (e.g.
Claude Sonnet 4.6). - Click Next — the platform asks follow-up questions and then scaffolds the app.
When created via vibe code, the platform already takes care of the Dockerfile automatically — nothing needs to be configured manually for that part.
Import from GitHub
Imports an existing frontend from a Git repository:
| Field | Required | Description |
|---|---|---|
| App Name | Yes | App name. Lowercase letters, numbers, and hyphens only. |
| GitHub URL | Yes | Repository URL (e.g. https://github.com/owner/repo). |
| Branch | Yes | Branch used for build/deploy. Default: main. |
| Container Port | Yes | Port exposed by the application's container. Default: 80. |
| App Folder in Repository (optional) | No | Subfolder of the app within the repository, if not at the root (e.g. apps/api). |
| Dockerfile Path (optional) | No | Dockerfile path, relative to the app folder. Default: Dockerfile. |
| Additional folders (optional) | No | Monorepo sibling folders required for the build (e.g. flow-api,components). |
| GitHub Token (optional) | No | Access token, needed only for private repositories. It's encrypted before being stored. |
When the app is imported from GitHub, a correctly configured Dockerfile is required in the repository: that's what the platform uses to build the application image. If the Dockerfile is missing, or doesn't start the application on the port given in Container Port, the build fails.
3. Environments
Each Frontend App has environments (e.g. Test, Production), each showing:
| Field | Description |
|---|---|
| Status | E.g. Running, Not Deployed. |
| Artifact | Identifier/tag of the image published in that environment. |
| Replicas | Number of replicas running. |
| Memory | Allocated memory. |
| Secrets | Secrets bound to that environment. |
| ConfigMaps | Config Maps bound to that environment. |
4. App IDE
Opening a Frontend App (Open IDE) shows a screen with 4 tabs:
| Tab | Description |
|---|---|
| Code | Repository file editor, with a file tree on the left. |
| Preview | Live preview of the running application. |
| Preview Logs | Logs of the preview execution. |
| Builds | The application's build history. |
The Build button (top-right corner) triggers a new build of the application from the configured repository.
AI Copilot
In the right side panel, the AI Copilot lets you ask AI to modify, create, or analyze the app's code, with quick shortcuts like Error handling, Refactor, and Add tests. You can choose the AI model used (e.g. Claude Sonnet).
5. Publishing a Frontend App
Unlike a Backend App, publishing a Frontend App is more direct: just build and deploy — the platform automatically generates a public link to access the application. There's no need to configure a route in API Management.
6. FAQ
Can a Frontend App call a Flow or Backend App?
Yes. To avoid hardcoding the target URL, store it in a Config Map with one value per environment and bind it to the app — that way the same code works in both test and production.
Can I use my own Dockerfile even when creating via vibe code? Yes — the code generated by vibe code is available on the IDE's Code tab and can be edited, including the Dockerfile.