LivePage and start
A page is an ordinary decorated class; extending LivePage is optional. start() is the concise entry point that creates a LiveHtmlServer for one or more page classes.
The simple mental model
LivePage is one server-owned screen; start is the power button that publishes your collection of screens and their realtime connection.
When should I use it?
Use a LivePage class when a route owns state, actions, lifecycle, and rendered output; use start to launch the assembled application.
Follow the example
Taken directly from the complete realtime recipe, including its setup and tests.
import { action, page, start, state, type LiveHtmlStartOptions } from 'redweb';
import { runApp } from './run-app';
@page('/', { css: 'app.css', shared: true })
export class CounterPage {
@state() count = 0;
@action()
increment() { this.count += 1; }
render() {
return (
<main class="home">
<h1>A counter owned by the server</h1>
<p>Open this page in two tabs. Either button updates both.</p>
<button rw-click="increment">
Count {this.count}
</button>
</main>
);
}
}
export function createApp(options: LiveHtmlStartOptions = {}) {
return start(CounterPage, { port: Number(process.env.PORT ?? 8181), templateRoot: __dirname, ...options });
}
if (require.main === module) runApp(createApp);
- 1
The page decorator assigns the HTTP route and rendering metadata.
- 2
A new page instance is created according to its configured scope.
- 3
start builds the HTTP and socket surfaces, then returns a handle for orderly shutdown.
Methods and members
start(PageClass, options?)
Starts one decorated page, or an array of pages, with the concise Live HTML server API.
loading(context)
Optional cancellable hook that runs before the initial server render.
connected(context)
Optional hook that runs after the authenticated live socket connects.
disconnected(context)
Optional hook for stopping connection-owned timers and subscriptions.
disposed()
Optional idempotent final cleanup hook for pages and components.