Header and Footer MFE render on initial load but display 404 on route navigation

[rborole06]

Hey,
I have created 4 apps masterApp, Header, Footer, Table and wanted to render Header and Footer always irrespective of route and Table component should get loaded on navigating to /table route.

pastebin code for masterApp/routes/layout.tsx - https://pastebin.com/4BbhYrSe

pastebin code for masterApp/routes/page.tsx - https://pastebin.com/sKkY4fv7

1. While initial load everything works perfectly fine.

2. If Heder and Footer are rendered as MFE before and after <Outlet /> and clicked on Load table route then Table app is getting rendered but Header and Footer displays 404, not sure why?

3. If rendered text before and after <Outlet />with Math.random() number (just to see if it rerenders or not on click of /table route) then in that case that text persist as is w/o changing randomly generated number. It means it is not rerendering.

Not able to get where am I going wrong for having 2 types of behaviour. In case of rendering Header and Footer as MFE, they also should not rerender or display 404 and should persist.

Pastebin for masterApp modern.runtime.ts config - https://pastebin.com/WPG3RWB7

I am not sure if configuring the router is really required or not otherwise navigating to /table would not have loaded Table MFE which is working currently, maybe because of below setup (files inside routes folder based on conventional routing)

Tried lot of other options suggested by Github copilot but none of them is working and stuck here since few days and would appreciate any help.

Let me know if need any more details to debug the issue.

Thanks.

[rborole06]

@zllkjc Request to take a look at this. Its almost more than 2 week but no update on thread. Is it the problem of the way question is framed. Eagerly waiting for this to resolve. Tried lot of ways but no solution, no example in doc about how to persist any component across route change.
Also https://modernjs.dev/guides/topic-detail/micro-frontend/c02-development.html doc looks quite messy to me in terms of how to create conventional and self controlled based routing apps.

Please correct if wrong anywhere

[zllkjc]

sorry for missing this discussion.

I think the issue is caused by the header and footer using conventional routing. Conventional routing defaults to using React Router, which generates frontend routes.

I believe your header and footer apps only have src/routes/page.tsx, meaning they only have the / route. When the masterApp switches to /table, a 404 occurs.

You can use src/App.tsx instead, which by default won't have frontend routing.

[rborole06]

do you mean use self controlled routing in masterApp using src/App.tsx?

[zllkjc]

no, using it in header and footer

[zllkjc]

Hey, Is this problem has been solved ?

[rborole06]

Hey, I quickly checked and looks working fine but did not get time to verify once again to make sure. Allow some time, will get back on this within next 1/2 days

[rborole06]

@zllkjc I think I manage to resolve issue after adding App.tsx to Header MFE (Link)
Now trying to load Table MFE by navigating to /table from Header with self controlled routing in table App.tsx
but same works with static text in table/src/App.tsx
What could be wrong here?

I think the issue is caused by the header and footer using conventional routing. Conventional routing defaults to using React Router, which generates frontend routes.

Does it mean when having multiple MFE they must implement self controlled routing.
I would prefer conventional routing as per recommend in Note section.

When you say react router generates frontend routes using conventional approach
does it mean it cannot render route which will try to load MFE on any Link click?

I believe your header and footer apps only have src/routes/page.tsx, meaning they only have the / route. When the masterApp switches to /table, a 404 occurs.

is this required to know that which MFE to load from that particular child MFE?

Sorry I'm deviating from the original question but just trying to understand the things as a whole

[zllkjc]

I feel there was a misunderstanding between us.

I noticed your code uses Garfish, but I'm unsure if you intended to use Module Federation or Garfish. Garfish is an early micro-frontend solution in Modern.js that works at the application level, meaning each sub-application (like Header, Footer, Table) exists as a separate application.

When using Garfish, if your sub-application has frontend routing (whether using "conventional routing" or "self-controlled routing"), the sub-application will detect route changes when the main application changes routes. If you want to use Garfish but don't want sub-applications to experience frontend route changes, you shouldn't add frontend routing in the sub-applications. You can write it directly like this:

// Header's App.tsx
export default () => {
  return (
     <div>Header App inside route {Math.random()}</div>} />
  );
};

The Table application is the same.

However, in this scenario, there's actually no need to use Garfish, because your Header, Footer, and Table don't need to provide any application capabilities. I think you can use Module Federation to export these modules, or perhaps that's what you intended to use all along, but took the wrong approach.

---

Generally, there's no need to use Garfish. The common scenario is when the main application serves as a skeleton, providing elements like sidebars and top bars, while the core parts are applications developed by other teams. You would typically use Garfish only when you need to collaborate separately.

Module Federation also provides application-level module capabilities. For more details, you can refer to:

• https://modernjs.dev/guides/topic-detail/module-federation/application.html
• https://module-federation.io/practice/bridge/react-bridge.html

[rborole06]

I'm unsure if you intended to use Module Federation or Garfish.

I intended to use micro frontend and then module federation as an incremental approach.

Garfish is an early micro-frontend solution in Modern.js that works at the application level, meaning each sub-application (like Header, Footer, Table) exists as a separate application.

Ok then based on this and other comments I would try for module federation.

But meanwhile I'm curious to know is it possible to navigate from sub-application (lets say Header / Footer) to masterApp/home page or loading another sub-application (lets say Table) in core part w/o full page reload and using any one approach (Garfish / Module Federation)?

Thanks for explaining the things.

[zllkjc]

Yes, both methods are possible, but you need to ensure that under this route, the main/sub application (which is the consumer and producer in MF) can both display content.

For example, when you visit the /table page, you should let the main application display things like the Sidebar, but the core content should be from the sub-application. The sub-application should display the Table UI under /table, not /, or /home.

[rborole06]

Ok as mentioned above,
I created two apps masterApp & loginApp (as remote app) using module federation.
masterApp has routes/login route with $.tsx (conventional route). Also created header (with login button to load login remote app) from same app.
loginApp is setup to load /login and /login/register routes using routes/layout.tsx, routes/page.tsx and routes/register/$.tsx respectively.

Initially everything works perfectly fine. The issue is when I am on /login/register route and then try to navigate to /login from header login button it changes the route in browser but do not load login form and registration form still can be seen.

Let me know if any code/config reference required but expectation is if login button works fine at initial load then why not once navigated to /login/register

Looks like I am lacking in routing. Any directions what could be wrong here?