Storybook: [Issue] - Can't load images with build-storybook under "/static" directory

[aviramga]

Issue details

I have a folder of static assets under /static in the root dir.
All my assets in the project go to /static/path/to/file, I use a babel config to enable it.

To mimic this behaviour I'm running storybook-build like this
build-storybook -c .storybook -s .

my .storybook/config looks like this
````
import { configure, getStorybook, setAddon } from "@storybook/react";
import createPercyAddon from "@percy-io/percy-storybook";

const { percyAddon, serializeStories } = createPercyAddon();
setAddon(percyAddon);

const req = require.context("../components", true, /.stories.js$/);

function loadStories() {
req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);
serializeStories(getStorybook);
````

percy-io/percy-storybook: "^1.3.2"
storybook/react: "^3.3.12"

Im also using nextjs as my react project.
the build just hangs on the "info => Copying static files from: ." command.
This config works just fine with start-storybook or if I define -s to anything but the root folder. But in order for my assets to be properly loaded I need the -s to point to the root

How can I fix this?

Thanks!

[Hypnosphi]

Should it be build-storybook -c .storybook -s static?

[aviramga]

Hi @Hypnosphi this will not solve my issue as this will copy the static folder to the root folder and all my images are directed to "/static/path/to/file" which will make them inaccessible

[aviramga]

I read about solutions with using a custom express middleware, but they're not working with build-storybook as its not running an actual server. Any way around this?

[Hypnosphi]

I'm not sure it's a good idea to serve all your project files as statics (that's what happens with -s .)

I use a babel config to enable it

Can you please elaborate this part a bit more

[aviramga]

@Hypnosphi I agree, its a bad idea :) this is why Im looking for alternatives.
My project structure is as follows:

--
|- components
|- config
|- constants
|- pages
|- server
|- static

and my babel looks like this: { "presets": [ [ "next/babel", { "styled-jsx": { "plugins": ["styled-jsx-plugin-sass"] } } ] ], "plugins": [ ["inline-react-svg"], [ "transform-assets-import-to-string", { "baseDir": "/static", "baseUri": "" } ], [ "module-resolver", { "root": ["."] } ] ], "env": { "staging": { "plugins": [ [ "transform-assets-import-to-string", { "baseDir": "/static", "baseUri": "https://cdnstaging.com", "extensions": [ ".jpg", ".png", ".jpeg", ".gif", ".mp4", ".mov", ".ico", ".webm", ".ogv" ] } ] ] }, "production": { "plugins": [ [ "transform-assets-import-to-string", { "baseDir": "/static", "baseUri": "https://cdn.com", "extensions": [ ".jpg", ".png", ".jpeg", ".gif", ".mp4", ".mov", ".ico", ".webm", ".ogv" ] } ] ] } } }

[Hypnosphi]

Duplicates #714