Versions Compared


  • This line was added.
  • This line was removed.
  • Formatting was changed.


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

  1. openmrs-module-bahmniapps now 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 *.min.js and *.min.css.

  2. Common code across all MFEs is handled as a unique entry point called shared which results in shared.min.js and shared.min.css files. This, along with react + react-dom files, needs to be loaded before loading any micro-frontend.

  3. 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.nextUi which 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 openmrs-module-bahmniapps repository.

  4. 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.

  5. At bahmniapps/micro-frontends/ there will be one WebPack entry point for every remote micro-frontend.

    1. 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.

    2. The adapted react components will each lazily load corresponding remote react components using remotEntry.js at run time.

    3. 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

  1. ModuleFederationPlugin which allows WebPack to reference remote modules

  2. Suspense techniques in react which allows lazy loading of remote react components

  3. react2angular which adapts react components into angularJs components