@nx/storybook:migrate-8
Migrate Storybook to version 8.
Migrate Storybook to version 8.
Storybook 8 is a major release that brings a lot of new features and improvements. You can read more about it in the Storybook 8.0.0 release article. Apart from the new features and improvements it introduces, it also brings some breaking changes. You can read more about them in the Storybook 8 migration docs and the Storybook 8.0.0 migration guide.
You can now migrate your existing Nx workspace with Storybook configuration to use Storybook version 8. To help you, Nx offers the @nx/storybook:migrate-8
generator. This generator will help you migrate your existing Storybook setup to version 8.
Just call:
1npx nx g @nx/storybook:migrate-8
2
It is advised that you start with a clean git history before running this generator, since it is going to be making lots of changes to your workspace.
You can run this generator using the above command, without passing any options. This will start the migration process for all your projects that have Storybook configured. The logs will explain what is happening in every step, and the logs are mixed Nx and Storybook CLI logs. During the process you will be prompted by the Storybook CLI to accept the automigration scripts. You can read more about that in the next section.
When the generator finishes, you will see a summary of the changes that were made to your workspace, and it will also create a new file, called storybook-migration-summary.md
at the root of your project, which will contain a list of all the changes that were made to your workspace.
The Storybook CLI (running through our generator) will prompt you to run some code generators and modifiers.
You can say yes
to these prompts, which are usually the following (there may be more or less, depending on your setup, and depending on the latest versions of the Storybook CLI - this code is NOT managed by Nx, but by Storybook):
mainjsFramework
: It will try to add the framework
field in your project's .storybook/main.js|ts
file.eslintPlugin
: installs the eslint-plugin-storybook
newFrameworks
: removes unused dependencies (eg. @storybook/builder-webpack5
, @storybook/manager-webpack5
, @storybook/builder-vite
)autodocsTrue
: adds autodocs: true
to your project's .storybook/main.js|ts
fileOnce the generator finishes, and the Storybook CLI automigration scripts have run, you should check the result. Examples of migrated .storybook/main.js|ts
files would look like this:
Here is an example of a project-level .storybook/main.js|ts
file for an Angular project that has been migrated to Storybook version 8:
1const config = {
2 stories: ['../src/app/**/*.@(mdx|stories.@(js|jsx|ts|tsx)'],
3 addons: ['@storybook/addon-essentials'],
4 framework: {
5 name: '@storybook/angular',
6 options: {},
7 },
8};
9
10export default config;
11
Here is an example of a project-level .storybook/main.js|ts
file for a React project using Vite that has been migrated to Storybook version 8:
1const config = {
2 stories: ['../src/app/**/*.@(mdx|stories.@(js|jsx|ts|tsx)'],
3 addons: ['@storybook/addon-essentials'],
4 framework: {
5 name: '@storybook/react-vite',
6 options: {
7 builder: {
8 viteConfigPath: 'apps/rv1/vite.config.ts',
9 },
10 },
11 },
12};
13
14export default config;
15
You can now use Storybook 8! ๐
1npx nx build-storybook PROJECT_NAME
2
and
1npx nx storybook PROJECT_NAME
2
You can run the generator with the --autoAcceptAllPrompts
flag, which will automatically accept all the Storybook CLI prompts. This is useful if you want to run the generator in a CI environment, or if you want to run the generator in a script. Or if you are sure that you want to accept all the prompts!
1npx nx g @nx/storybook:migrate-8 --autoAcceptAllPrompts
2
The Storybook CLI may still ask you about some things, but mostly it should just run the whole migration suite uninterrupted.
Nx gives you the ability to run all the migration steps one by one, manually, but still with the help of our migrator. To help you out with the commands that you need to run, Nx will print out the instructions if you run the generator with the --onlyShowListOfCommands
flag, like this:
1npx nx g @nx/storybook:migrate-8 --onlyShowListOfCommands
2
Essentially, the way to run the migration manually is the following:
npx nx g @nx/storybook:migrate-8 --onlyShowListOfCommands
npx storybook@latest upgrade
@nx/storybook:migrate-8
will give you the list of all the commands)Please report any issues and bugs you find on the Nx GitHub page or on the Storybook GitHub page.
1nx generate migrate-8 ...
2
By default, Nx will search for migrate-8
in the default collection provisioned in workspace.json.
You can specify the collection explicitly as follows:
1nx g @nx/storybook:migrate-8 ...
2
Show what will be generated without writing to disk:
1nx g migrate-8 ... --dry-run
2
false
Say yes to all the prompts from the Storybook CLI migration scripts.
false
Skip upgrading Storybook packages. Only use this option if you are already on version 8, and you do not want the latest beta.
false
Only show the steps that you need to follow in order to migrate. This does NOT make any changes to your code.
Watch the replays of exciting talks on developer tooling and monorepos! Catch all the insightful presentations from the event on our YouTube channel.