Module Federation Plugin

MFE — Micro Frontends is the popular architecture nowadays used in many applications. This concept is similar to micro services where different individual services are hosted and maintained differently. Similar to that even front end applications can be developed, deployed and maintained separately. In this architecture there will be an application which is called as host which can consume different applications which are called micro frontends. With the help of module federation plugin available in webpack, we can define which file or component needs to be exposed from the application. Based on this webpack is going to create a separate build to expose the mentioned file. In the host application we can define the exposed file and its location in webpack. We can load the remote files either during the build or we can load them dynamically.
Most of the code can be found in official documentation but my intention of this blog is to mention the issues which I have come across when consuming a MFE which is developed by a separate team.

1. The first issue which we have faced is CSP — Content security policy issue. We were unaware in the front that this can be an issue. Since the mfe is developed by a separate team and they hosted in their own domain, browser has restricted our application to download js files from their domain because of CSP. So, we had to allow all their domains to resolve this issue.
2. The next one is CORS — Cross origin resource sharing. The idea of creating mfe is that it can be used within various applications.
   The mfe we have consumed has developed all their backend api’s in their domain. So, in this scenario we are consuming the mfe in a separate domain and trying to call MFE related api from the host application. Since, we are requesting a resource which is in other domain browser has blocked our request mentioning the CORS issue.
   During development we can create a proxy for CRA apps which stands between browser & network. It intercepts the requests and can change the origin.
   This link can help you in setting up a proxy — https://create-react-app.dev/docs/proxying-api-requests-in-development/
   But in production we have resolved this by adding our origins in MFE api’s CORS policy.
3. Another issue which we faced is related to styles. Our host application uses a separate library and MFE uses a separate library. When we consumed MFE all our stylings got overridden. So, we have used the concept of shadow dom. With this feature the MFE will be hosted on a shadow dom container which is completely isolated from the host applications. Stylings from host will not effect MFE or vice versa.
   Shadow-Dom creation can be found here — https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM