nx/docs/generated/packages/storybook/documents/storybook-7-setup.md
Jack Hsu 66eaf2fc74
docs(misc): remove /nx-api pages (#31453)
This PR removes the `/nx-api` pages from `nx-dev`. They are already
redirected from `/nx-api` to either `/technologies` or
`/reference/core-api` URLs.

e.g. `/nx-api/nx` goes to `/reference/core-api/nx` and `/nx-api/react`
goes to `/technologies/react/api`

**Changes**:
- Remove old `nx-api.json` from being generated in
`scripts/documentation/generators/generate-manifests.ts` -- this was
used to generate the sitemap
- Remove `pages/nx-api` from Next.js app since we don't need them
- Remove workaround from link checker
`scripts/documentation/internal-link-checker.ts` -- the angular
rspack/rsbuild and other workarounds are gone now that they are proper
docs in `map.json`
- Update Powerpack/Remote Cache reference docs to exclude API documents
(since they are duplicated in the Intro page) --
`nx-dev/models-document/src/lib/mappings.ts`
- All content in `docs` have been updated with new URL structure

**Note:** Redirects are already handled, and Claude Code was used to
verify the updated `docs/` URLs (see report below). The twelve 404s
links were updated by hand.

## Verification Report

https://gist.github.com/jaysoo/c7863fe7e091cb77929d1976165c357a
2025-06-04 16:57:01 -04:00

4.0 KiB

title description
Storybook 7 overview This guide explains how you can set up Storybook version 7 in your Nx workspace. It also highlights the changes that you should expect to see when migrating from Storybook 6 to Storybook 7.

Storybook 7 is here - and Nx is ready

Storybook 7 is a major release that brings a lot of new features and improvements. You can read more about it in the Storybook 7.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 7 migration docs and the Storybook 7.0.0 migration guide.

Nx provides new generators that allow you to generate Storybook 7 configuration for your projects, by installing the correct dependencies and creating the corresponding version 7 configuration files. Nx also provides a Storybook 7 migration generator that you can use to migrate your existing Storybook configuration to version 7.

So, let's see how you can use Storybook 7 on your Nx workspace.

Migrate your existing workspace to Storybook 7

If you already have Storybook configured in your Nx workspace, you can use the Storybook 7 migrator generator to migrate your existing Storybook configuration to version 7.

Set up Storybook 7 in a new Nx Workspace

Please read the @nx/storybook package overview to see how you can configure Storybook in your Nx workspace.

Changes from the v6.5 Storybook configuration

The Storybook configuration generated by Nx for Storybook 7 is very similar to the one generated for Storybook 6.5. Here are the new things that you should expect to see:

Changes in .storybook/main.js|ts file

  • No longer set the core field which contains the builder option.
  • The framework field is now mandatory, and it "replaces" the builder configuration. You can read more in the Storybook docs.
  • Nx no longer adds the webpackFinal field to the .storybook/main.js|ts files. This is just for the sake of simplicity. You can still edit your webpack configuration by using the webpackFinal field, just as you can edit your Vite configuration by using the viteFinal field. You can read more about how to customize your webpack configuration in the Storybook webpack docs, and you can read more about how to customize your Vite configuration in the Storybook Vite docs.

Changes in the storybook and build-storybook targets

  • The uiFramework field is not needed any more, thus it is not set. Nx was using the uiFramework field to load any framework specific options for the Storybook builder. This is no longer needed, since the framework set in .storybook/main.js|ts takes care of that.
  • More options from the Storybook CLI are now exposed in the executors. You can see these in the @nx/storybook:storybook and @nx/storybook:build executor schemas. You can read more about these options in the Storybook 7 CLI docs. If there's an option you need to pass but it's not in the executor schema, you can always pass it, since the executors are just passing the options to the Storybook CLI.

Report any issues and bugs

Please report any issues and bugs you find on the Nx GitHub page or on the Storybook GitHub page.