Widgetbook in a Monorepo

Widgetbook can be used in a monorepo setup. This guide will show you how to set up Widgetbook in a monorepo.

Guide

Single Widgetbook

The single Widgetbook approach is the simplest way to set up Widgetbook in a monorepo. You can create a single Widgetbook app that catalogs all the components from all the packages in the monorepo.

text

monorepo/
├── my_app/
├── packages/
│   └── my_design_system/
└── widgetbook/

yaml

widgetbook/pubspec.yaml

name: widgetbook_workspace

dependencies:
  widgetbook: ^4.0.0-beta.13
  my_design_system:
    path: ../packages/my_design_system
  my_app:
    path: ../my_app

dev_dependencies:
  build_runner:

Melos

If you run into dependency issues when using Melos you might need to change how you bootstrap the dependencies.

yaml

widgetbook/pubspec.yaml

name: widgetbook_workspace

dependencies:
  widgetbook: ^4.0.0-beta.13
  my_design_system: ^1.0.0
  my_app: ^1.0.0

dev_dependencies:
  build_runner:

yaml

melos.yaml

name: my_project

packages:
  - apps/**
  - packages/**
  - widgetbook/ // [!code ++]

Then run melos bootstrap to configure the dependencies.

Per-package Widgetbook

The per-package Widgetbook approach is more complex but allows for more flexibility. You can create multiple Widgetbook apps, each cataloging the components from a single package in the monorepo.

text

monorepo/
├── my_app/
│   └── widgetbook/
└── packages/
    └── my_design_system/
        └── widgetbook/

yaml

my_app/widgetbook/pubspec.yaml

name: my_app_widgetbook_workspace

dependencies:
  widgetbook: ^4.0.0-beta.13
  my_app:
    path: ../

dev_dependencies:
  build_runner:

yaml

packages/my_design_system/widgetbook/pubspec.yaml

name: my_design_system_widgetbook_workspace

dependencies:
  widgetbook: ^4.0.0-beta.13
  my_design_system:
    path: ../

dev_dependencies:
  build_runner:

Widgetbook in a Monorepo

Guide

Single Widgetbook

Melos

Per-package Widgetbook

On this page