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.
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.0
my_design_system:
path: ../packages/my_design_system
my_app:
path: ../my_app
dev_dependencies:
build_runner:
widgetbook_generator: ^3.9.0
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.0
my_design_system: ^1.0.0
my_app: ^1.0.0
dev_dependencies:
build_runner:
widgetbook_generator: ^3.9.0
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.0
my_app:
path: ../
dev_dependencies:
build_runner:
widgetbook_generator: ^3.9.0
packages/my_design_system/widgetbook/pubspec.yaml
name: my_design_system_widgetbook_workspace
dependencies:
widgetbook_annotation: ^3.2.0
widgetbook: ^3.10.0
my_design_system:
path: ../
dev_dependencies:
build_runner:
widgetbook_generator: ^3.9.0