Minimal public reader

Use one business client to read site settings and articles without additional state or database coupling.

Browser call

Create a business client in an application with a same-origin API proxy and call it from interaction or lifecycle code. Do not hard-code localhost:8084 into a deployed browser bundle.

TypeScript

import type { Shell } from '@mosaic-base/shell';
import type { ArticleSDK, SiteSDK, I18nSDK } from '@mosaic-base/client-sdk';
import type { AuthClient, ServerAuthClient } from '@mosaic-base/auth-sdk';
// Declare once in your application's type contract, never import SDK implementations.
declare module '@mosaic-base/shell/contracts' {
  interface SdkRegistry {
    'site.config': Pick<SiteSDK, 'getConfig'>;
    'content.articles': Pick<ArticleSDK, 'list' | 'getBySlug' | 'getPreview' | 'search'>;
    'i18n.messages': Pick<I18nSDK, 'load' | 't' | 'clearCache' | 'refresh'>;
    'auth.client': AuthClient | ServerAuthClient;
  }
}

import { createModuleLoader, readPublicBootstrap, startShell } from '@mosaic-base/shell/bootstrap';
export async function createBrowserApplication(appId: string) {
  const bootstrap = await readPublicBootstrap(appId);
  return startShell({ bootstrap, loader: createModuleLoader({ target: 'browser' }),
    host: { apiBaseUrl: new URL('/api', location.origin).href } });
}
export async function readPublishedArticles(shell: Shell) {
  const articles = await shell.getSdk('content.articles');
  return articles.list({ language: 'en-US', page: 1, pageSize: 10 });
}

Consume the result

Render items as a list, show missing content for a null detail, and offer retry for thrown request failures. Render HTML only through a trusted sanitized content pipeline.

Mosaic Base / Documentation

Minimal public reader

Use one business client to read site settings and articles without additional state or database coupling.

Browser call

Create a business client in an application with a same-origin API proxy and call it from interaction or lifecycle code. Do not hard-code localhost:8084 into a deployed browser bundle.

TypeScript

import type { Shell } from '@mosaic-base/shell';
import type { ArticleSDK, SiteSDK, I18nSDK } from '@mosaic-base/client-sdk';
import type { AuthClient, ServerAuthClient } from '@mosaic-base/auth-sdk';
// Declare once in your application's type contract, never import SDK implementations.
declare module '@mosaic-base/shell/contracts' {
  interface SdkRegistry {
    'site.config': Pick<SiteSDK, 'getConfig'>;
    'content.articles': Pick<ArticleSDK, 'list' | 'getBySlug' | 'getPreview' | 'search'>;
    'i18n.messages': Pick<I18nSDK, 'load' | 't' | 'clearCache' | 'refresh'>;
    'auth.client': AuthClient | ServerAuthClient;
  }
}

import { createModuleLoader, readPublicBootstrap, startShell } from '@mosaic-base/shell/bootstrap';
export async function createBrowserApplication(appId: string) {
  const bootstrap = await readPublicBootstrap(appId);
  return startShell({ bootstrap, loader: createModuleLoader({ target: 'browser' }),
    host: { apiBaseUrl: new URL('/api', location.origin).href } });
}
export async function readPublishedArticles(shell: Shell) {
  const articles = await shell.getSdk('content.articles');
  return articles.list({ language: 'en-US', page: 1, pageSize: 10 });
}

Consume the result

Render items as a list, show missing content for a null detail, and offer retry for thrown request failures. Render HTML only through a trusted sanitized content pipeline.