Chromaticをmonorepoで使う方法

Nov 18, 2023

kaori

---

フロントエンドのコンポーネントを作成するときに Storybook+Chromatic を使っています。無料プラン内でも便利です！

今回は、monorepo にした場合、ワークスペースごとに Chromatic を設定する方法です。

UI コンポーネントが monorepo のワークスペースに入っている場合など便利です！

Chromatic を使っている人へむけての記事なので、設定方法等は記述していません。 数分で設定できる＋ある程度まで無料なので Storybook を使っているなら、使ったほうがいいなと思います。 Chromatic 初期設定はアカウントを作ると最初のチュートリアルがでてくるので、それ通りにやればできます。はず。

各ワークスペースで、Storybook が Build できる

build-storybookが動かないと Chromatic は使えません。まずは Storybook を各ワークスペースで動かします。

当たり前かもしれませんが、ちゃんとワークスペースごとに設定を持ちましょう。tailwind.config.ts とか。はまりました…。

Chromatic の設定方法（monorepo）

Chromatic に Monorepo の設定方法があるので、これ通りにやるだけです。

1. 対象のリポジトリを選択します。何度でも同じリポジトリを選択できます。

2. プロジェクトトークンが発行されます。それを使って Storybook をデプロイします。

デプロイしたい Storybook のbuild-storybookコマンドがある場所で実行してください。

それだけ！めちゃくちゃ簡単。

Github Actions も公式の Github Actions サンプルで動きました。わたしは npm workspaces を使って Monorepo 化しています。