Storybookのインストール
laravel sailでのstorybookのインストール方法について解説します。
準備すること
ポート6006を docker-compose.yml
に追加
ports:
- '${APP_PORT:-80}:80'
- '${VITE_PORT:-5173}:${VITE_PORT:-5173}'
- '6006:6006' # 👈 これを追加
Step1 npm installする
sail npm install
Step2 storybookをインストール
sail npx storybook@latest init
Need to install the following packages:
storybook@9.0.15
Ok to proceed? (y) yinfo Installing dependencies…
infoadded 61 packages, and audited 268 packages in 2s
49 packages are looking for funding
runnpm fund
for details2 high severity vulnerabilities
Some issues need review, and may require choosing
a different dependency.Run
npm audit
for details.
info Dependencies installed
╭───────────────────────────────────────────────────────╮
│ │
│ Adding Storybook version 9.0.15 to your project.. │
│ │
╰───────────────────────────────────────────────────────╯
✔ New to Storybook? › No: Skip onboarding & don’t ask again
Attention: Storybook now collects completely anonymous telemetry regarding usage. This information is used to shape Storybook’s roadmap and prioritize features.
You can learn more, including how to opt-out if you’d not like to participate in this anonymous program, by visiting the following URL:
https://storybook.js.org/telemetry✔ What configuration should we install? › Minimal: Component dev only
• Detecting project type. ✓
• Adding Storybook support to your “React” app • Detected Vite project. Setting builder to Vite. ✓✅ Getting the correct version of 2 packages
added 108 packages, and audited 376 packages in 16s
81 packages are looking for funding
runnpm fund
for details2 high severity vulnerabilities
Some issues need review, and may require choosing
a different dependency.Run
npm audit
for details.
✅ Installing Storybook dependencies
. ✓
info Installing dependencies…
infoup to date, audited 376 packages in 855ms
81 packages are looking for funding
runnpm fund
for details2 high severity vulnerabilities
Some issues need review, and may require choosing
a different dependency.Run
npm audit
for details.
info Dependencies installed
╭──────────────────────────────────────────────────────────────────────────────╮
│ │
│ Storybook was successfully installed in your project! 🎉 │
│ Additional features: none │
│ │
│ To run Storybook manually, run npm run storybook. CTRL+C to stop. │
│ │
│ Wanna know more about Storybook? Check out https://storybook.js.org/ │
│ Having trouble or want to chat? Join us at https://discord.gg/storybook/ │
│ │
╰──────────────────────────────────────────────────────────────────────────────╯Running Storybook
storybook
storybook dev -p 6006 –quietstorybook v9.0.15
✔ New to Storybook? No: Skip onboarding & don’t ask againを選択
✔ What configuration should we install? Minimal: Component dev onlyを選択
Step3 Error: spawn xdg-open ENOENTの解消
このままサーバーを起動しようとすると、以下のエラーになる。
/var/www/html/node_modules/storybook/bin/index.cjs:23
throw error;
^Error: spawn xdg-open ENOENT
at ChildProcess._handle.onexit (node:internal/child_process:285:19)
at onErrorNT (node:internal/child_process:483:16)
at process.processTicksAndRejections (node:internal/process/task_queues:90:21)
Emitted ‘error’ event on ChildProcess instance at:
at ChildProcess._handle.onexit (node:internal/child_process:291:12)
at onErrorNT (node:internal/child_process:483:16)
at process.processTicksAndRejections (node:internal/process/task_queues:90:21) {
errno: -2,
code: ‘ENOENT’,
syscall: ‘spawn xdg-open’,
path: ‘xdg-open’,
spawnargs: [ ‘http://localhost:6006/’ ]
}
解消方法
環境変数で自動オープンを無効にする
Storybook の package.json
のスクリプトに --ci
オプションを追加
"scripts": {
"storybook": "storybook dev -p 6006 --ci"
}
おまけ
初期状態の Storybook では Tailwind CSS は反映されません。
理由は、Storybook は Vite
とは別でビルドされており、Tailwind の設定やCSSを手動で読み込ませる必要があるから
対処方法
Tailwind を import しているCSSファイル を Storybook に読み込ませます。
Storybook のグローバル設定ファイル .storybook/preview.js
に Tailwind のCSSをインポートします。
// .storybook/preview.js
import '../resources/css/app.css'; // パスはプロジェクトに合わせて調整
Storybook が Vite を使ってる場合、
Storybook 9.x 以降で vite
ビルダーが使われてるなら、Viteが Tailwind を読み込んでくれます。
.storybook/main.js
export default {
framework: {
name: '@storybook/react-vite',
options: {}
},
stories: ['../resources/js/**/*.stories.@(js|jsx|ts|tsx)'],
addons: ['@storybook/addon-essentials'],
}