Micro frontend architecture

There are several approaches to building micro frontends, and the most common is NPM package, npm packages allow us to isolate dependencies and share between multiples applications, components like header, footer, library, and others, however, those components might not change frequently and is a good idea to use this approach. The main idea of micro frontend architecture is to decouple applications to allow multiples team to work isolated from each other and have the ability to compile the apps and deploy them independently.

What is Module Federation?

As Webpack feature to allow apps to share component and functionalities in the Runtime to dynamically load code between them. If an application consuming a federated module does not have a dependency needed by the federated code, Webpack will download the missing dependency from that federated build origin.

As Webpack describe the motivation behind on it as :

Multiple separate builds should form a single application. These separate builds should not have dependencies between each other, so they can be developed and deployed individually.

This is often known as Micro-Frontends, but is not limited to that.

Webpack is one of the most popular package bundle, available for react.js and vue.js

Watch my demo experiment video | module federation

https://www.youtube.com/embed/wMdt5W8sD54

Demo highlights

Requirements

Nextjs | Getting Started | Next.js

Module Federation for Nextjs | npm: @module-federation/nextjs-mf

Main App | Port: 3000

next.config.js

remotes we’re telling the app from where it can dynamically load the remote component, the file remoteEntry.js is created in the build time with all the references needed to be able to load the component dynamically.

exposes tell our container app to share those component with any other app. In this case we’re exposing Footer and Nav components.

Shop App | Port: 3001

remotes connect to main app using port 3000

exposes Catalog.js list component

extraOptions allow the app to expose all the pages exposePages

Víctor Santos