Lerna & Module Federation for AWS micro-frontends

  • A high level AWS architecture introduction
  • A CDK implementation

MonoRepo setup

  • 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

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

Package name

Webpack Configuration

The App shell

Script injection

React Lazy-loading and Suspence

Mounting Systems

  • 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

--

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

[Source Code]Vue3 — Utility Function In 5 Minutes

Add Rollup Configuration | Building an NPM Package with TypeScript

Apollo South

Performance testing for your NodeJs API

How to Set Up a Back End Project Using TypeScript and Node.js

Install multiple Node versions in windows

25 CSS Best Practices you Need To Know in 2021

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

More from Medium

How to fix the annoying “Ensure there is only one instance of graphql” error

A complete AWS Architecture for Module-federated micro-frontends

The Concepts, Architecture and Implementation of Micro Services and Micro Frontends (6º chapter)

Solving Flaky React Unit Tests