Storybook で UI ライブラリのカタログサイトを公開する

はじめに

以前から Vue の UI ライブラリを Storybook を使って作っていました。その UI ライブラリの Storybook を静的サイトにビルドしてホスティングしてみました。

• できたサイト: https://ui.takasqr.dev/
• GitHub: https://github.com/takasqr/vanilla-vue-ui

ビルド & デプロイ

下に手順を紹介します。

1. ビルド

Storybook をビルドします。

package.json

{
  "scripts": {
    "build-storybook": "storybook build",
  }
}

npm run build-storybook

2. デプロイ

ビルドが成功するとstorybook-staticにファイルが生成されます。これを好きなホスティングサービスにデプロイすれば完了です。

私は Firebase Hosting にデプロイします。

さいごに

割と簡単に自分の UI ライブラリのカタログサイトを公開することができました。今回は Vue で行いましたが、React でも同じことができると思います。