Reactのライブラリを開発しているときに立ちはだかるのが、実際に開発中のものをインストールして動かしたりしないと確認できないということです。
ここでStorybookという、Previewにもってこいのライブラリがあったので、導入していきたいと思います。
あと、このStorybookはGithubPagesに公開することで、Repositoryから簡単にテストしてもらうことができるようになります。
Storybookの導入
とりあえず、プロジェクトにStorybookを導入します。
$ npx storybook init Need to install the following packages: storybook Ok to proceed? (y) y
npm8を使ってるプロジェクトだと、以下のような警告が出てくる場合があります。
We've detected you are running npm 8.11.0 which has peer dependency semantics which Storybook is incompatible with. In order to work with Storybook's package structure, you'll need to run `npm` with the `--legacy-peer-deps=true` flag. We can generate an `.npmrc` which will do that automatically. More info: https://github.com/storybookjs/storybook/issues/18298 Do you want to run the 'npm7' migration on your project?
どうもnpm8だと、依存関係の問題で正常に動作しないらしく、npm7のマイグレーションを行うことで使えるようになるようです。
特に問題がない人は、マイグレーションを実行します。そうすると .npmrc というファイルが作成されます。
.npmrcとはなんぞや
npmを実行するときの設定値を書いておくためのファイルです。
.eslintrc.js, prettierrc.js とかと同じ感じですね。
インストールが終わると以下のようになるので npm run storybook を実行します。
✔ Do you want to run the 'npm7' migration on your project? … yes ✅ ran npm7 migration ✅ migration check successfully ran To run your Storybook, type: npm run storybook For more information visit: https://storybook.js.org
storybookを起動すると、ブラウザが自動的に立ち上がって色々と作業ができるようになります。
ただし、自分で作っているライブラリをstorybookで利用できるようにするためには、いろいろとファイルを作ったりする必要があるので、そこの作業Noteについては、こちらを参考にしてください。
GitHubActionsの設定
GitHubActionsはプロジェクトの .github/workflows 配下に配置します。（なければ作成してください）
ひとまず storybook-release.yml というファイルで作成します。
workflowを実行するタイミングですが、mainブランチへマージされたタイミングで行うようにします。
name: Release Storybook to GitHubPages
on:
push:
branches:
- main
env:
cache-version: v1
jobs:
release:
name: Project Build
runs-on: ubuntu-latest
steps:
- name: Check out code
uses: actions/checkout@v3
- name: Setup Node.js 16.x
uses: actions/setup-node@v3
with:
node-version: 16.x
- name: Install Node Dependencies
run: npm install
- name: Build package
run: npm run build
- name: Build storybook
run: npm run build-storybook
- name: Deploy
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./public/storybook
package.jsonの修正
上の設定に伴って package.json の script に以下を追加します。
"build-storybook": "build-storybook -o ./public/storybook"
これらをコミットして、mainブランチにpush/mergeすると、workflowが走り始めます。初回実行時だとGitHubPagesへのデプロイが失敗します。
（デプロイ完了のログがない...）
これはActionの正しい動き？らしく、どのブランチをGitHubPagesに当てるかを設定してないからだそうです。
初回実行時に gh-pages というブランチが作成されるようなので、リポジトリのSettings → Pagesから、gh-pagesブランチをGitHubPagesとして認識するように設定します。
設定後、再度workflowを実行（手動でOK）すると、正しくデプロイされている事が分かります。
これで、正常にpagesがデプロイされているので、アクセスしてstorybookが表示されれば成功です。
