Storybook is developed against a specific node version which is defined in an .nvmrc
file. You can use any Node version manager that uses the .nvmrc
configuration file (we recommend fnm).
-
Install fnm as per instructions
-
In your shell setup include the
use-on-cd
,corepack-enabled
andversion-file-strategy recursive
parameters in thefnm env
command, e.g.eval "$(fnm env --use-on-cd --corepack-enabled --version-file-strategy recursive)"
- Ensure if you are using Windows to use the Windows Subsystem for Linux (WSL).
- Run
yarn start
in the root directory to run a basic test Storybook "sandbox".
The yarn start
script will generate a React Vite TypeScript sandbox with a set of test stories inside it, as well as taking all steps required to get it running (building the various packages we need etc). There is no need to run yarn
or yarn install
as yarn start
will do this for you.
If you run yarn start
and encounter the following error, try rerunning yarn start
a second time:
> NX ENOENT: no such file or directory, open 'storybook/code/node_modules/nx/package.json'
If you have forked the repository, you should disable Github Actions for your repo as many of them (e.g. pushing to sandbox) will fail without proper authorization. In your Github repo, go to Settings > Actions > General > set the Actions Permissions to Disable actions.
You can also pick a specific template to use as your sandbox by running yarn task
, which will prompt you to make further choices about which template you want and which task you want to run.
If you want to make code changes to Storybook packages while running a sandbox, you'll need to do the following:
- In a second terminal run
yarn build --watch <package-1> <package-2>
in thecode/
directory. The package names is the bit after the@storybook/
in the published package. For instance, to build the@storybook/react @storybook/core-server @storybook/api @storybook/addon-docs
packages at the same time in watch mode:
cd code
yarn build --watch react core-server api addon-docs
-
If you are running the sandbox in "linked" mode (the default), you should see the changes reflected on a refresh (you may need to restart it if changing server packages)
-
If you are running the sandbox in "unlinked" mode you'll need to re-run the sandbox from the
publish
step to see the changes:
yarn task --task dev --template <your template> --start-from=publish
For further advice on how to contribute, please refer to our NEW contributing guide on the Storybook website.