LivePage and start

Documentation for Redweb 0.13.0. Install that exact version when following these examples.

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.

Explain it like I’m five

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

This source is part of the complete realtime recipe. Follow 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 <output>{this.count}</output>
                </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.

What should I watch for?

Keep page constructors cheap and move cancellable preparation into lifecycle hooks. Always retain and await the returned shutdown handle.