This repository contains a simple script that automatically restarts the Storybook server whenever changes are detected in your src/components files.
When you're working on UI components, keeping your Storybook instance up to date with every change can be a hassle—especially if Storybook doesn't reflect changes due to caching or stale state.
This script watches for file changes in your component folders and automatically relaunches Storybook, ensuring you always see the latest version of your UI without manual restarts.
You need to have installed storybook in your project: https://storybook.js.org/docs/get-started/install
npm i -D storybook-watch
npx storybook-watch
This will:
- Monitor your component directory (src/components/).
- Kill the current Storybook server instance if it’s running.
- Relaunch Storybook so changes are reflected instantly.
Make sure the path to your component files and the Storybook start command are correctly configured in the script.
To enhance your Storybook setup and make the auto-restart workflow even more effective, it’s highly recommended to install and configure the following:
• @storybook/addon-autodocs: Enables automatic generation of documentation from your component source and props.
• react-docgen or react-docgen-typescript: Parses your component props and allows you to write MDX annotations directly in your TypeScript types.
This setup allows you to:
• Add MDX-style descriptions and notes directly to your component types.
• Automatically generate prop controls and documentation tables.
• Keep your Storybook docs always in sync with your codebase.
https://github.com/styleguidist/react-docgen-typescript
https://storybook.js.org/docs/writing-docs/autodocs