This example shows how to handle indipendent and nested routings in a MFE setup based on webpack-module-federation. The setup consists of:
app1
& app2
: apps using a browser history strategy when acting as hosts and an in-memory history strategy when acting as remotes.shell
: host app based on a browser history strategy that handles high-level routing. Shell routing determines mounting/unmounting of app1
and app2
remotes.The shell is the only component responsible for updating browser url. The two level of history strategies (browser + in-memory) are kept in sync through an event-based communication between shell and remotes.
nvm use
. The repo has been battle-tested with v16 Node.js version.npm install
. Since the repo is based on npm workspaces the command will install deps for all MFEs.npm start
.The setup is inspired to https://github.com/StephenGrider/mfe.