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 ofapp1
andapp2
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.
- (Optional) Select node version with node version manager by running
nvm use
. The repo has been battle-tested with v16 Node.js version. - Install deps by running
npm install
. Since the repo is based on npm workspaces the command will install deps for all MFEs. - Start apps by running
npm start
.
The setup is inspired to https://github.com/StephenGrider/mfe.