ddev-storybook

• What is ddev-storybook?
• Components of the repository
• Getting started
• Usage
  • Open Storybook
  • Start Storybook server
• Contributing

What is ddev-storybook?

This addon makes it easier to work with Storybook 7 and DDEV. It does this by:

• exposing Storybook on port 6006.
• adding a helper command.

Storybook is “a frontend workshop for building UI components”. The addon assumes the developer is correctly installed and configured Storybook using the default port (6006).

Components of the repository

• config.storybook.yaml: exposes the default Storybook port.
• commands/host/storybook: Helper command

Getting started

1. Install the add-on and restart DDEV:

ddev add-on get tyler36/ddev-storybook
ddev restart

1. Install storybook if you haven’t already. See the Storybook get started page for instructions. E.g.

   ddev exec npx storybook@latest init
   

   Note: In some cases, Storybook may not launch correctly after the initial installation. To help prevent errors like Error: spawn xdg-open ENOENT, try using the --no-dev flag during initialization:

ddev exec npx storybook@latest init --no-dev

Usage

The helper function has 2 basic usage:

Open Storybook

Use the following command to open Storybook in the default browser.

ddev storybook

Start Storybook server

Use the following command to start the Storybook server.

ddev storybook -s

Alternatively,

ddev storybook --start

This command will try to run the “storybook” script from package.json in NPM. If a yarn.lock file exists, it will run the command with YARN instead.

Removing the Add-On

ddev add-on remove tyler36/ddev-storybook

Contributing

This addon was originally created to work with Drupal and storybook contrib module. It has not been tested in other environments, although assuming Storybook defaults, it should work.

PRs, especially with automated tests are welcome.

Contributed and maintained by @tyler36