Skip to content

Your first interface

This tutorial starts a user interface from the platform's template, runs it on your machine beside a backend service, and deploys it to a local platform. You need Node.js 24, the ankka CLI, and for the last part a local platform (Deploy to a local platform installs one).

Start from the template

ankka init --language web writes a project: a React app built by Vite, a small server that serves it, and a descriptor that makes it a web-hosted service with the service backend mounted at /api.

ankka init shop-web --language web
cd shop-web
npm install
npm run typecheck
npm test
ℹ tests 8
ℹ pass 8
ℹ fail 0

The project's service.json says how the platform runs it:

{
  "name": "shop-web",
  "service": {
    "image": "shop-web:latest",
    "hosting": "web",
    "mounts": [{ "path": "/api", "service": "backend" }]
  }
}

Run it beside a service

Run any ankka service on your machine and name it backend for the interface, then run the interface behind the same proxy a cluster runs:

ankka local web --service backend=http://127.0.0.1:9000 -- npm run dev
mount  /api → backend
serving shop-web at http://127.0.0.1:3000
PORT=…
ANKKA_SERVICES_URL=http://127.0.0.1:…

Open http://localhost:3000. The page shows two things: what backend answered a request under the mount, /api/, and what it answered the server's own call at the calling address, through /summary. A request under /api never reaches your server: the proxy passes it to backend with /api removed.

Deploy it

Build the image, load it into the local platform's cluster, and apply the descriptor:

npm run build
docker build -t shop-web:latest .
kind load docker-image shop-web:latest --name ankka
ankka services apply -f service.json
ankka services get shop-web

Among the lines it prints:

status      Ready
hosting     web
database    none
callers     the internet
mounts      /api  → backend    (no service)

The mount says no service until a service named backend is deployed in the project; a request under it is answered 503 until then. Expose the interface and open it:

ankka services expose shop-web

The hostname services expose prints serves the interface. Deploy your backend as backend, or change the mount in service.json to the name of a service you have, and apply it again: a mount changes without a new image.