Exporting Storybook as a Static App

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:

  1. {
  2. "scripts": {
  3.   "build-storybook": "build-storybook -c .storybook -o .out"
  4. }
  5. }

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:

  1. 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.