Generate a New Component

• 1. Run the component generator
• 2. Name your new component
• 3. Determine if your new component is a Micro Frontend (MFE)
• 3.1 If your component is not a Micro Frontend
• 3.2 If your component is a Micro Frontend

1. Run the component generator

run $ yarn generate-component

2. Name your new component

Give the CLI a name for the new component you would like to create, in this example we will use TestComponent

3. Determine if your new component is a Micro Frontend (MFE)

You can learn more about Atomic Design here. It's where we've derived our opinions on where the line for what to make an MFE or not, drawing the line at the Feature/Organism level.

The largest factor to consider for this question is the threshold of user value you would like to determine the cutoff for what is federated or not. A "Federated Feature" only adds an additional Federated Component stories file under ./src/components/TestComponent/stories/TestComponentFed.stories.tsx

3.1 If your component is not a Micro Frontend

Select Atomic Level Component and after the newly generated tests run, assuming they pass, you will be able to view your newly generated component under ./src/component/TestComponent

3.2 If your component is a Micro Frontend

3.2.1 Expose the newly generated component as a consumable MFE

If you chose to generate a Federated Feature, you will need to manually add it to the exposed Federated Modules in ./webpack.config.js under the ModuleFederationPlugin 's exposes key/value pair.

// webpack.config.js

// ...
// Required assets from external sources for webpack configuration, plugins, etc
// ...

module.exports = {

	// ...
	// configuration for output, resolve, devServer, module, etc
	// ...

  plugins: [
    new ModuleFederationPlugin({
      name: "RocketScience",
      filename: "remoteEntry.js",
      remotes: {},
      exposes: {
        "./NewComponentTemplate": "./src/components/NewComponentTemplate",
				// =================================================================
				// Key: similar to concept of a 'route' for your exposed module
				// Value: file path to the module you want to expose
				"./TestComponent": "./src/components/TestComponent"
				// =================================================================
      },
      shared: {
        ...deps,
        react: {
          singleton: true,
          requiredVersion: deps.react,
        },
        "react-dom": {
          singleton: true,
          requiredVersion: deps["react-dom"],
        },
      },
    })
  ],
};

3.2.2 Use the commented out code in the Federated story

./src/components/TestComponent/stories/TestComponentFed.stories.tsx

3.2.3 Run or Re-Run the Rocket Science Launch Script $ yarn launch

The Rocket Science Launch Script runs webpack with the —watch flag, because of this - any already running instances will need to be restarted to include the newly exposed Federated Module.