Storybook is an amazing tool for developing components in isolation out side of the constraints for a more standard application workflow. Because of this we wanted to provide an extension to PixelOven that would provide support for storybook.


Note the current version of this extension only supports react as that is the primary use case for PixelOven. Though our ultimate goal is to provide a more general development platform we want to first nail this subset before conquering others.

To install this addon simply run the following with NPM

npm install --save-dev @pixeloven/cli-addon-storybook

or yarn

yarn add --dev @pixeloven/cli-addon-storybook

API Reference

storyCLI entry point for interfacing with Storybook.

Story wraps the standalone implementation of storybook while also abstracting away the configuration to work closely with the rest of PixelOven's CLI. This addon shares some dependencies with our webpack addon to maintain a similar level of support for Typescript, SCSS and other important features.

<task>YesN/ADetermines how to build storybook.

Based on the task provided Storybook will be built in one of two modes.

buildBuilds Storybook for static file serving.
startRuns Storybook in watch mode for local development.


--output-dir./storiesOutput directory for static files.
--port9001Port for hosting storybook in watch mode.
--quietfalseWhether storybook should log to console or not.


To run storybook in development/watch mode on a specific port you.

yarn run pixeloven story start --port 9080

Or build storybook for hosting as a static site.

yarn run pixeloven build start --output-dir ./site

Of course you can also just use the default values which are recommended.

Last updated on by Brian Gebel