Learning > presentation > Setup

Setting Up iTwin.js Presentation Library

In addition to setting up imodeljs-core there are some steps that API consumers must do before the library can be used.

Backend

Initialize the library:

import { RequestPriority } from "@bentley/presentation-common";
import { Presentation, PresentationManagerMode } from "@bentley/presentation-backend";
import rpcs from "../common/Rpcs";
// initialize presentation-backend
Presentation.initialize({
  rulesetDirectories: [path.join("assets", "presentation_rules")],
  localeDirectories: [path.join("assets", "locales")],
  mode: PresentationManagerMode.ReadWrite,
  taskAllocationsMap: {
    [RequestPriority.Max]: 1,
  },
  useMmap: true,
  updatesPollInterval: 20,
});

import { PresentationRpcInterface } from "@bentley/presentation-common";

const rpcs = [...otherRpcInterfaces, PresentationRpcInterface];


const electronHost: ElectronHostOptions = {
  webResourcesPath: path.join(__dirname, "..", "..", "..", "build"),
  rpcInterfaces,
  developmentServer: process.env.NODE_ENV === "development",
  ipcHandlers: [SampleIpcHandler],
};

await ElectronHost.startup({ electronHost });
await ElectronHost.openMainWindow();

Frontend

Initialize the library:

import { Presentation } from "@bentley/presentation-frontend";

await Presentation.initialize({
  // specify `clientId` so Presentation framework can share caches
  // between sessions for the same clients
  clientId: MyAppFrontend.getClientId(),

  // specify locale for localizing presentation data
  activeLocale: IModelApp.i18n.languageList()[0],

  // specify the preferred unit system
  activeUnitSystem: PresentationUnitSystem.Metric,
});

import { PresentationRpcInterface } from "@bentley/presentation-common";

const rpcs = [...otherRpcInterfaces, PresentationRpcInterface];

const iModelAppOpts: IModelAppOptions = {
  rpcInterfaces: rpcs,
};

await ElectronApp.startup({ iModelApp: iModelAppOpts });

Last Updated: 11 June, 2024