...
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
Widget Connector | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|
|
Architecture diagram
...
Overall flow
openmrs-module-bahmniapps
now contains a separate folder for the react micro-frontend source called/micro-frontends
. Built files from this folder are written toui/app/micro-frontends-dist/
folder so that the angularJs applications can refer to them. These files are typically*.min.js
and*.min.css
.Common code across all MFEs is handled as a unique entry point called
shared
which results inshared.min.js
andshared.min.css
files. 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 calledbahmni.mfe.nextUi
which can be added as dependency to your angularJs module when you includenext-ui.min.*
files in your angualJs entry. Since these components don’t have remotes, they will need to be built and updated along sideopenmrs-module-bahmniapps
repository.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.js
file which will be used for loading these remote components. Most likely, this web server would proxied within the Bahmni proxy.At
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.js
at run time.These will be built as
<name-of-entry>.min.js
and<name-of-entry>.min.css
which 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
...