Lerna & Module Federation for AWS micro-frontends

  • A high level AWS architecture introduction
  • A CDK implementation

MonoRepo setup

Our mono-repo contains all micro-frontends and their IaC in a single place, as shown below.

  • React Micro-frontends (mfe-apps) folders containing their independent implementation. One of them (mfe-app1 or parent) is the application shell orchestrating the other two micro-frontends (here also called child apps).
  • A cdk folder including IaC components presented in second article.
  • Lerna and package json files for micro-frontends’ dependencies and bootstrap.

Lerna

Lerna helps organizing mono-repo as workspaces where you define apps into packages. First you should initialize your project by running below commands:

npm i lerna -g
npx lerna init
  • In package.json you would fill typical dev and prod dependencies along with scripts such as:
“start”: “lerna run  — scope @dynamic-system-host/*  — parallel start”
  • In lerna.json you will specify type of npmClient used (either npm or yarn) and delegation to package structure to yarn by Yarn’s useWorkspaces.

The Child apps

The micro-frontends are very simple web app based on React and Webpack. You can check one example in below link.

Package name

By defining the package.json name field, you will instruct Lerna on what package to start (remember the scope parameter of the npm run start script).

Webpack Configuration

Module Federation plugin exposes the mfe-app2 micro-frontend to a remoteEntry.js which will bootstrap the App.js file as main entry point of the module.

The App shell

The app shell serves as container for the other micro-frontends, but how does Module Federation literally make this happen? Micro-frontends can be defined as Systems:

Script injection

When micro-frontends are rendered, a dynamic script gets simply injected in the HEAD tag of the page, via the useDynamicScript function. This script is the remoteEntry.js code generated by the Module Federation plugin, which allows us to load the micro-frontend.

React Lazy-loading and Suspence

The micro-frontend is loaded as a lazy component via the React.lazy. This renders a dynamic import as a regular component, supporting code-splitting. It requires a Promise which has to resolve to a Module being retrieved from a datasource or, in this case, the global window object.

Mounting Systems

Systems are mounted by providing three properties:

  • A remote url, the remoteEntry url script exposed by Module Federation
  • A scope - micro-frontend identifier
  • A module, the entry module to be loaded

Conclusion

This article concludes my quest to try to demonize the Module Federation plugin and the complexity behind adopting module federated micro-frontends, and see how feasible and scalable is to deploy and host them on AWS Cloud.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Antonio Lagrotteria

Antonio Lagrotteria

Engineering Manager | Architect | Team/Tech Lead with a passion for frontend, backend and cloud | AWS Community Builder