Skip to main content

Build a custom Frontend Page

A Frontend Page is a first-class app resource containing static files. TWL Tool hosts those files and renders the published entry path inside the installed app shell.

resources: {
  frontendPages: {
    overview: resources.frontendPage({
      name: 'Research overview',
      desiredState: 'published',
      entryPath: 'index.html',
      files: {
        'index.html': '<!doctype html><div id="app"></div>',
        'assets/app.js': compiledJavaScript,
        'assets/app.css': compiledCss,
      },
      dataWorkspaceBindings: {
        sourcesTable: ref('dataWorkspaceTables', 'sources'),
      },
      workflowBindings: {
        createReport: ref('workflowDefinitions', 'createReport'),
      },
    }),
  },
}

Expose it as a surface:

{
  key: 'overview',
  label: 'Overview',
  type: 'frontendPage',
  page: ref('frontendPages', 'overview'),
}

Runtime bindings​

Inside the host, the page receives resolved IDs for only the bindings it declares. Use the Host SDK to read context, navigate to another declared surface, or launch a bound workflow.

Security boundary​

Installed pages do not receive an auth token and cannot use the legacy arbitrary backend-request bridge. The host checks the parent window, origin, protocol version, request ID, surface key, and workflow alias for every semantic request.

:::warning Do not use wildcard postMessage Use createAppHostClient(). It infers and pins the parent origin, verifies responses, applies timeouts, and cleans up listeners. :::