Cloudpack

Appearance

Storybook Integration ​

Current status: Alpha/Experimental

Cloudpack provides integration with Storybook v7 + React for component development and testing.

You can see an example of this integration in the storybook-mock app.

Instructions ​

  1. Install dependencies. You can use either npm or yarn, but I will be using yarn in this example.

    bash
    yarn add -D @ms-cloudpack/storybook-react @ms-cloudpack/cli

  2. Add the following script to package.json:

    json
    "cloudpack:init": "cloudpack init"

    and I am assuming you already have a script that looks something like this:

    json
    "storybook": "storybook dev -p 6006"

  3. Run yarn cloudpack:init from the root of your repo and hopefully there are no errors.

  4. Update the framework field of your .storybook/main.ts (or .js):

    js
    framework: {
  name: '@ms-cloudpack/storybook-react',
  options: {},
},

    The framework @ms-cloudpack/storybook-react internally uses the custom Cloudpack builder @ms-cloudpack/storybook-builder and the renderer @storybook/react.

  5. Add a cloudpack.config.json file to the root of your app, following the example of Cloudpack's storybook-mock/cloudpack.config.json. Be sure to change the first package setting match for the name of the app you are using and include the storybook plugins in your app.

  6. You can then run yarn storybook and it should work as expected.

Notable limitations ​

See also: parent GitHub issue for improving Storybook support.

MIT © 2025 Microsoft Corporation