Setting up Storybook for Gatsby

Storybook is a user interface development environment and playground for UI components. The tool enables developers to create components independently and showcase components interactively in an isolated development environment.
In this blog you will know about how to setup storybook for Gatsby.

To know more about storybook and its use , you can watch the below demo

Install storybook-cli

Initialize storybook

Initialize storybook in the root of your Gatsby Project

This command adds a set of boilerplate files for Storybook in your project. You also need to update storybook configuration for Gatsby project.


Add configurations in main.js

Now update the .storybook/main.js file with below configurations.

Adding config.js

Now create a file a called config.js inside of .storybook

Add Webpack.config.js

Install babel-preset-react-app

When you setup storybook , It automatically adds the following scripts to your package.json

Create your first story

Create a directory called stories inside of src/components and add create a new file called example.stories.js. Storybook will automatically pick up all files ending with ...stories.js

Hello from Storybook and Gatsby!

Example repo

👤 Full Stack Developer at rtCamp, Speaker, Blogger, YouTuber, Wordpress, React, Node, Laravel Developer