Module Federation in OneCX
Module Federation is a Webpack feature that enables the dynamic loading of separately built and deployed JavaScript applications.
In OneCX, it enables different applications microfrontends to be developed, built and deployed independently while still sharing code and dependencies at runtime.
This guide introduces module federation in OneCX, explains how to use and configure it in your applications.
Prerequisites
Before visiting this guide, let’s visit following concepts:
| Name | Description |
|---|---|
Static module bundler for JavaScript applications that supports module federation |
|
Enables scalable, independently deployable frontend architecture with runtime integration |
|
Technology used to render applications in OneCX shell |
|
Extends the concepts of micro services to the frontend world |
|
An innovative open-source platform solution enabling seamless microfrontends integration |
|
WebComponentModule, WebComponent script, webcomponent and Angular microfrontends |
Usage of Module Federation in OneCX
In OneCX, Module Federation is used to load microfrontends, expose reusable components, and for dependency sharing.
Following are important concepts where module federation is involved:
Name |
Description |
Preloaders register Module Federation share scopes |
|
Build-time and runtime negotiation of shared packages |
|
Load remote modules or components in slots |
OneCX Recommendations
The following documents describe how to configure and use Module Federation in OneCX.
Name |
Description |
Describes how to configure module federation in microfrontends |
| Bootstrapping your application to be loaded via Module Federation (including how the shell router loads it), configuring a custom authentication service, and configuring share scopes are now covered under Required Setup: see Expose a Remote Module, Configure Authentication, and Configure Remote Package Sharing. |