LWC Storybook CLI

A CLI tool for quickly getting started with storybook in LWC projects

Getting started

1. Add lwc-storybook-cli as a dependency to your project:

npm install --save-dev @lwce/lwc-storybook-cli

# OR

yarn add --dev @lwce/lwc-storybook-cli

2. Add to your package.json:

"scripts": {
  "storybook:build": "lwc-storybook build",
  "storybook:start": "lwc-storybook start",
}

3. Make sure your lwc.config.json has the following module entry:

"modules": [
    ...
    {
        "npm": "lwc-components-lightning"
    }
],

4. Optionally, add a mocked-core-modules-data.js file to the root of your project. The file should export a single getData function:

export function getData() {
    return {
        // Any data defined will be provided to the mocked core modules
    }
}

5. Add .storybook to your .gitignore

Commands

start

Start storybook in development mode

Command: lwc-storybook start

build

Build storybook with an output that can be hosted on a static web server. Defaults the output to .storybook/build/public

Command: lwc-storybook build

story

Follow the prompts to generate a story

Command: lwc-storybook story