This solution also involves separating out the angularJs adapter code into the
openmrs-module-bahmniapps repository so that these dynamic react modules do not need to be build with any sort of angularjs dependencies and can be set up as pure React projects.
Community call explaining this solution
openmrs-module-bahmniappsnow contains a separate folder for the react micro-frontend source called
/micro-frontends. Built files from this folder are written to
ui/app/micro-frontends-dist/folder so that the angularJs applications can refer to them. These files are typically
Common code across all MFEs is handled as a unique entry point called
sharedwhich results in
shared.min.cssfiles. This, along with react + react-dom files, needs to be loaded before loading any micro-frontend.
A local MFE is available called
next-ui. This is meant to house react components which don’t need to have their own repositories. angularJs adapters over the main entry components results in an angularJs module called
bahmni.mfe.nextUiwhich can be added as dependency to your angularJs module when you include
next-ui.min.*files in your angualJs entry. Since these components don’t have remotes, they will need to be built and updated along side
For remote MFEs, there is one repository each. These repositories will have exposed certain entry components through the ModuleFederationPlugin. Once these repositories are built and deployed, they will be serving a
remoteEntry.jsfile which will be used for loading these remote components. Most likely, this web server would proxied within the Bahmni proxy.
bahmniapps/micro-frontends/there will be one WebPack entry point for every remote micro-frontend.
This will house angular adapter code for react components resulting in an angular module called
bahmni.mfe.<name-of-entry>. This needs to be injected into the Bahmni module requiring this micro-frontend.
The adapted react components will each lazily load corresponding remote react components using
remotEntry.jsat run time.
These will be built as
<name-of-entry>.min.csswhich can be loaded by the Bahmni module requiring this micro-frontend.
Tools & Techniques used
ModuleFederationPlugin which allows WebPack to reference remote modules
Suspense techniques in react which allows lazy loading of remote react components
react2angular which adapts react components into angularJs components