Support Webpack Module Federation

Created by: raspy8766

Module Federation Support

Description

This PR aims to support the Webpack 5 module federation plugin natively in CRA. Micro-frontends are becoming a more prevalent form of UI development for the enterprise environment. We love what create-react-app provides, but in order to get it working at the moment, we rely on these forked changes. Hopefully this PR has what you're looking for, if not I'm happy to make additional accommodations and open to suggestions.

Proposed Changes

• Add a new optional setupModuleFederation.js file that manages the webpack Module Federation plugin
• When the setupModuleFederation.js file is present, use the Module Federation plugin
• Since Micro-frontend apps do not typically have their own index.html (unless they're using iframes), the index.html file along with the public folder are now optional.

Testing

Setup

1. Execute the following bash script which performs the following:
   • Initializes a new CRA mfe app repo
   • Clones down and installs the forked repo
   • Installs local react-scripts from forked repo

yarn create react-app mfe-app && \
git clone https://github.com/HewlettPackard/create-react-app.git && \
yarn --cwd="./create-react-app" && \
yarn --cwd="./mfe-app" add file:../create-react-app/packages/react-scripts

Negative Test

1. In the mfe-app repo, run yarn start
2. Navigate to http://localhost:3000/webpack-dev-server and note the files listed appear as normal

Positive Test

1. Create a src/setupModuleFederation.js file with the following contents:

module.exports = {
  name: 'test',
  library: { type: 'var', name: 'test' },
  filename: 'remoteEntry.js',
  exposes: { '.': './src/App.js' }
}

2. Navigate to the mfe-app repo
3. Delete the public/index.html file (optional)
4. Run yarn start
5. Navigate to http://localhost:3000/webpack-dev-server and notice the remoteEntry.js file

Screenshots

Webpack served assets:

remoteEntry.js file: