# Add Storybook to Gatsby project

[Storybook](https://storybook.js.org/) is an open source tool for developing UI components in isolation for React, Vue, and Angular. It is an organized and efficient way to build stunning UIs.

This recipe:

---

Installs babel plugins and presets as well as the Storybook React NPM packages and addons.

<NPMPackage name="babel-loader" dependencyType="development" />
<NPMPackage name="@babel/preset-react" dependencyType="development" />
<NPMPackage name="@babel/preset-env" dependencyType="development" />
<NPMPackage name="@babel/plugin-proposal-class-properties" dependencyType="development" />
<NPMPackage name="babel-plugin-remove-graphql-queries" dependencyType="development" />
<NPMPackage name="babel-plugin-react-docgen" dependencyType="development" />

<NPMPackage name="@storybook/react" dependencyType="development" />
<NPMPackage name="@storybook/addon-actions" dependencyType="development" />
<NPMPackage name="@storybook/addon-docs" dependencyType="development" />

---

Creates JavaScript Storybook webpack config (`main.js`).

<File
  path="./.storybook/main.js"
  content="https://raw.githubusercontent.com/PaulieScanlon/gatsby-recipe-storybook-js/master/recipe/main.js"
/>

---

Configures Storybook / Gatsby Link settings (`preview.js`).

<File
  path="./.storybook/preview.js"
  content="https://raw.githubusercontent.com/PaulieScanlon/gatsby-recipe-storybook-js/master/recipe/preview.js"
/>

---

Creates example JavaScript Link story.

<File
  path="./src/components/Link.stories.js"
  content="https://raw.githubusercontent.com/PaulieScanlon/gatsby-recipe-storybook-js/master/recipe/Link.stories.js"
/>

---

Adds Storybook npm scripts.

<NPMScript
  name="storybook"
  command="NODE_ENV=production start-storybook -s ./public -p 6006 --ci"
/>
<NPMScript
  name="build-storybook"
  command="NODE_ENV=production build-storybook"
/>

---

After installing this recipe and before you run Storybook, make sure you run `gatsby develop` or `gatsby build`. This ensures that Gatsby's GraphQL data is available in Storybook.