- React - Typescript - Webpack Module Federation - Babel - React Router - Yarn - Jest - React Testing Library - Lerna - ESLint - Prettier 

Requires Node JS version 14.17.0+. Using nvm:

nvm install 14.17.0 nvm use 14.17.0

yarn install 

For more info about this, have a look at the Miscellaneous section below.

yarn make-types 

This will start all MFEs.

yarn start 

This will build/serve all MFEs.

yarn build yarn serve 

cd apps/MFE_DIR yarn start 

yarn clean 

You can run any remote (MFE) level script in a single batch by using the following format:

lerna run --parallel SCRIPT_NAME 

To generate a new remote (MFE) run the following command:

yarn generate-mfe 

This will run a CLI wizard (node app located in the ./cli-wizard directory) that will generate a new remote (MFE) based on a set of 3 questions. Under the hood this CLI wizard clones a boilerplate repository and renames the content of certain files to match the prompts.

After generating a new remote (MFE), make sure to update the port numbers, as follows:

• package.json on line 8
• webpack.dev.js on line 19 and on line 24

If MFE of type Shell, make sure you also update the remotes object in the federation.config.json file

In an ideal world this CLI would be a node module and the ports would be automatically assigned, however this is out of scope for this PoC.

• To automate the type generation for the federate modules, the app is making use of the @pixability-ui/federated-types. To generate the federate types run yarn make-types.

• Each remote (MFE) is using a federation.config.json file to define the federate configuration. This config is then used in the webpack config files by both the ModuleFederationPlugin and MFLiveReloadPlugin plugins.

• Building Micro-Frontends, by Luca Mezzalira

• Webpack Module Federation

• Micro-frontends, by Martin Fowler

• Add fallback for when a MFE fails
• Automate port number assigment when generating a new remote (MFE)
• Add CI integration example