bantam.hostbantam.host
Back to all frameworks
CLI Guide

Deploy Storybook with Bantam CLI

Deploy your component library and design system documentation

Install Bantam CLI:

npm install -g @bantamhq/cli

View on NPM: @bantamhq/cli

Quick start:

# Build your Storybook app
npm run build-storybook

# Deploy it
bantam deploy ./storybook-static

Quick Start

1

Build Storybook

Creates a static version of your component library

npm run build-storybook
Outputs to ./storybook-static by default
2

Preview locally (optional)

Test your built Storybook before deploying

npx http-server ./storybook-static
3

Deploy with Bantam

Your component library is now live!

bantam deploy ./storybook-static
Share with your team instantly

Framework Details

Build Configuration

Customize your Storybook build output:

package.json - Custom build directory:

{
  "scripts": {
    "build-storybook": "storybook build -o build",
    // With additional flags
    "build-storybook:ci": "storybook build --quiet --disable-telemetry"
  }
}

.storybook/main.js - Build optimization:

module.exports = {
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
  staticDirs: ['../public'],
  framework: {
    name: '@storybook/react-vite',
    options: {},
  },
  features: {
    storyStoreV7: true, // Faster builds
  },
  // Optimize production builds
  build: {
    test: {
      disableBlocks: true, // Skip docs blocks in tests
    },
  },
}

Custom Domain & Branding

Configure Storybook for your brand:

.storybook/manager.js - Custom theme:

import { addons } from '@storybook/addons';
import { create } from '@storybook/theming';

const theme = create({
  base: 'light',
  brandTitle: 'My Component Library',
  brandUrl: 'https://components.mysite.com',
  brandImage: '/logo.png',
  brandTarget: '_self',
  
  // Colors
  colorPrimary: '#1ea7fd',
  colorSecondary: '#585c6d',
  
  // UI
  appBg: '#f6f9fc',
  appContentBg: '#ffffff',
  appBorderColor: '#e6e6e6',
  appBorderRadius: 4,
});

addons.setConfig({
  theme,
});
Deploy with a custom domain using bantam deploy ./storybook-static -d components.mysite.com

Composition & Monorepos

Deploy multiple Storybooks from a monorepo:

Monorepo structure:

packages/
├── ui-library/
│   ├── .storybook/
│   └── package.json
├── design-tokens/
│   ├── .storybook/
│   └── package.json
└── icons/
    ├── .storybook/
    └── package.json

Deploy each package:

# Build all Storybooks
npm run build-storybook --workspaces

# Deploy each one
bantam deploy packages/ui-library/storybook-static -s ui-components
bantam deploy packages/design-tokens/storybook-static -s design-tokens
bantam deploy packages/icons/storybook-static -s icons

# Or compose into one
# See Storybook composition docs

Static Assets & Fonts

Handle static assets in Storybook:

.storybook/main.js - Static directories:

module.exports = {
  staticDirs: [
    '../public',
    '../src/assets',
    { from: '../fonts', to: '/fonts' }
  ],
}

.storybook/preview-head.html - Custom fonts:

<!-- Load custom fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">

<!-- Or local fonts -->
<style>
  @font-face {
    font-family: 'CustomFont';
    src: url('/fonts/custom.woff2') format('woff2');
  }
</style>

Advanced Usage

Custom Domain

Deploy directly to your own domain

bantam deploy ./dist --domain myapp.com

Permanent Deployment

Keep your site online forever (requires login)

bantam deploy ./dist --permanent

Custom Expiry

Set how long your deployment stays online

bantam deploy ./dist --expiry-days 7

Custom Subdomain

Choose your own subdomain on bantam.site

bantam deploy ./dist --subdomain my-project

CI/CD Integration

Add Bantam to your continuous deployment pipeline:

# GitHub Actions example
- name: Deploy to Bantam
  run: |
    npm install -g @bantamhq/cli
    bantam login --token ${{ secrets.BANTAM_TOKEN }}
    bantam deploy ./dist --domain myapp.com --permanent
Troubleshooting

Common Issues & Solutions

Quick fixes for deployment challenges

01.Build fails with memory errors

Large component libraries may need more memory:

# Increase Node memory
NODE_OPTIONS="--max-old-space-size=4096" npm run build-storybook

# In package.json
{
  "scripts": {
    "build-storybook": "NODE_OPTIONS='--max-old-space-size=4096' storybook build"
  }
}

02.Assets not loading after deployment

Check your asset paths and static directories:

// .storybook/main.js
module.exports = {
  staticDirs: ['../public'],
}

// For subdirectory deployment
// .storybook/manager.js
import { addons } from '@storybook/addons';

addons.setConfig({
  // Set if deploying to subdirectory
  managerUrl: '/storybook/',
});

03.How to password protect Storybook?

Bantam doesn't provide auth, but you can add basic protection:

// Simple obfuscation (not secure!)
// .storybook/manager-head.html
<script>
  const pwd = prompt('Enter password');
  if (pwd !== 'mysecret') {
    document.body.innerHTML = 'Access Denied';
  }
</script>

// Better: Use Bantam Pro features or deploy behind auth proxy
For sensitive component libraries, consider private hosting solutions.

04.Storybook loads slowly

Optimize your Storybook build for performance:

// .storybook/main.js
module.exports = {
  features: {
    storyStoreV7: true, // Lazy load stories
    buildStoriesJson: true, // Generate index
  },
  // Exclude stories in production
  stories: process.env.NODE_ENV === 'production' 
    ? ['../src/**/*.stories.@(js|jsx|ts|tsx)']
    : ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
  // Disable addons in production
  addons: process.env.NODE_ENV === 'production'
    ? ['@storybook/addon-essentials']
    : [/* all addons */],
}

05.How to deploy Storybook with docs?

Include MDX documentation in your build:

// .storybook/main.js
module.exports = {
  stories: [
    '../src/**/*.stories.@(js|jsx|ts|tsx|mdx)',
    '../docs/**/*.mdx', // Include pure documentation
  ],
  addons: [
    '@storybook/addon-essentials',
    '@storybook/addon-docs',
  ],
}

// Create docs-only pages
// docs/Introduction.mdx
import { Meta } from '@storybook/blocks';

<Meta title="Documentation/Introduction" />

# Welcome to Our Component Library