StorybookをNetlifyへホスティングする

tl;dr

StorybookをNetlifyへホスティングする備忘録とRailsでハマったことのメモ

まずはApplicationを準備

npx create-react-app storybook-netlify --typescript
cd storybook-netlify
yarn add -D @storybook/cli
yarn sb init

Netlifyのビルド設定

PRを作成する

git checkout -b feature/button2
cp 1-Button.stories.js 2-Button.stories.js

// コピーして新たなストーリー名をつける
vi 2-Button.stories.js
git add 2-Button.stories.js
git commit -m 'add button2'
git push

CIでNetlifyへDeployされる

Button2が追加されていることが確認できる

今回使った環境

https://github.com/resqnet/StorybookNetlifySample

その他 Tips

Railsと共存する環境でハマったこと

NetlifyではRoot上のGemfileやPackage.jsonを自動でinstallするようです。

そのためStorybookのみをホスティングしたいが、Gemfileを読み込みRuby versionでの互換性や不要なGemのinstallなどが発生しました。

この問題を解決するためBase directoryを一時フォルダにしBuild commandでカレントを移動することで対応できます。

Base directory: ./app
Build command: cd ..; yarn install; yarn build-storybook
Publish directory: ./app//..publish

ちなみにNetlifyの環境変数など確認したのですが、該当の設定は見つからなかったので見落としてたら、教えてほしいです:pray: