Separation of micro frontend runtimes in JHipster

Question

Assume we are having an microservice (MS) application containing of a bunch of micro frontends (MF).

I have a lack of understanding how the MFs shall be separated and how they shall be integrated into "ONE" application?

First lack of understanding with jhipster:

• if implementing a MF application you shall use a gateway application, so far so good
• but how to integrate the MFs into one app?
  Is it also a gateway application, which wraps the MFs into it?

I have added a illustration here:

https://drive.google.com/file/d/1oRrBefdfdyxL70zkikhtroF0ZyTVxklO/view

I want that the user is seeing one SPA. My lack of understandings are:

• So is the SPA node the gateway node, or I should pull up my gateway node at the SPA position?
• Or is the SPA a own node itself?
  like shown?
• are my runtime nodes correctly visualized for the MFs?
  the gray boxes shall visualize runtime nodes like docker containers

Answer 1

If you follow the usual JHipster implementation, backend and frontend are coupled (backend serves the frontend). So the Gateway is the SPA and each microservice is the microfrontend too. More advanced architecture shall be possible but not officially supported by JHipster.

A JHipster microfrontend application:

• is a microservice with a full featured frontend implementation.
• the frontend implementation uses module federation to use a shared application shell and only exposes entities components (menu and implementation).

The gateway (SPA) will consume all microfrontend's entities.