blog-starter-typescript で作ったプロジェクトにstorybookを導入する
概要
前回 の続き
blog-starter-typescript で作ったプロジェクトのUIをいじっていきたいが、その前に開発に必要なstorybookを導入する
作業ログ
storybook の導入
基本は Get started with Storybook and Next.js を基に設定する
storybook を導入する
npx sb init --builder webpack5
.storybook/main.js
に reactDocgen: false
を追加しておく
追加しないとCannot find module 'webpack/lib/util/makeSerializable.js
のエラーが発生する
module.exports = {
"typescript" : { reactDocgen: false },
// ...
}
静的ファイルを解決するために public を staticDirs に追加しておく
module.exports = {
// ...
"staticDirs": ["../public"],
}
tailwindcss用の設定を追加する
tailwindcssのCSSを読み込むために .storybook/preview.js
に以下のCSSを追加しておく
import 'src/styles/index.css'
storybookコマンドは以下のように修正しておくとCSSが即時反映されて便利
"storybook": "TAILWIND_MODE=watch start-storybook -p 6006",
storybook-addon-next を導入する
next.config.js
を空で作っておく
touch next.config.js
中身はこれでOK
module.exports = {}
storybook-addon-next をinstallする
yarn add --dev storybook-addon-next
.storybook/main.js
の addons に追加する
module.exports = {
"addons": [
// ...
"storybook-addon-next"
],
// ...
}
ここまできたら yarn storybook
でstorybookが起動できる
github-actions で storybook を自動でアップロードする
.github/workflows/storybook.yml
ファイルを作り以下の内容を書く
name: github pages
on:
push:
branches:
- main
jobs:
build-deploy:
runs-on: ubuntu-latest
steps:
- name: checkout
uses: actions/checkout@v2
- name: install deps
run: yarn
- name: run build storybook
run: yarn build-storybook -o ./dist/storybook
- name: Deploy
uses: peaceiris/actions-gh-pages@v3
with:
personal_token: ${{ secrets.ACTIONS_DEPLOY_KEY }}
publish_dir: ./dist
ACTIONS_DEPLOY_KEY
はリポジトリの settings/secrets/actions
に Repository secrets として登録しておく、中身は repo 系全てに権限をつけた Personal access token