Automatically Detect New Components in Storybook Without Restarting the Server

When using Storybook in a project, it's important to ensure that new components are dynamically watched without needing to restart the server. This tutorial will guide you on how to enable dynamic file watching in Storybook without the start command in your package.json scripts.

Step 1: Modify `Tailwind` Configuration

Ensure that your tailwind.config.js file includes all necessary file types in the content array. Here’s an example configuration:

// tailwind.config.js
module.exports = {
  content: [
    './src/**/*.html',
    './src/**/*.js',
    './src/**/*.jsx',
    './src/**/*.ts',
    './src/**/*.tsx',
    './.storybook/**/*.{js,jsx,ts,tsx}', // Include Storybook files
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

This ensures that Tailwind scans your Storybook files for CSS class usage.

Step 2: Add Watch Script in `package.json`

To avoid manually restarting Storybook, modify your package.json to include a watch script. This will allow Storybook to detect changes and new files automatically.

Here’s how you can set up your scripts:

{
  "scripts": {
    "storybook": "storybook -p 6006",        // Standard Storybook start
    "storybook:watch": "storybook -p 6006 --watch"  // Watch mode for dynamic changes
  }
}

You can run npm run storybook:watch to enable file watching. This command ensures that Storybook continuously monitors file changes and adds new components dynamically.

Step 3: Update Webpack for Better File Watching

To ensure new files are detected in real time, you need to configure Webpack’s watchOptions in your Storybook setup. Open your .storybook/main.js file and add the following:

// .storybook/main.js
module.exports = {
  webpackFinal: async (config) => {
    config.watchOptions = {
      aggregateTimeout: 200, // Delay before rebuilding after a change
      poll: 1000,            // Poll the files every second
    };
    return config;
  },
};

This will make Webpack poll your file system and rebuild Storybook more frequently without the need for restarts.

Step 4: Start Storybook in Watch Mode

Now, instead of running the standard storybook command, start Storybook in watch mode using:

npm run storybook:watch

This enables Storybook to automatically detect new components, saving you time by not having to restart the server after every file addition.

Conclusion

With this setup, you’ve enabled Storybook to automatically watch for new files and dynamically reload changes without needing manual restarts. By leveraging the watch option and configuring Webpack correctly, you can speed up your development workflow, especially when frequently adding new components.

This quick setup can make your Storybook development smoother and more efficient!