React-styleguidist: Images in markdown not working in production

[robcaldecott]

I am using create-react-app and have some markdown files in a root docs folder that are including images that are located in the same folder, something like this:

![logo](/docs/styleguide_icon.png)

In dev mode (styleguidist server) this works perfectly. But when I build a static site using styleguidist build the images are not included in the bundled files. Is there a way to coerce the config to include images for the static build? Or should I move everything into src?

[sapegin]

Have you tried to change assetDir option?

[robcaldecott]

Yes. I tried this but images reference in markdown are still not included in a static build. Even if I move the markdown files and images to the src folder. It's as if the default create-react-app webpack config is not working for markdown images.

Anything else I can try?

[sapegin]

Please make an example as described here so I could debug it.

[robcaldecott]

OK, try this:

https://github.com/robcaldecott/styleguidist-images

Clone it, npm install and then run npm run styleguide:build.

[sapegin]

Yeah, assetDir only affects dev server. What would be the right behavior here? Copy everything from assetDir to styleguideDir?

[robcaldecott]

Copying the assets should work, easy enough to try. I'll report back.

[sapegin]

Do you want to try to implement it an submit a pull request? ;-)

[robcaldecott]

I'm a PR virgin! But it's about time I gave back... and this product is super useful. :)

[sapegin]

Awesome! I recommend you to watch this course by @kentcdodds: https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github

[robcaldecott]

OK, it works if I store all my markdown images in an assets folder and reference them with ./assetfilename in the markdown as long as I copy the contents of the assets folder to the final styleguide folder. The ./ is required if you want to host the static site in a sub-folder btw (which is essential for me.) This seems to work OK in dev and production builds.

So, regarding how to actually fix this I think we could use Copy Webpack Plugin and modify the scripts/make-webpack-config.js file to do this in production builds if the assetsDir config setting is present. I see if I can do this after a bit more testing.

Another workaround would be to add Copy Webpack Plugin to a custom config in styleguide.config.js.

I'm no Webpack expert but this seems to way to go.

[sapegin]

So, regarding how to actually fix this I think we could use Copy Webpack Plugin and modify the scripts/make-webpack-config.js file to do this in production builds if the assetsDir config setting is present. I see if I can do this after a bit more testing.

Sounds good! Thanks for the research ;-)