Serving static files via Storybook Configuration object

[asauty]

Describe the bug
After building the Storybook application, I cannot find statics assets in the build

To Reproduce
Here is my main.js file with multiple staticDirs :

const rootMain = require('../../../.storybook/main');

module.exports = {
    ...rootMain,
    core: { ...rootMain.core, builder: 'webpack5' },
    stories: [
        ...rootMain.stories,
        '../src/',
        {
            directory: '../../../libs'
        },
    ],
    staticDirs: [
        {
            from: '../../../libs/shared/util/global-assets/src/lib/assets',
            to: 'assets',
        },
        {
            from: '../../../node_modules/@ant-design/icons-angular/src/inline-svg',
            to: 'assets',
        },
    ],
    addons: [...rootMain.addons],
    webpackFinal: async (config, { configType }) => {
        if (rootMain.webpackFinal) {
            config = await rootMain.webpackFinal(config, { configType });
        }
        return config;
    },
};

During the build, I can see :

info => Copying static files: ********\libs\shared\util\global-assets\src\lib\assets at ********\dist\apps\storybook\assets
info => Copying static files: ********\node_modules\@ant-design\icons-angular\src\inline-svg at ********\dist\apps\storybook\assets

So he is copying thoses files, but I only retrieve assets of the first staticDirs (global-assets\src\lib\assets) in my build. But not those from icons-angular\src\inline-svg.

"@angular/cli": "14.2.1",
"@nrwl/storybook": "14.5.10",
"@nrwl/workspace": "14.5.10",
"@storybook/addon-actions": "6.5.10",
"@storybook/addon-essentials": "6.5.10",
"@storybook/angular": "6.5.10",
"@storybook/builder-webpack5": "6.5.10",
"@storybook/core-server": "6.5.10",
"@storybook/manager-webpack5": "6.5.10",

[7studio]

Hi,
I can confirm this issue too 😥 with:

Environment Info:

  System:
    OS: macOS 10.15.7
    CPU: (4) x64 Intel(R) Core(TM) i5-7267U CPU @ 3.10GHz
  Binaries:
    Node: 14.17.4 - /usr/local/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 6.14.14 - /usr/local/bin/npm
  Browsers:
    Chrome: 105.0.5195.125
    Firefox: 104.0.1
    Safari: 15.6
  npmPackages:
    @storybook/addon-actions: 6.4.19 => 6.4.19 
    @storybook/addon-essentials: 6.4.19 => 6.4.19 
    @storybook/addon-links: 6.4.19 => 6.4.19 
    @storybook/addon-postcss: 2.0.0 => 2.0.0 
    @storybook/addons: 6.4.19 => 6.4.19 
    @storybook/builder-webpack5: 6.4.19 => 6.4.19 
    @storybook/html: 6.4.19 => 6.4.19 
    @storybook/manager-webpack5: 6.4.19 => 6.4.19 
    @storybook/preset-scss: 1.0.3 => 1.0.3 
    @storybook/theming: 6.4.19 => 6.4.19 

More information

This is the Storybook config in main.js:

staticDirs: [
    {from: './assets', to: 'assets/storybook/'},
    {from: '../build/assets', to: 'assets/'},
 ],

The build-storybook --output-dir ./docs command outputs:

info => Copying static files: /Users/name/Desktop/project/www/.storybook/assets at /Users/name/Desktop/project/www/docs/assets/storybook
info => Copying static files: /Users/name/Desktop/project/www/build/assets at /Users/name/Desktop/project/www/docs/assets

Result: into docs/assets/, all files from ./assets are inside but no file from ../build/assets has been copied.

Strangely, all files are correctly served with start-storybook:

info => Serving static files from ././.storybook/assets at /assets/storybook
info => Serving static files from ././build/assets at /assets

except on Windows system where the files from /assets/storybook/ are not served. I'm not very surprised because of #17271 but it's really a big mess sorry 😫

I tested the build-storybook --output-dir ./docs command with staticDirs: ['./assets', '../build/assets'] and all files from both directories have been copied into ./docs.

I will give a try into a PR if I can.

[AdamTaylorQuilter]

I'm also suffering from this on a windows system. Is there a workaround?

[apilab-ru]

I faced a similar issue recently, but it turned out not to be platform-related. In our application, we needed to serve the main assets with the ability to replace some files depending on the environment settings (brand). When using Express to serve multiple folders under one name, it serves the first file it finds. In my case, it helped to first define the assets that override, and then the main ones.

staticDirs: [
    ...(PROJECT && BRAND_STATIC[PROJECT] ? [BRAND_STATIC[PROJECT]] : []),
    { from: '../src/assets', to: '/assets' }
],

However, during the build process, the order will be reversed, so it's worth keeping that in mind.