Chromatic copies `staticDirs` before `CopyWebpackPlugin` does its job

[sneko]

Hi,

Not sure it can be named "a bug" but I was expecting Chromatic to wait before copying assets from staticDirs. In my case my /public/ folder is mainly formatted through webpack steps, so I end with no asset at all in Chromatic.

Is it the expected behavior? Or could the assets be copied after building?

Thank you,

cc @ghengeveld

Note: a solution could be to copy the "late assets" from /public/ into the built folder like /var/folders/03/n3sz6dd577gdnfyzlvjsr9500000gn/T/chromatic--92427-2J9qjw4ifG7J but I need to find a way to get this path from my webpack steps...

EDIT: it seems I can only get this random path by analyzing process.argv. I will give a try tomorrow to add a "post-plugins hook" in my webpack chain to copy a new time the whole to the right destination.

[sneko]

At the end I noticed it's also true for a basic storybook build without Chromatic.

It was a bit of pain because even by adding an additional copy to CopyWebpackPlugin with a priority to be the last one, it didn't copied at the right time... it was weird.

I ended doing this step with another plugin, I had to have:

const FileManagerPlugin = require('filemanager-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

    const staticBuildFolderPath = path.resolve(__dirname, '../storybook-static/');

...

    // When building Storybook from scratch assets are copied into the `outputDir` before `CopyWebpackPlugin` builds the `/public/` folder
    // resulting in missing assets... so we have to make sure to copy a new time with all files
    // Ref: https://github.com/chromaui/chromatic-cli/issues/722
    // Note: it requires us to use `FileManagerPlugin` to make it working, `CopyWebpackPlugin` didn't work to copy after others even with priority
    let buildMode = false;
    let outputDir = staticBuildFolderPath;
    for (const [argIndex, argValue] of process.argv.entries()) {
      if (argValue.includes('storybook') && process.argv[argIndex + 1] === 'build') {
        buildMode = true;
      } else if (buildMode && argValue === '--output-dir') {
        outputDir = process.argv[argIndex + 1];

        break;
      }
    }

    if (buildMode) {
      config.plugins.push(
        new FileManagerPlugin({
          events: {
            onEnd: {
              copy: [
                {
                  source: path.resolve(__dirname, '../public/'),
                  destination: path.resolve(outputDir),
                },
              ],
            },
          },
        })
      );
    }

    // Expose all DSFR fonts as static at the root so emails and PDFs can download them when needed
    // And also static files embedded in the application
    config.plugins.push(
      new CopyWebpackPlugin({
        patterns: [
          {
            from: path.dirname(require.resolve('@gouvfr/dsfr/dist/fonts/Marianne-Bold.woff2')),
            to: path.resolve(__dirname, '../public/assets/fonts/'),
          },
          {
            from: require.resolve('@mediature/ui/src/fonts/index.css'),
            to: path.resolve(__dirname, '../public/assets/fonts/'),
          },
          {
            from: path.dirname(require.resolve('@mediature/main/public/assets/images/logo.png')),
            to: path.resolve(__dirname, '../public/assets/images/'),
          },
        ],
      })
    );

(note that the CopyWebpackPlugin code is the initial one)

I don't close for now, waiting to know if it was expected assets generated on the fly are not taken in account.

Thank you,