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.

monorepo/
├── my_app/
├── packages/
│   └── my_design_system/
└── widgetbook/
widgetbook/pubspec.yaml
name: widgetbook_workspace

dependencies:
  widgetbook_annotation: ^3.2.0
  widgetbook: ^3.10.1
  my_design_system:
    path: ../packages/my_design_system
  my_app:
    path: ../my_app

dev_dependencies:
  build_runner:
  widgetbook_generator: ^3.9.1

Melos

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

widgetbook/pubspec.yaml
name: widgetbook_workspace

dependencies:
  widgetbook_annotation: ^3.2.0
  widgetbook: ^3.10.1
  my_design_system: ^1.0.0
  my_app: ^1.0.0

dev_dependencies:
  build_runner:
  widgetbook_generator: ^3.9.1
melos.yaml
name: my_project

packages:
  - apps/**
  - packages/**
  - widgetbook/

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.

monorepo/
├── my_app/
│   └── widgetbook/
└── packages/
    └── my_design_system/
        └── widgetbook/
my_app/widgetbook/pubspec.yaml
name: my_app_widgetbook_workspace

dependencies:
  widgetbook_annotation: ^3.2.0
  widgetbook: ^3.10.1
  my_app:
    path: ../

dev_dependencies:
  build_runner:
  widgetbook_generator: ^3.9.1
packages/my_design_system/widgetbook/pubspec.yaml
name: my_design_system_widgetbook_workspace

dependencies:
  widgetbook_annotation: ^3.2.0
  widgetbook: ^3.10.1
  my_design_system:
    path: ../

dev_dependencies:
  build_runner:
  widgetbook_generator: ^3.9.1