Deploy Storybook

Deploy Storybook

Setelah Storybook siap, kita bisa men-deploy-nya agar bisa diakses oleh seluruh tim — designer, developer, dan QA — tanpa perlu menjalankannya secara lokal.

Build Storybook untuk Production

npm run build-storybook
# Output: folder storybook-static/

Deploy ke Chromatic (Rekomendasi)

npm install --save-dev chromatic
npx chromatic --project-token=<token>

Chromatic menyediakan hosting gratis untuk Storybook + visual testing otomatis terintegrasi.

Deploy ke Vercel

# vercel.json
{
  "buildCommand": "npm run build-storybook",
  "outputDirectory": "storybook-static"
}

Deploy ke GitHub Pages

# .github/workflows/storybook.yml
name: Deploy Storybook
on:
  push:
    branches: [main]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - run: npm ci
      - run: npm run build-storybook
      - uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./storybook-static

Best Practices

• Deploy Storybook setiap kali ada PR baru agar reviewer bisa melihat komponen secara live
• Gunakan Chromatic untuk visual regression testing otomatis di CI/CD
• Share link Storybook ke designer untuk feedback langsung