Micro Frontend (MFe) is a web application implementation design idea that breaks the traditional monolithic way of implementing large or mid-scale web applications. MFe allows teams to work separately with their frontend technology and addresses a common problem.
In this document, we’ll discuss an open source library single-SAP that helps to achieve the MFe design. Then, we’ll focus on how a single-SAP addresses basic questions regarding an MFe design.
There are other ways to accomplish the MFe design, but this application has continuously upgraded and is stable daily. Here is an example of an MFe design.
The root application needs to be shared by every MFe application. It has an HTML file that is a placeholder for all your MFe apps. The root application registers all the MFe apps and is responsible for bootstrapping, mounting, or unmounting the MFe into the DOM.
import { registerApplication, start } from 'single-spa';
The register application function is used to register all your MFe apps. The start function will not be bootstrapped, mounted, or unmounted until the application is loaded. The entire process is known as the configuration setting.
There are many different functions that provide more control over the flow of the design, such as the triggerAppChange, navigateToUrl, getMountedApps, getAppNames, getAppStatus, unloadApplication, unregisterApplication, addErrorHandler, removeErrorHandler, pathToActiveWhen etc. Note that the root app configuration is the most important step of the MFe design.
Home