# Frontend + API behind one route

> Serve a dev frontend at / and an API at /api/* behind a single route.

Putting your frontend and API under one origin removes CORS and makes cookies
simple because the browser sees a single host. routeup can route by path so `/` goes to
your dev server and `/api/*` goes to your API.

## The shape

```txt
https://example-app.localhost/        -> dev server (e.g. Vite on a dynamic port)
https://example-app.localhost/api/*   -> API backend (e.g. port 9080)
```

Both are the same origin, so the browser sends cookies to both and there is no
cross-origin preflight.

## Configure the paths

Describe the path targets in config so the route is reproducible:

```json title="routeup.json"
{
  "name": "example-app",
  "targets": [
    { "path": "/", "port": 5173 },
    { "path": "/api", "port": 9080 }
  ]
}
```

Then serve it:

```bash
routeup serve
```

```txt frame="terminal" title="terminal"
route: example-app
local: https://example-app.localhost
targets:
  /        http://localhost:5173
  /api     http://localhost:9080

requests: live
press Ctrl-C to stop
```

## Public, same shape

Add `--expose` and the single-origin layout is preserved on the public URL too,
so a deployed-style `https://example-app.try.routeup.dev/api/...` works without
reconfiguring the frontend. Configure the hosted server first as described in
[Exposing publicly](/docs/getting-started/exposing-publicly). A token-less hosted address is session-only; a
namespace token gives the route a reusable address for later runs.

```bash
routeup serve --expose
```

This preserves the same single-origin path layout your app can use in
production, so origin-sensitive behavior shows up before you ship.