Storybook Deployment and Usage Guide

Prerequisites

Node.js: Version 16 or later
npm or yarn: Package manager for dependency installation
Git: For cloning the repository
TypeScript: Required for development (version 4.0+)
Babel: Required for transpilation (included in dependencies)

Installation

Clone the Repository

git clone https://github.com/storybookjs/storybook.git
cd storybook

Install Dependencies

# Install all dependencies
npm install

# Bootstrap the monorepo (required for internal packages)
npm run bootstrap

Verify Installation

# Check if Storybook CLI is available
npx sb --version

Configuration

Environment Variables

Storybook doesn't require specific environment variables for basic usage. However, for advanced features:

CHROMATIC_PROJECT_TOKEN: Required for Chromatic visual testing integration
STORYBOOK_TELEMETRY_DISABLED: Set to true to disable telemetry

Configuration Files

Key configuration files include:

.storybook/main.js: Main Storybook configuration
.storybook/preview.js: Global preview configuration
package.json: Project dependencies and scripts

Addons Configuration

Storybook supports numerous addons. To configure them, add to your main.js:

// .storybook/main.js
module.exports = {
  addons: [
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    // Add more addons as needed
  ],
};

Build & Run

Development Server

# Start Storybook in development mode
npm run storybook

# Or use the shorthand
npm run sb

Build for Production

# Build static Storybook files
npm run build-storybook

# Build and serve locally for testing
npm run build-storybook && npx http-server storybook-static

Framework-Specific Setup

Storybook supports multiple frameworks. For React:

# Add React support
npm install --save-dev @storybook/react

For Angular:

# Add Angular support
npm install --save-dev @storybook/angular

Deployment

Static Hosting Options

Storybook generates static files that can be deployed to any static hosting service:

Vercel (Recommended)

# Install Vercel CLI
npm install -g vercel

# Deploy
vercel storybook-static

Netlify

# Create netlify.toml
[build]
  publish = "storybook-static"
  command = "npm run build-storybook"

# Deploy via Netlify UI or CLI

GitHub Pages

# Add deploy script to package.json
"scripts": {
  "deploy-storybook": "build-storybook && gh-pages -d storybook-static"
}

# Deploy
npm run deploy-storybook

Continuous Integration

Storybook integrates with CI services:

GitHub Actions

# .github/workflows/storybook.yml
name: Storybook
on: [push]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
      - run: npm ci
      - run: npm run build-storybook

Troubleshooting

Common Issues

Module Resolution Errors

Problem: Cannot find module errors during development

Solution: Ensure proper bootstrap:

npm run bootstrap
npm run clean
npm run bootstrap

TypeScript Configuration Issues

Problem: TypeScript compilation errors

Solution: Verify TypeScript version compatibility:

npm list typescript
# Should be >= 4.0.0

Babel Configuration Conflicts

Problem: Babel configuration conflicts with project

Solution: Use Storybook's internal Babel configuration:

// .storybook/main.js
module.exports = {
  babel: (config) => config,
};

Port Conflicts

Problem: Port 6006 already in use

Solution: Change Storybook port:

npm run storybook -- --port 6007

Addon Compatibility

Problem: Addons not working with newer versions

Solution: Check addon compatibility matrix:

npm view @storybook/addon-essentials versions

Debug Mode

Enable debug logging for troubleshooting:

DEBUG=storybook:* npm run storybook

Performance Issues

For large Storybook instances:

# Enable lazy loading
npm install --save-dev @storybook/source-loader

# Configure in main.js
module.exports = {
  refs: {
    another: { id: 'another', import: './path/to/another/storybook' },
  },
};

Version Compatibility

Storybook follows semantic versioning. Check compatibility:

# Check latest stable version
npm view @storybook/react version

# Check next version for upcoming features
npm view @storybook/react next

How to Deploy & Use storybooks/storybook