Storybook Federation

1. Introduction

Storybook Federation is an advanced feature of Storybook.js that enables developers to work with components across multiple projects and repositories. This concept is crucial for large-scale applications where different teams work on various parts of the UI, promoting reusability and consistency.

2. Key Concepts

3. Setup & Configuration

Follow these steps to set up Storybook Federation:

1. Install Storybook in your project:

npx sb init

2. Add the necessary dependencies for federation:

npm install --save-dev @storybook/addon-federation

3. Configure Storybook for federation:

In your `.storybook/main.js` file, add the following configuration:

module.exports = {
    // other configurations...
    addons: [
        '@storybook/addon-federation',
    ],
    webpackFinal: async (config) => {
        config.plugins.push(
            new ModuleFederationPlugin({
                name: 'yourApp',
                filename: 'remoteEntry.js',
                exposes: {
                    './Component': './src/Component',
                },
                shared: {
                    react: {
                        singleton: true,
                        eager: true,
                        requiredVersion: '>=16.8.0',
                    },
                    'react-dom': {
                        singleton: true,
                        eager: true,
                        requiredVersion: '>=16.8.0',
                    },
                },
            }),
        );
        return config;
    },
};

4. Usage

To use federated components, you can simply import them in your Storybook stories:

import RemoteComponent from 'remoteApp/Component'; // remoteApp is another micro-frontend

export default {
    title: 'Remote/Component',
    component: RemoteComponent,
};

const Template = (args) => ;

export const Default = Template.bind({});
Default.args = {
    // your args here...
};

5. Best Practices

• Maintain consistent versioning across shared dependencies.
• Document component usage and API for easier onboarding.
• Test components in isolation as well as in integrated environments.
• Regularly update your Storybook and dependencies to leverage new features.

6. FAQ