992602b307
TL;DR:
- removed `--configuration={args.scope}` from `storybook:static:test`
for the `storybook:static` part, as it was making `front-sb-test` jobs
in CI not reuse the cache from the `front-sb-build` job and re-build
storybook every time.
- replaced it with a new `test` configuration which optimizes storybook
build for tests and builds storybook 2x faster.
## Fix storybook:build cache usage in CI
`storybook:static:test` executes two scripts in parallel:
1. `storybook:static`, which depends on `storybook:build`
1.a. it builds storybook first with `storybook:build`, the output
directory is `storybook-static`.
1.b. then it launches an `http-server`, using what has been built in
`storybook-static`
2. `storybook:test` to execute tests (needs the storybook http-server to
be running)
When passing `--configuration=pages` or `--configuration=modules` to
`storybook:static` from step 1, those configurations are passed to the
`storybook:build` script from step 1.a as well.
But for Nx `storybook:build` and `storybook:build --configuration=pages`
(or `modules`) are not the same command, therefore one does not reuse
the cache of the other because they could output completely different
things.
As `front-sb-test` jobs are passing `--configuration={args.scope}` to
`storybook:static`, the cache of the previously executed
`storybook:build` (from `front-sb-build`) is not reused and therefore
each job re-builds Storybook with its own scope, which increases CI
time.
### Solution
- Removed scope configurations from `storybook:static` and
`storybook:build` scripts to avoid confusion.
- `storybook:test` and `storybook:dev` can keep scope configurations as
they can be useful and this doesn't impact storybook build cache in CI.
### Improve Storybook build time for testing
Added the `test` configuration to `storybook:build` and
`storybook:static` which makes Storybook build time 2x faster. It
disables addons that slow down build time and are not used in tests.
62 lines
1.5 KiB
TypeScript
62 lines
1.5 KiB
TypeScript
import { StorybookConfig } from '@storybook/react-vite';
|
|
|
|
const computeStoriesGlob = () => {
|
|
if (process.env.STORYBOOK_SCOPE === 'pages') {
|
|
return [
|
|
'../src/pages/**/*.stories.@(js|jsx|ts|tsx)',
|
|
'../src/__stories__/*.stories.@(js|jsx|ts|tsx)',
|
|
'../src/pages/**/*.docs.mdx',
|
|
'../src/__stories__/*.docs.mdx',
|
|
];
|
|
}
|
|
|
|
if (process.env.STORYBOOK_SCOPE === 'modules') {
|
|
return [
|
|
'../src/modules/**/!(perf)/*.stories.@(js|jsx|ts|tsx)',
|
|
'../src/modules/**/*.docs.mdx',
|
|
];
|
|
}
|
|
|
|
if (process.env.STORYBOOK_SCOPE === 'performance') {
|
|
return ['../src/modules/**/perf/*.perf.stories.@(js|jsx|ts|tsx)'];
|
|
}
|
|
|
|
if (process.env.STORYBOOK_SCOPE === 'ui-docs') {
|
|
return ['../src/modules/ui/**/*.docs.mdx'];
|
|
}
|
|
|
|
return ['../src/**/*.docs.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'];
|
|
};
|
|
|
|
const config: StorybookConfig = {
|
|
stories: computeStoriesGlob(),
|
|
staticDirs: ['../public'],
|
|
addons: [
|
|
'@storybook/addon-links',
|
|
'@storybook/addon-essentials',
|
|
'@storybook/addon-onboarding',
|
|
'@storybook/addon-interactions',
|
|
'@storybook/addon-coverage',
|
|
'storybook-dark-mode',
|
|
'storybook-addon-cookie',
|
|
'storybook-addon-pseudo-states',
|
|
],
|
|
framework: {
|
|
name: '@storybook/react-vite',
|
|
options: {},
|
|
},
|
|
build: {
|
|
test: {
|
|
disableMDXEntries: true,
|
|
disabledAddons: [
|
|
'@storybook/addon-docs',
|
|
'@storybook/addon-essentials/docs',
|
|
],
|
|
},
|
|
},
|
|
docs: {
|
|
autodocs: false,
|
|
},
|
|
};
|
|
export default config;
|