stencil-storybook-wrapper icon indicating copy to clipboard operation
stencil-storybook-wrapper copied to clipboard

See both storybook and stencil

Open JEricaM opened this issue 5 years ago • 4 comments

First of all, thank you for this amazing storybook wrapper. I'm trying it all works perfecty but I have only one question. I'm not able to run the stencil page of my components. In your doc I've read this:

// Start the dev server for both stencil and storybook
"start": "npm-run-all --parallel stencil storybook",

but if I do npm run start, the dev server localhost gives me this: Schermata 2019-08-30 alle 13 06 52

I'm not able to see the stencil component page anymore, but only the storybook.

I've also tryied to create another command only for stencil with "stencil build --dev --watch --serve" but this gives me the same problem. Same problem also with npm run stencil.

I'm stuck with this unfortunately.

Thank you in advance

JEricaM avatar Aug 30 '19 11:08 JEricaM

You have to manually include your components in the index.html file, like so:

<script type="module" src="/build/stencil-storybook.esm.js"></script>
<script nomodule src="/build/stencil-storybook.js"></script>

MichaelSeelisch avatar Oct 18 '19 13:10 MichaelSeelisch

Thank you so much, I'll try this asap!

JEricaM avatar Oct 18 '19 13:10 JEricaM

I've added inside index.html

  <head>
    <meta charset="utf-8" />
    <title>Stencil Storybook Wrapper | Component Starter</title>
    <script type="module" src="/build/stencil-storybook.esm.js"></script>
    <script nomodule src="/build/stencil-storybook.js"></script>
  </head>

and ran npm run start ( "start": "npm-run-all --parallel stencil storybook",) but nothing changed.

JEricaM avatar Oct 21 '19 13:10 JEricaM

You have to rename your files, "stencil-storybook" is the name for MY project folder. Rename the script to yours, f. e.

<script type="module" src="/build/your-unbelievable-cool-project.esm.js"></script>

;-)

MichaelSeelisch avatar Oct 21 '19 14:10 MichaelSeelisch