In this article, I will walk you through how to implement a micro frontends app with single-spa and module federation in Webpack.

Example Repository

Here is the final codebase on GitHub:

manakuro/micro-frontends-single-spa-module-federation

Micro Frontends

Micro frontends have been around since 2016 in front end developments. In a nutshell, the idea of micro frontends is to break down the monolith app into smaller, easier to build, and more maintainable pieces.

That allows you to:

• Deploy independently
• Use multiple UI frameworks (React, Vue.js, and Angular) in one place
• Decouple a piece of UI components from a large codebase

There are also drawbacks such as the complexity of the initial setup and performance issues by duplicated code, but single-spa and module federation can resolve them

#javascript