App

A singleton pattern used to bootstrap and coordinate functionality in a Fyord app

Instance

static Instance(environment?: string, productionEnvironmentVariables = new Map<string, string>(), developmentEnvironmentVariables = new Map<string, string>())
Returns the singleton App instance. Optionally pass environment variables during bootstrap to make them available throughout the app's life cycle.
/* index.ts */
const app = App.Instance(process.env.NODE_ENV || Environments.Production);

Destroy

static Destroy(): void
Destroys the singleton App instance, allowing it to be re-instantiated.

Main

get Main(): HTMLElement
Returns the application's single rendered <main> element. The main element is where pages are rendered on route match.

Environment Variables

EnvironmentVariables = new Map<string, string>()
Fyord provides a pattern for supporting development and production environment variables. You should NOT use this pattern for storing secrets or other sensitive information such as api keys or credentials.
/* setting environment variables - index.ts */

(async () => {
const devEnvironmentVariables = newMap<string, string>([
    ['backendServer', 'http://dev.com']
  ]);
const prodEnvironmentVariables = newMap<string, string>([
    ['backendServer', 'http://prod.com']
  ]);

const app = App.Instance(
    process.env.NODE_ENV || Environments.Production,
    prodEnvironmentVariables,
    devEnvironmentVariables
  );

await app.Start(defaultLayout);
})();

/* using environment variables within a component */
this.App.EnvironmentVariables.get('backendServer');

Logger

Logger.Instance

Returns the app's single logger instance. In development new entries are logged as warnings to the console. Learn more about this logger at tsbase Logger docs.

You may access the logger and log entries as shown below. Exceptions thrown in safe execution tsbase Command/Query pattern implementations are also logged automatically.

/* Subscribe to entries */
app.Logger.EntryLogged.Subscribe((e) => {
console.log(e.Message);
});

/* Info */
const entry = new LogEntry('test');
app.Logger.Log(entry);

/* Warn */
const entry = new LogEntry('test', LogLevel.Warn);
app.Logger.Log(entry);

/* Error */
const error = newError('something bad happened');
const entry = new LogEntry('test', LogLevel.Error, error);
app.Logger.Log(entry);

/* Access entries */
const entries = app.Logger.LogEntries;

Store

Store = new EventStore<any>()

Manages global app state. Can be accessed directly to get and set values, subscribe to changes, inspect the event store's ledger, and even undo/redo changes.

For more details, visit the tsbase EventStore docs.

Router

Router: IRouter = Router.Instance()
Reference to the app's single router instance. Learn more about the router here.

InitializeStore

InitializeStore<T>(state: T): void
Optionally set the initial data within the global app store.

Start

Start(initialLayout: () => Promise<Jsx>): Promise<void>
Set the initial layout and begin rendering / routing the Fyord application.
/* index.ts */
await app.Start(defaultLayout);