Storybook: Add option to specify path where all files from static directories will be outputted

[srghma]

Right now I have nextjs project, with images in /static/images folder, and Im using it in components like this

<img src="/static/images/logo.png" alt="logo" />
Problem is when I starting storybook with "storybook": "start-storybook -p 6006 -c app/.storybook -s static", the logo cant be found, for storybook proper path to image is now "/images/logo.png"

[jonespen]

Had the exact same issue, added the file middleware.js to ./storybook with this content:

const express = require('express')
const path = require('path')

module.exports = router => {
  router.use('/static', express.static(path.join(__dirname, '..', 'static')))
}

Hope it helps!

Inspired by https://github.com/storybooks/storybook/issues/714

[srghma]

Thanks @jonespen :+1:

[Hypnosphi]

@ndelangen is this middleware feature documented anyhow?

[ndelangen]

I'm afraid it's not @Hypnosphi

Thing to know about it is: it doesn't work when building a static version of storybook.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 60 days. Thanks!

[aviramga]

@ndelangen @jonespen Im having the exact same issue but with build-storybook. Im also using nextjs. How can I solve this?

Thanks!

[Hypnosphi]

Duplicates #714