-
Create web component scaffolding with demoing
$ npm init @open-wc # web component scaffolding > demoing
-
Add a public statics assets folder and use it in a story
$ mkdir public # I coppied kitten.jpg in public/kitten.jpg
On
index.stories.mdx
I added:## Kitten image <img src="public/kitten.jpg"/>
-
Start storybook
$ npm run storybook > start-storybook --node-resolve --watch --open
It works! 🎉
-
Build storybook
$ npm run storybook:build > build-storybook -s public
It doesn't work
/public
folder is not copied. The-s
flag shouldn't even be needed because/public
is the default static folder. The kitten image throws a 404 error when serving/storybook-static
-
Not elegant solution for now In
pakage.json
"poststorybook:build": "cp -R public storybook-static/public"
I'm sure something similar can be done ad-hoc for rollup config too. However this shouldn't be needed.
This webcomponent follows the open-wc recommendation.
npm i demo-static-files-bug
<script type="module">
import 'demo-static-files-bug/demo-static-files-bug.js';
</script>
<demo-static-files-bug></demo-static-files-bug>
To run a local instance of Storybook for your component, run
npm run storybook
To build a production version of Storybook, run
npm run storybook:build
npm start
To run a local development server that serves the basic demo located in demo/index.html
npm start:compatibility
To run a local development server in compatibility mode for older browsers that serves the basic demo located in demo/index.html