Skip to main content

         This documentation site is for previous versions. Visit our new documentation site for current releases.      

Life cycle of a Cosmos DX component

Updated on May 27, 2022

Learn to create and use a custom Cosmos digital experience (DX) component in your application. Understanding all steps of the process helps you successfully build and deploy custom components to adapt and extend the UI of your application.

The three stages in the life cycle of a Cosmos DX component are:

  • Create the component locally.
  • Publish the component.
  • Deploy the component.
Life cycle of a Cosmos DX component
Representation of the three stages in a life cycle of a Cosmos DX component

Create the component locally

Build a component locally by using web development tools, such as npm, storybook, and writing JavaScript inside a code editor. Create the code of the component using the Cosmos React component library and ConstellationJS API library.

Import these libraries into your application to use the styling and theming of the Cosmos React component library and the data from the ConstellationJS API library for creating your component.

After you test the component locally, you can publish it to the Pega developer platform.

Publish the component

Publish the created component to a ruleset or version in the Pega developer platform.

A Rule-UI-Component contains the minified code and the configuration metadata of the component. The configuration metadata that is stored in a config.json file is used to render the parameters of the component such as a constant, property, or picklist.

Deploy the component

Use the published component in your application by using App Studio.

Import or export the component as a RAP file by using the Dev Ops manager to a Pega QA or production platform.

The following video illustrates the process of creating and publishing custom Cosmos DX components:

For detailed information on each stage in the life cycle of a Cosmos DX component, see the following topics:

  • Initializing a project

    Set up an environment to work with Cosmos digital experience (DX) components.

  • Creating Cosmos DX components

    Create unique components to extend your UI features.

  • Authenticating Pega Infinity Server user access

    To publish, list, or delete a Cosmos digital experience (DX) component, you require authentication to access the resources on the Pega Infinity Server.

  • Viewing existing Cosmos DX components in Storybook

    View how the existing Cosmos digital experience (DX) components are displayed to customers by opening the components in Storybook. Open the project and then start Storybook in development mode so that you can view each component separately.

  • Publishing Cosmos DX components

    Publish your Cosmos digital experience (DX) components to the Pega Infinity Server so that the component is discoverable as you author in the component palette. As a result, you can use the components while building the UI of your application.

  • Listing Cosmos DX components

    View the available components on the local machine or the Pega Infinity Server. You can list the components to see what is already available to the authenticated application or to verify if the publish or delete process completed successfully.

  • Deleting Cosmos DX components

    Free up space and make the navigation easier by deleting unused or obsolete custom components either locally or on the Pega Infinity Server. You can delete both published and unpublished components.

Have a question? Get answers now.

Visit the Support Center to ask questions, engage in discussions, share ideas, and help others.

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best. is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us