View how the existing standalone Constellation DX components are displayed at run time by opening the components in Storybook. Open the project and then start Storybook in development mode so that you can view each standalone component separately.

NOTE: If the standalone components have calls to Constellation orchestration layer APIs, disable the calls or create an API mock to view these components in Storybook.

  1. Open your preferred terminal tool.
  2. Enter cd <name of the project>.
  3. Enter npm run startStorybook.
    NOTE: To test the different behaviors of your component, go to the index.tsx file and change the default values in your <component name>.defaultProps while the Storybook is running.

Result:

You can now view each existing standalone Constellation DX component in Storybook. To close Storybook, use ctrl + c and then close the browser tab.

For more information on Storybook, see https://storybook.js.org/