# Frontend and API on Unbroker

Deploy your frontend and API as separate services in one project. Configure public URLs, environment variables and database access.

Canonical URL: https://unbroker.cloud/solutions/frontend-and-api
Updated: 2026-10-14
Author: Unbroker

[Create your application project](https://app.unbroker.cloud/login)

[Deployment tutorial](https://docs.unbroker.cloud/guides/frontend-and-api)

## Build with Unbroker

- **Independent releases:** Update the frontend without making every asset change a backend release.
- **A shared project view:** Keep services and their relationships visible on the Unbroker canvas.
- **Database, workers and realtime:** Add PostgreSQL, a background worker or Beacon as the product grows.

## Deploy separate frontend and API services

A frontend and an API have different deployment needs, but they belong to the same product. Unbroker lets you operate them as separate services in one project, with their own configuration, deployment history and runtime behavior.

Use a static framework recipe for generated assets, a Next.js server when you need request-time rendering, and a Node.js or Docker service for the API.

## Configure each service

### Deploy the frontend

Publish the built website and point it at the API's public origin. On Pro, connect a production domain and use environment-specific configuration for previews.

### Operate the backend

Keep database credentials and signing secrets in the API service. Inspect runtime logs and resource metrics while the frontend continues to have its own release lifecycle.

## Database, workers and realtime

The same project can include an Apps database node and background workers. For live dashboards or notifications, Beacon provides managed realtime channels without requiring you to operate the WebSocket gateway.

Your team can work in Cloud or through ubctl. The agent skill brings those operational tasks into the coding environment while using the same underlying services.

## Connect the browser to the API correctly

The implementation guide covers public API URLs, environment-specific configuration, CORS and browser checks. It explains the distinction between a private service connection and an endpoint a visitor's browser can reach.

## Choose your plan

Use Pro for framework recipes, shared project variables, previews and production domains. Each running service contributes its configured resource usage.

[Current pricing](https://unbroker.cloud/pricing)

## Related solutions

- https://unbroker.cloud/deploy/astro.md
- https://unbroker.cloud/deploy/nextjs.md
- https://unbroker.cloud/deploy/express.md