Frontend rendering
Forge turns UI routes into Svelte pages.
@noego/forge is the frontend rendering engine for NoEgo applications. It reads frontend route definitions, builds the page/layout tree, runs server load functions, renders the first response on the server, and then keeps navigation fast in the browser.
In generated projects, you normally reach Forge through @noego/app. App owns config, processes, and builds; Forge owns what happens after App hands it the UI route document and component directory.
What Forge Owns
Forge responsibilities
- Frontend OpenAPI route matching
- Svelte page and layout selection
- Server-side load functions
- Page controller construction
- SSR, hydration, and in-app navigation
Owned by neighboring packages
- @noego/app
- Process orchestration, noego.config.yml, dev servers, build output, and production serving.
- @noego/dinner
- Backend OpenAPI routes, request validation, controller actions, and API middleware.
- @noego/stitch
- Combines split YAML files before App passes the final route document to Forge or Dinner.
Runtime Flow
- 1 UI route
Forge reads client.openapi and finds the matching frontend route.
- 2 View tree
x-layout wraps x-view from outside to inside.
- 3 Server data
Optional .load.ts files run before render and return serializable props.
- 4 Controller
Optional x-controller receives load data and exposes data/input/events.
- 5 Render
Forge sends SSR HTML, then hydrates and upgrades links for client navigation.
Typical Files
Forge works from the frontend half of a NoEgo project. The exact paths come from App config, but generated projects usually keep this shape.
src/ui/
├── stitch.yaml # client.openapi
├── openapi/ # UI route modules
├── index.html # client.shell
├── frontend.ts # client.main
├── layout/ # x-layout components
├── pages/ # x-view components and .load.ts files
└── controllers/ # x-controller page controllers# src/ui/openapi/projects.yaml
modules:
projects:
basePath: /projects
x-layout:
- layout/app_layout.svelte
paths:
/{projectId}:
get:
summary: Project detail
x-view: pages/projects/detail.svelte
x-controller: controllers/project_detail.controller.svelte.tsRead Next
Routes, Pages, and Layouts
Learn how UI OpenAPI route metadata maps URLs to Svelte views and nested layouts.
Load Functions
Load server data before SSR and reuse the same route contract during client navigation.
Page Controllers
Move behavior into testable data/input/events classes while Svelte stays focused on rendering.
Navigation and Hydration
Understand the first request, hydration, in-app links, JSON navigation, and redirects.
App Integration
See exactly which noego.config.yml client fields App passes into Forge.
Svelte Integration
Use Svelte 5 runes, snippets, and SSR-safe component patterns inside Forge pages.