Adding Storybook to a Gatsby site

So, remember in my last blog post about Storybook I mentioned I couldn’t get Storybook to work with Gatsby?

The only two scenarios where I’d say I couldn’t use Storybook for one reason or another - Is Salesforce Lightning Component development, and interestingly - Gatsby. As I say writing a blog post on a Gatsby site… Maybe it’s because I use Windows or something 🤷‍♂️…

Well… Times have changed, Storybook 6 has been released, and I’ve managed to get it working with Gatsby! So, here’s how I did it…

Installation

Standard really - just running the npx command:

npx init sb

Yes - they’ve changed it - now it’s even more easier to remember!

Webpack Configuration

Because Gatsby likes to run… Using Gatsby - You need to tell Storybook to run a bit like Gatsby as well.

In fact - there is quite a straightforward code snippet available as part of Gatsby documentation - including that as part of .storybook/main.js will seem to get it to work.

webpackFinal: async config => {
  // Transpile Gatsby module because Gatsby includes un-transpiled ES6 code.
  config.module.rules[0].exclude = [/node_modules\/(?!(gatsby)\/)/]

  // use installed babel-loader which is v8.0-beta (which is meant to work with @babel/core@7)
  config.module.rules[0].use[0].loader = require.resolve("babel-loader")

  // use @babel/preset-react for JSX and env (instead of staged presets)
  config.module.rules[0].use[0].options.presets = [
    require.resolve("@babel/preset-react"),
    require.resolve("@babel/preset-env"),
  ]

  config.module.rules[0].use[0].options.plugins = [
    // use @babel/plugin-proposal-class-properties for class arrow functions
    require.resolve("@babel/plugin-proposal-class-properties"),
    // use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook
    require.resolve("babel-plugin-remove-graphql-queries"),
  ]

  // Prefer Gatsby ES6 entrypoint (module) over commonjs (main) entrypoint
  config.resolve.mainFields = ["browser", "module", "main"];

  return config;
},

Now - run npm run storybook - Storybook should open and work… Kinda.

This may be patched in the future, but MDX files don’t seem to work. And the default Storybook files include an introduction MDX file. For me, deleting it resulting in Storybook working… Which somewhat makes sense with the file not causing any issues…

For the basics - this should be it, Storybook should be working!

However, I’m incredibly more than likely going to come back to this post in the future when I need to get Storybook working again, and there are a few other hiccups you need to deal with. So what I’ve decided to do is compose a list of “Quick fixes” on how to resolve issues that I’ve come across in the past week.

Getting Links to work

The Gatsby Link component won’t work because it’s missing a global parameter called __BASE_PATH__.

The simple fix to solve this is by setting it within .storybook/preview.js.

global.__BASE_PATH__ = '';

Read more: https://github.com/gatsbyjs/gatsby/issues/10668#issuecomment-639014099

Adding SCSS support

First, we need to include the Webpack configuration so that Storybook can read SCSS files.

Above the return inside of .storybook/preview.js, add:

config.module.rules.push({
  test: /\.scss$/,
  use: ['style-loader', 'css-loader', 'sass-loader'],
  include: path.resolve(__dirname, '../'),
});

You also need to include path by adding the require to the top of the file.

const path = require('path');

To include global styles, add an import to the .storybook/preview.js

import '../src/index.scss'