Storybook Configuration: Shared Global Assets

I’m having incredible difficulty trying to get my static images to load in Storybook for my Angular-focused project.

The Details for what I’m trying to accomplish are as follows:

• I have a Storybook library serving as a central hub in serving all the other user stories. That part I have working fine.
• I want it to utilize my global styles. Again, I managed to get this working fine via main.js and webpackFinal.
• I want it to utilize my global static assets (mainly images) that I can serve from my global assets library.

What is NOT working is that the background images that are established as CSS rules are not being loaded.

From what I can tell is that it’s dumping the assets into the root of wherever Storybook is being served and in the directory output it’s being built. The problem stems from the fact that in my CSS rules, and because of how the glob input/output configuration works with targets.build.assets in workspace.json (what I’m suing) or angular.json, it’s looking for /assets/image.png; however, it’s storing them as just /image.png.

Or at least I’m pretty sure that’s the case based on the terminal output that’s fed back to me during compilation:

Description

It would be helpful if there was a way to establish static assets for Storybook in very much the same way that you can with assets for normal builds.

Something akin to this (apologies for the wacky formatting, as my VSCode screws with indention whenever I attempt to copy & paste snippets):

"storybook": {
      "executor": "@nrwl/storybook:storybook",
      "options": {
          "uiFramework": "@storybook/angular",
          "port": 4400,
          "config": { "configFolder": "libs/client/storybook/.storybook" },
          "staticDir": [
               {
                    "input": "libs/client/shared/utils/assets/src/lib/favicons",
                    "glob": "**/*.png",
                    "output": "./assets"
                }
           ]
    },
    "configurations": { "ci": { "quiet": true } }
 }

Motivation

I just feel the configuration should be relatively simple to allow for shared global styles and assets from the workspace.json/angular.json file alone. Or even some Nx Console generator to do it for you; that way we can purely focus on coding and not setup.

Suggested Implementation

Alternate Implementations

The Nx Console generator like I mentioned could also work or just a command to at least a sort of mask or proxy for the assets. Where if Storybook detects the story’s trying to pull a resource that matches a certain pattern – say /assets/**/* .png for example – it would know to instead look for it in wherever you would have that file stored in your project.

But I’m open to any other kind of alternative; I just feel that the configuration for what I feel to be an obligatory feature to be near effortless (or at least well documented).

(Speaking of documentation, I have checked both NRWL’s and Storybook’s official documentation and could find no answers to the problem I’m introducing.)

[Swimburger]

In my case, I need to copy an entire dist folder from somewhere in the node_modules, but it has to be at a specific path so the staticDir option which copies the file at the root didn’t work for me.

As a workaround, I resorted to using a relative symlink to the node_modules and that way create the correct path structure my storybook components are depending on. Then the staticDir option to point to a parent folder of that symlink.

In a web build executor, I could just use the assets options:

"assets": [
    {
      "input":  "node_modules/specific_package/dist",
      "glob": "**/*",
      "output": "assets/specific_package"
    }
  ]

Having the same option for Storybook would be very helpful.

[WidgetsBurritos]

Just to follow up, I was experiencing this issue on 13.8. I updated to v14 last night and it appears to be working now so I can confirm this is, in fact, working as expected.