今回は少し趣向を変えて、Storybook のプロジェクトを Vercel に展開をして参照できるようにしてみたいと思います。
ちなみに手順は以下のページで公開されていますが、package.json の記述は古いようで正しく動きませんでした。
今回は以下の手順で Vercel に展開することができました。
.storybook\main.ts を確認する
プロジェクトを作成したときに、.storybook\main.ts のファイルが作成されており、staticDirs の値が \\ を利用して設定されていることがあります。以下のように書き換えることで、Vercel の展開でのはまりポイントは回避できます。
JSON
staticDirs: ["../public"],新しいプロジェクトを作成する
前回の記事で、GitHub にコードを展開しているため、リポジトリと連携してプロジェクトを作成します。展開の手順としては、Framework Preset で Storybook を選択するだけです。
Deploy のボタンをクリックすると、Build が進んでサイトの展開が始まります。しばらくすると、以下のようにサイトが立ち上がります。
まとめ
このブログの記事を書いた段階では、以下のコンポーネントが参照できるようになっています。
- Image
- LinkList
- Promo
- RichText
上記のうち、Image コンポーネントに関しては sitecoreContext.pageState とページの編集モードとプレビューモードで表示を変える部分があります。この部分はページの編集モードのところのコードを削除しています。
この段階のコードは以下のブランチで参照することができます。
サイトに関しては随時更新していきますが、以下の URL で参照できます。