Storybookのインストール

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) y

info Installing dependencies…
info

added 61 packages, and audited 268 packages in 2s

49 packages are looking for funding
run npm fund for details

2 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
run npm fund for details

2 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…
info

up to date, audited 376 packages in 855ms

81 packages are looking for funding
run npm fund for details

2 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 –quiet

storybook 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'],
}