DEV Community

Cover image for Setting up Stencil 4 with Storybook 8
Joaquin Senosiain, Jr
Joaquin Senosiain, Jr

Posted on

2 2 1 2 1

Setting up Stencil 4 with Storybook 8

I had a lot of trouble getting this setup and working properly, but I finally managed to get it working. I hope this saves someone the same anguish I went through.

Step 1: Install Stencil

npm init stencil
Enter fullscreen mode Exit fullscreen mode

At the prompt select components then name your project and confirm.

Step 2: Navigate to Project and Install Dependencies

cd <your-project-name>
npm install
Enter fullscreen mode Exit fullscreen mode

Step 3: Integrate Storybook

npx sb init --type web_components
Enter fullscreen mode Exit fullscreen mode

Select Vite at the prompt.

Step 4. Update compilerOptions in tsconfig.json

"compilerOptions": {
  ...,
  "skipLibCheck": true
}
Enter fullscreen mode Exit fullscreen mode

Step 5. Configure Storybook

Open .storybook/preview.js and add the following code to the top of the file.

import {defineCustomElements} from '../loader';
defineCustomElements();
Enter fullscreen mode Exit fullscreen mode

Now, open .storybook/main.ts (you may have to update the js file to ts) and copy the following code.

import type { StorybookConfig } from '@storybook/web-components-vite';

const config: StorybookConfig = {
  stories: ['../src/components', '../src/styleguide', '../src/stories'],
  addons: ['@storybook/addon-essentials'],
  //staticDirs: ['../dist/lib-components'],
  docs: {
    autodocs: true
  },
  async viteFinal(config, { configType }) {
    const { mergeConfig } = await import('vite')

    if (configType !== 'DEVELOPMENT') {
      return config
    }

    return mergeConfig(config, {
      build: {
        // this is set to 'dist' by default which causes hot-reloading for stencil components to break
        // see: https://vitejs.dev/config/server-options.html#server-watch
        // setting it to anything other than dist fixes the issue
        outDir: 'dist-vite'
      }
    })
  },
  core: {
    disableTelemetry: true
  },
  framework: '@storybook/web-components-vite'
}

export default config
Enter fullscreen mode Exit fullscreen mode

You may have to install vite.

npm install -D vite --legacy-peer-deps
Enter fullscreen mode Exit fullscreen mode

The --legacy-peer-deps flag was need as of this writing.

Step 6. Setup first Story

Delete src/stories.

In the src/components/my-component folder, create my-component.stories.tsx and add the following code.

export default {
  // this creates a 'Components' folder and a 'MyComponent' subfolder
  title: 'Components/MyComponent',
};

const Template = (args) => `<my-component first="${args.first}" middle="${args.middle}" last="${args.last}"></my-component>`;

export const Example = Template.bind({});
Example.args = {
  first: 'Alan',
  middle: 'Dean',
  last: 'Foster'
};
Enter fullscreen mode Exit fullscreen mode

Final Step: Run Project

Open terminal and run:

npm run build -- --watch
Enter fullscreen mode Exit fullscreen mode

Open a separate terminal and run.

npm run storybook
Enter fullscreen mode Exit fullscreen mode

Your project should be up and running and any changes you make in you my-component.tsx file will immediately be reflected in Storybook.

I hope this helps someone out there.

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay