Exporting Storybook as a Static App

Edit this page

Storybook gives a great developer experience with its dev time features, like instant change updates via Webpack’s HMR.

But Storybook is also a tool you can use to showcase your components to others. Demos of React Native Web and React Dates are a good example for that.

For that, Storybook comes with a tool to export your storybook into a static web app. Then you can deploy it to GitHub pages or any static hosting service.

Simply add the following NPM script:

{
  "scripts": {
    "build-storybook": "build-storybook -c .storybook -o .out"
  }
}

Then run yarn build-storybook.

This will build the storybook configured in the Storybook directory into a static web app and place it inside the .out directory. Now you can deploy the content in the .out directory wherever you want.

To test it locally:

npx http-server .out

Deploying to GitHub Pages

Additionally, you can deploy Storybook directly into GitHub pages with our storybook-deployer tool.

Or, you can simply export your storybook into the docs directory and use it as the root for GitHub pages. Have a look at this guide for more information.