Module Federation Deployment Configuration Part II
From my previous videos Module Federation – Micro frontend architecture | nextjs there are some comments regarding how to handle multiples environments and how to transfer data from the shell application to modules, in this document I’m going to share some of the learning and issues that I and my team had during the development.
Before getting into details let’s first describe the architecture of our application.
The diagram above is the global architecture of the application.
MyApp is a shell application that combines all local modules and remote modules.
- Local modules: those are the modules created locally (is not necessary, all modules can be remote)
- Remote modules: those are external applications, hosted in another domain and another project.
The main idea is to have the shell application and module pointing to the same environments
In order to select the right environment configuration we can use an environment variable in our CI/CD CURRENT_ENV
Configuration selector
An example of the Dev configuration, each environment should have the same structure pointing to a different environment
Select Configuration
After creating in our local environment .env => CURRENT_ENV=dev
During the BUILD-TIME, Webpack will compile the application with the references of the remote modules, and during the RUN-TIME the module will be loaded from the selected environment
Share data from the Shell application to the remote modules
In order to share data between modules, the workaround was to create a custom NPM package and use the power of React Context API using the context we’re able to transfer data through the React tree, and for that, we need to share the dependency in our module federation configuration and use the advance Webpack configuration.
Example: share-context is our custom npm package with a React provider and hooks
Is important also to understand and use carefully the advanced Webpack eager configuration to learn more about it Webpack Eager Consumption
After installing the provider in our shell application, we can use the hooks in our remote modules to access and share any information.
Low Environment
Production Environment
