Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tyler36/ddev-storybook
Helpers for DDEV and Storybook
https://github.com/tyler36/ddev-storybook
ddev-get hacktoberfest storybook
Last synced: 4 months ago
JSON representation
Helpers for DDEV and Storybook
- Host: GitHub
- URL: https://github.com/tyler36/ddev-storybook
- Owner: tyler36
- License: apache-2.0
- Created: 2024-01-23T00:38:55.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-08T01:37:18.000Z (4 months ago)
- Last Synced: 2024-10-09T04:39:56.296Z (4 months ago)
- Topics: ddev-get, hacktoberfest, storybook
- Language: Shell
- Homepage:
- Size: 67.4 KB
- Stars: 5
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/ddev/ddev-addon-template/actions/workflows/tests.yml) 
# ddev-storybook
- [What is ddev-storybook?](#what-is-ddev-storybook)
- [Components of the repository](#components-of-the-repository)
- [Getting started](#getting-started)
- [Usage](#usage)
- [Open Storybook](#open-storybook)
- [Start Storybook server](#start-storybook-server)
- [Contributing](#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](https://storybook.js.org/) 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 addon and restart DDEV.
```shell
ddev get tyler36/ddev-storybook
ddev restart
```
2. Install storybook if you haven't already. See the [Storybook get started page](https://storybook.js.org/docs/get-started/install) for instructions. E.g.
```shell
ddev exec npx storybook@latest init
```
## Usage
The helper function has 2 basic usage:
### Open Storybook
Use the following command to open Storybook in the default browser.
```shell
ddev storybook
```
### Start Storybook server
Use the following command to start the Storybook server.
```shell
ddev storybook -s
```
Alternatively,
```shell
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.
## Contributing
This addon was originally created to work with Drupal and [storybook](https://www.drupal.org/project/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](https://github.com/tyler36)**