[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