Configuring Pega Platform for React UI

Explore the new run-time framework by configuring React UI. To make your development environment compatible with React UI, configure system settings in Pega Platform.

To use React UI in App Studio for building an application, update the component palettes and property panes with data from the React UI service. The data is exported automatically through the REST API when you start the Docker container, but you must enable the REST API, and set up a React UI service URL.

When you select Support React-based UI, Pega Platform generates a new cookie, Pega-AAT, to speed up stateless REST calls.

The dynamic system settings are not application specific. All nodes connected to the database with dynamic system settings inherit these settings.

Two dynamic system settings apply if you select Support React-based UI:

  • constellation/cacheReadOnlyDataPages – All read-only data pages are cached by default.
  • constellation/readOnlyDataPagesCacheSize – Enables modifying the cache size of read-only data pages.

One dynamic system setting applies if you do not select Support React-based UI:

  • constellation/cacheReadOnlyDataPages – All read-only data pages disable the custom cache size.
Before you begin: For on-premises systems, install the Docker container with React UI. For more information, see Installing the Docker container with React UI. Pega Cloud Services and client-managed cloud environments have the React UI framework installed by default.
  • Enable the REST API:
    1. In the navigation pane of Dev Studio, click Records.
    2. If your system does not use SSL, disable TLS/SSL services:
      1. Expand the Integration-Resources category, and then click Service Package.
      2. Open the uiservice service package.
      3. On the Context tab, clear the Require TLS/SSL for Rest services in this package check box, and then click Save.
  • Set up the React UI service URL in the application shell:
    1. Expand the SysAdmin category, and then click Dynamic System Settings.
    2. Open the pega-uiengine!constellationsvcurl system setting.
    3. On the Settings tab, in the Value field, enter the React UI service URL:
      • For systems with load balancers, enter /prweb/constellation, and then click Save.
      • For simple systems, enter http://<localhost>:<port>/prweb/constellation, and then click Save.
        where:
        • <localhost> is the URL address of your host.
        • <port> is the port number used for the React UI service.
    4. Click Save.
    What to do next: Turn on the React UI testing environment. For more information, see Testing React UI for an application