tessl/npm-kadira--storybook

React Storybook: Isolate React Component Development with Hot Reloading.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

CLI Commands

Name: tessl/npm-kadira--storybook
Author: tessl

Command-line interface for running the development server and building static versions of Storybook. These tools provide the core development and deployment workflows for Storybook projects.

Capabilities

Start Storybook

Starts the development server with hot reloading and live story updates.

start-storybook [options]

Required Options:

-p, --port <number> - Port to run Storybook (required)

Optional Options:

-h, --host <string> - Host to run Storybook
-s, --static-dir <dir-names> - Directory where to load static files from
-c, --config-dir <dir-name> - Directory where to load Storybook configurations from
--dont-track - Do not send anonymous usage stats

Usage Examples:

# Basic usage - start on port 6006
start-storybook -p 6006

# Custom host and port
start-storybook -p 9001 -h 0.0.0.0

# With static file directory
start-storybook -p 6006 -s ./public

# Multiple static directories
start-storybook -p 6006 -s ./public,./assets

# Custom configuration directory
start-storybook -p 6006 -c ./.storybook-custom

# Disable usage tracking
start-storybook -p 6006 --dont-track

# Combined options
start-storybook -p 8080 -h localhost -s ./public -c ./.storybook --dont-track

Build Storybook

Builds a static version of Storybook for deployment to web servers or CDNs.

build-storybook [options]

Optional Options:

-s, --static-dir <dir-names> - Directory where to load static files from
-o, --output-dir <dir-name> - Directory where to store built files
-c, --config-dir <dir-name> - Directory where to load Storybook configurations from
--dont-track - Do not send anonymous usage stats

Usage Examples:

# Basic build - outputs to storybook-static/
build-storybook

# Custom output directory
build-storybook -o ./dist/storybook

# With static files
build-storybook -s ./public -o ./build

# Custom configuration directory
build-storybook -c ./.storybook-custom -o ./output

# Complete build command
build-storybook -c ./.storybook -s ./public,./assets -o ./dist --dont-track

Storybook Server

Alias for the start-storybook command, provides the same functionality.

storybook-server [options]

This command accepts the same options as start-storybook and provides identical functionality.

Usage Examples:

# Same as start-storybook -p 6006
storybook-server -p 6006

# All start-storybook options work
storybook-server -p 8080 -h 0.0.0.0 -s ./public

Environment Variables

CLI commands can be configured using environment variables, which override command-line options.

Available Environment Variables:

# Port configuration
SBCONFIG_PORT=6006

# Hostname configuration  
SBCONFIG_HOSTNAME=localhost

# Static directories (comma-separated)
SBCONFIG_STATIC_DIR=./public,./assets

# Configuration directory
SBCONFIG_CONFIG_DIR=./.storybook

# Disable usage tracking
SBCONFIG_DO_NOT_TRACK=true

Usage Examples:

# Using environment variables
export SBCONFIG_PORT=9001
export SBCONFIG_HOSTNAME=0.0.0.0
export SBCONFIG_STATIC_DIR=./public
start-storybook

# Inline environment variables
SBCONFIG_PORT=8080 SBCONFIG_STATIC_DIR=./assets start-storybook

# Override environment with command line
SBCONFIG_PORT=6006 start-storybook -p 7007  # Uses port 7007

Development Workflow

Typical development workflow using CLI commands.

Development Setup:

# Install Storybook
npm install @kadira/storybook

# Create configuration directory
mkdir .storybook

# Create basic config file
cat > .storybook/config.js << 'EOF'
import { configure } from '@kadira/storybook';

configure(() => {
  const req = require.context('../stories', true, /\.stories\.js$/);
  req.keys().forEach(filename => req(filename));
}, module);
EOF

# Start development server
start-storybook -p 6006

Package.json Integration:

{
  "scripts": {
    "storybook": "start-storybook -p 6006",
    "storybook:build": "build-storybook -o docs",
    "storybook:serve": "start-storybook -p 6006 -s public"
  }
}

Usage with npm scripts:

# Development
npm run storybook

# Build for deployment
npm run storybook:build

# Serve with static files
npm run storybook:serve

Production Deployment

Building and deploying Storybook for production use.

Static Site Deployment:

# Build static version
build-storybook -o ./storybook-static

# Deploy to various platforms
# GitHub Pages
npm install -g gh-pages
gh-pages -d storybook-static

# Netlify
netlify deploy --dir=storybook-static --prod

# AWS S3
aws s3 sync storybook-static/ s3://my-storybook-bucket --delete

Docker Deployment:

# Dockerfile for Storybook
FROM node:12
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build-storybook
EXPOSE 80
CMD ["npx", "http-server", "storybook-static", "-p", "80"]

Troubleshooting

Common CLI issues and solutions.

Port Issues:

# Check if port is in use
lsof -i :6006

# Use different port
start-storybook -p 6007

# Use random available port
start-storybook -p 0

Configuration Issues:

# Verify config directory exists
ls -la .storybook/

# Use different config directory
start-storybook -p 6006 -c ./custom-storybook-config

# Debug configuration loading
DEBUG=@kadira/storybook* start-storybook -p 6006

Static File Issues:

# Verify static directory exists
ls -la public/

# Check static file serving
start-storybook -p 6006 -s ./public
# Access: http://localhost:6006/your-static-file.png