API based Remote Module Loading is an example application that showcases the dynamic control over the loading of remote modules in a web application using the Module Federation plugin. The application is divided into two segments: the host application and the remote application. The host application features a local button, and it also loads a button from the remote application.
- Runtime Plugin: A runtime plugin that controls the loading rules for shared modules.
- Switch remotes by clicking button: The ability to upgrade or downgrade applications or remote urls dynamically
- Exposing Button Components:
app1,app2, andapp3expose different button components for demonstration purposes. Clicking the button onapp1dynamically loads eitherapp2orapp3, simulating the replacement of one remote with another, which could be a different version of the remote like a deployed version.
This is the runtime plugin that controls the loading rules for module federation.
To give the application a spin, run pnpm start. This command will build and serve app1, app2, and app3 on ports 3001, 3002, and 3003 respectively.
For running tests in interactive mode, execute npm run cypress:debug from the root directory of the project. This will open the Cypress Test Runner and allow you to run tests interactively. More info about "How to run tests"
To build the app and run tests in headless mode, run yarn e2e:ci. This command will build the app and run tests for this workspace in headless mode. If tests fail, Cypress will create a cypress directory in the sample root folder with screenshots and videos.
"Best Practices, Rules and more interesting information here