Configuring calls made by micro-frontends to be routed to their domain

[Scar-face]

Hi Team

I have created a shell application with one remote app to start with using the module federation.
The remote app is loaded dynamically using the init method from @module-federation/enhanced/runtime. This is to support deployment of applications across multiple environments.

The remote app makes API calls to backend services to get data.
The remote app and shell each run as part of spring boot application that has an spring cloud gateway to route requests to the services.

When I launch the shell application it loads the remote app, the API calls made by the remote app uses the shells domain to initiate calls, this would fail as the shell don't have the routes defined. To make it work I have opened routes on the shell app.

This approach introduces a dependency between the remote and the shell app.

Does module federation give me a way to execute code after the remote entry file is imported in the shell, this will give me the opportunity to configure the axios instance to use the remote host name (assuming I can get access to the remoteEntry url), thereby allowing the calls made by the micro frontend to go to remote app domain.

Please do let me know if there is a better way to address this.

[ScriptedAlchemy]

Why not federated the api as well so shell can become any backend in the network.

Otherwise you need to come up with your own convention for dealing with relative urls. It's beyond the scope of Module loading.

Our solution is federated backend so host can serve api and there is no need for multiple servers.

Otherwise it will be some variation of hardcodeing or providing some json or env var to define the endpoints.

Either way; that is beyond the scope of import()

You can look at our runtime plugins section on the docs site. See if any existing lifecycle is useful

[Scar-face]

Thank you for sharing your approach.
We have a situation involving two levels of module federation. Host App 3, managed by Team 3, uses a module-federated application to integrate the application components. Host App 3 employs an API gateway to handle all API requests (based on your suggestion).

Structure:

• Host App 3 (Team 3) with an API Gateway
  • Remote App 1
  • Remote App 2

Host App 1 and Host App 2 incorporate Host App 3 through module federation. In this setup, Host App 3 will end up routing requests to the container that hosts the application when axios is not overridden.

Structure:

• Host App 1 (Team 1)
  • Host App 3 (Team 3)
• Host App 2 (Team 2)
  • Host App 3 (Team 3)

To ensure that Host App 3 directs requests to its own API gateway, it seems necessary to override the host name.

[ScriptedAlchemy]

If you don't use a federated backend via node federation. Then you'd need some way to switch between the backends. Maybe runtime plugin on the remote that sets the prefix on the window or something?