DEV Community

Cover image for Creating a Storybook Lerna package
Phil Ramirez
Phil Ramirez

Posted on

Creating a Storybook Lerna package


I'm writing this assuming you have knowledge and familiarity with setting up Lerna. Also, the scenario here is assuming you have a bunch of reusable components in their own dedicated package. Let me know if you have questions on steps that I cover at a high level.

Setup checklist

Repo is setup

mkdir superDuperRepo
git init
git add .

Lerna as a dev dependency

yarn init
yarn add lerna --dev
lerna init


// superDuperRepo/lerna.json

  "packages": [
  "version": "independent",
  "npmClient": "yarn",
  "useWorkspaces": true

Enter fullscreen mode Exit fullscreen mode


// superDuperRepo/package.json

  "name": "superDuperRepo",
  "private": true,
  "workspaces": [
Enter fullscreen mode Exit fullscreen mode

Drop reusable components in their own package


Add storybook as a package

lerna create storybook
cd packages/storybook
npx sb init // delete boilerplate stories
yarn add react
yarn add react-dom

Yarn workspaces

yarn config set workspaces-experimental true

Add reusable components package to the storybook package

lerna add landing --scope=storybook --dev

Resolving reusable components package files

// superDuperRepo/packages/storybook/.storybook/webpack.config.js

const path = require("path")

module.exports = ({ config }) => {
  // a bunch of other rules here

  config.resolve.modules = [
    path.resolve(__dirname, "..", "..", "reusableComponents", "src"),

  // Alternately, for an alias:
  config.resolve.alias: {
    "@styles": path.resolve(__dirname, "..", "src", "styles")

  return config
Enter fullscreen mode Exit fullscreen mode

Creating the story

// superDuperRepo/packages/storybook/stories/Button.stories.jsx

import React from 'react'
import Button from 'reusableComponents/src/Button'

export default {
  component: Button,
  title: 'Reusable Components/Button',

const Template = args => <Button {...args} />

export const Default = Template.bind({})

Default.args = {
  title: 'Submit'

Enter fullscreen mode Exit fullscreen mode

Run Storybook

yarn storybook


At this point you should be able to run storybook and view the single story (especially if you deleted the boilerplate stories). It'd be lovely if there was an automated way of creating stories for all the components that I have. Still trying to figure that one out.

Helpful troubleshooting notes

lerna list
lerna bootstrap
lerna link
lerna changed
yarn workspaces info

Top comments (2)

tylersustare profile image
Tyler Sustare

The most recent versions of storybook didn't create a .storybook/webpack.config.js when running npx sb init

franciscomoretti profile image
Francisco Moretti

I had to run yarn lerna create storybook instead of lerna create storybook