Apps & Ports

App types, port assignment, hostnames, and the dev URLs SiteKnock uses for each app.

App types

Apps are declared in config/sk-config.jsonc under project.apps[]. Each app has a type that determines what gets generated:

Type	Folders	Description
`fe`	`apps/<name>/`	Next.js frontend only
`be`	`apps/<name>/`	Express backend only
`fe+be`	`apps/frontend/`, `apps/backend/`	Fullstack app with both tiers
`e2e`	`apps/<name>/`	Playwright suite that targets other apps

Each app declares dev ports in its config:

{
  "name": "my-app",
  "type": "fe+be",
  "ports": { "frontend": 3000, "backend": 5000 }
}

The frontend defaults to 3000, the backend to 5000.
Studio's project settings let you change ports per app, with conflict detection.
If you run multiple apps at once, give each a unique port.

Each app can declare dev hostnames:

{
  "hostname": {
    "frontend": "localhost",
    "backend": "localhost"
  }
}

The default is localhost.
Custom hostnames (for example my-app.local) require an /etc/hosts entry pointing to 127.0.0.1:
```
127.0.0.1  my-app.local
```
The frontend dev server automatically allows the hostname from NEXT_PUBLIC_SITE_URL and NEXT_PUBLIC_APP_URL.

Tier	URL pattern
Frontend	`http://<hostname>:<port>`
Backend API	`http://<hostname>:<port>/api`
Backend health	`http://<hostname>:<port>/api/health`

E2E apps declare the apps they test via targets:

{
  "name": "my-app-e2e",
  "type": "e2e",
  "targets": ["my-app"]
}

Create one from the CLI with:

pnpm app create my-app-e2e --type e2e --targets my-app

Action	How
Create	`pnpm app create <name> --type <type>` or Studio's Add App dropdown
List	`pnpm app list`
Remove	`pnpm app remove <name>` or the trash icon in Studio
Change ports / hostnames	Studio project settings → expand the app → edit network fields

See Managing Apps for the Studio workflow, or Apps & Locales for the CLI.

Was this page helpful?