Added routing communication in both ways

Author: InsideAmber

learnings/MFE-Routing.md

@@ -0,0 +1,210 @@
+🔹 Microfrontend Routing Requirements (Explained)
+
+1. Both the Container + Individual SubApps need routing features
+
+- The container app handles top-level navigation (e.g.,` /auth`, `/dashboard`).
+
+- Each sub-app may also have its own routes (`/auth/login`, `/auth/signup`).
+
+- Both must coexist without clashing.
+
+2. Sub-apps might need to add in new pages/routes all the time
+
+- Teams should be able to add or update routes inside their own microfrontend without modifying the container.
+
+- Example: Marketing team adds `/pricing` → should work without container changes.
+
+3. We might need to show two or more microfrontends at the same time
+
+- Sometimes, the container needs to render multiple MFEs together (e.g., Dashboard showing `Analytics + Notifications`).
+
+- Routing should allow parallel rendering.
+
+4. We want to use off-the-shelf routing solutions
+
+- Instead of building custom routing logic, we rely on libraries like React Router, Angular Router, Vue Router.
+
+- Each MFE can use the same routing library to simplify integration.
+
+5. We need navigation features for sub-apps in both hosted mode and in isolation
+
+- Sub-app must work standalone (`npm start`) with routing.
+
+- Sub-app must also work inside the container (`npm run serve`) without breaking.
+
+6. If different apps need to communicate about routing, it should be generic
+
+- Avoid hardcoding "container tells sub-app X".
+
+- Use events or history API so MFEs remain independent.
+
+- Example: If user navigates in container → sub-apps should respond via shared history object.
+
+Routing in MFE:
+
+```ascii
+                +------------------+
+                |    Container     |
+                |  (Global Routes) |
+                +------------------+
+                 /        |       \
+                /         |        \
+               v          v         v
+   +----------------+  +----------------+  +----------------+
+   |   SubApp A     |  |   SubApp B     |  |   SubApp C     |
+   |  (/auth/*)     |  | (/dashboard/*) |  | (/marketing/*) |
+   +----------------+  +----------------+  +----------------+
+
+[Features Needed]
+1. Container + SubApps both define routes
+2. SubApps can add new routes freely
+3. Multiple SubApps can render at same time
+4. Use off-the-shelf routers (React Router, etc.)
+5. SubApps work standalone & inside container
+6. Routing communication must be generic
+```
+
+🧩 Problem Setup
+
+- Container App
+
+  - Has a header with a logo → supposed to redirect to `/`.
+
+  - No routing logic in container (just renders sub-apps).
+
+- Marketing App
+
+  - Has its own routes:
+
+    - `/` → Landing Page
+
+    - `/pricing` → Pricing Page
+
+- What happens now?
+
+  - You navigate to `/pricing` (shows Pricing page ✅).
+
+  - You click Logo in Container → container changes URL to `/`.
+
+  - But UI still shows Pricing (❌), because Marketing App’s router didn’t notice container’s navigation.
+
+Why this happens?
+
+Since container has no routing logic, it doesn’t mount/unmount MFEs based on route.
+
+- Marketing is always mounted.
+
+- React Router inside Marketing listens to its own history instance.
+
+- But when Container changes URL → Marketing’s router doesn’t get updated (they are disconnected).
+
+Solution
+
+Yes – you do need routing logic at the container level (at least minimal).
+
+Two Approaches:
+
+1. Container controls which sub-app mounts (Recommended)
+
+- Container uses its own router (React Router, Vue Router, etc.).
+
+- Example:
+
+  - `/` → render Marketing (Landing)
+
+  - `/pricing` → render Marketing (Pricing)
+
+  - `/auth/*` → render Auth app
+
+This way → when logo navigates to `/`, container re-renders Marketing at root route → React Router inside Marketing will naturally show Landing.
+
+2. Share history between Container + SubApp (Advanced)
+
+- Instead of container routing, pass down a shared `history` object to sub-apps.
+
+- Container navigation (`/`) triggers same history object → Marketing router updates.
+
+- This requires wiring React Router in both places to the same history.
+
+Rule of Thumb
+
+- If container should control which microfrontend shows up → container must have routing logic.
+
+- If container is “dumb shell” and only loads one sub-app at a time → share history so both stay in sync.
+
+🔧 Fix for Your Case
+
+Since you said container has no routing but has a header with logo:
+
+- Best Fix → Add minimal routing in container:
+
+```tsx
+// ContainerApp.tsx
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import MarketingApp from "./MarketingApp";
+
+export default function ContainerApp() {
+  return (
+    <BrowserRouter>
+      <Header /> {/* Logo inside this navigates to "/" */}
+      <Routes>
+        <Route path="/*" element={<MarketingApp />} />
+      </Routes>
+    </BrowserRouter>
+  );
+}
+```
+
+Note: - in microfrontends we typically share either BrowserHistory or MemoryHistory, depending on how we want the container and child apps to sync.
+
+ASCII Diagram for this particular project router setup:
+
+```sql
+                +---------------------------+
+                |         CONTAINER         |
+                |   React Router (Browser)  |
+                |   Controls real URL bar   |
+                +-------------+-------------+
+                              |
+         -----------------------------------------------
+         |                                             |
++-------------------------+             +-------------------------+
+|       MARKETING         |             |          AUTH           |
+| React Router (Memory)   |             | React Router (Memory)   |
+| Local navigation only   |             | Local navigation only   |
+| Not changing URL bar    |             | Not changing URL bar    |
++-------------------------+             +-------------------------+
+
+```
+
+Why This Router Setup?
+
+In a microfrontend (MFE) system:
+
+- Container App is responsible for the overall application and controls the real browser URL. That’s why it uses Browser History (so the URL is synced, bookmarkable, reloadable).
+
+- Sub-apps (Marketing, Auth, etc.) are mounted inside the container. If they also tried to use `BrowserHistory`, multiple apps could fight over the URL at the same time.
+
+- To prevent this conflict, sub-apps use Memory History.
+
+  - MemoryHistory keeps routing changes local to the sub-app.
+
+  - When the container needs to know about navigation, the sub-app can “notify” the container.
+
+  - The container then decides if/when to update the actual browser history.
+
+This way, we get a clean separation:
+
+- Container = controls the real URL.
+
+- Sub-apps = handle their own routing internally without breaking others.
+
+**Benefits of this Approach**
+
+- Avoids conflicts → Only one app (the container) controls the real URL.
+
+- Isolation → Sub-apps can add/remove routes anytime without breaking container or other MFEs.
+
+- Flexibility → Container can decide when to sync sub-app navigation with the real URL.
+
+- Scalability → More MFEs can be added without changing routing strategy.

packages/container/config/webpack.dev.js

@@ -9,7 +9,7 @@ const devConfig = {
     devServer:{
         port:8080,
         historyApiFallback: {
-            index: 'index.html' // Fallback to index.html for SPA routing
+            index: '/index.html' // Fallback to index.html for SPA routing
         }
     },
     plugins:[

packages/container/src/components/MarketingApp.js

@@ -1,12 +1,23 @@
 import { mount } from "marketing/MarketingApp";   //marketing is remote module name and MarketingApp is the exposed module in marketing dev config
 import React, { useRef, useEffect } from "react";
+import { useHistory } from "react-router-dom";
 
 export default () => {
   const ref = useRef(null);
+  const history = useHistory();
 
   useEffect(() => {
-    mount(ref.current);
-  });
+    const {onParentNavigate} = mount(ref.current, {
+      onNavigate: ({pathname:nextPathname}) => {
+        const { pathname } = history.location;
+
+        if (pathname !== nextPathname){
+        history.push(nextPathname);
+        }
+      }
+    });
+    history.listen(onParentNavigate);
+  },[]);
 
   return <div ref={ref} />;
 };

packages/marketing/config/webpack.dev.js

@@ -9,7 +9,7 @@ const devConfig = {
     devServer:{
         port:8081,
         historyApiFallback: {
-            index: 'index.html' // Fallback to index.html for SPA routing
+            index: '/index.html' // Fallback to index.html for SPA routing
         }
     },
     plugins:[

packages/marketing/src/App.js

@@ -1,5 +1,5 @@
 import React from "react";
-import {Switch,Route, BrowserRouter} from "react-router-dom";
+import {Switch,Route, Router} from "react-router-dom";
 import {StylesProvider, createGenerateClassName} from "@material-ui/core/styles";
 
 import Landing from "./components/Landing";
@@ -9,17 +9,17 @@ const generateClassName = createGenerateClassName({
     productionPrefix: "ma",
 })
 
-export default () => {
+export default ({history}) => {
 
     return (
         <div>
             <StylesProvider generateClassName={generateClassName}>
-                <BrowserRouter>
+                <Router history={history}>
                     <Switch>
                         <Route exact path="/" component={Landing} />
                         <Route path="/pricing" component={Pricing} />
                     </Switch>
-                </BrowserRouter>
+                </Router>
             </StylesProvider>
         </div>
     )

packages/marketing/src/bootstrap.js

@@ -1,10 +1,27 @@
 import React from "react";
 import ReactDOM from "react-dom";
+import {createMemoryHistory, createBrowserHistory} from "history";
 import App from "./App";
 
 // Mount function to start up the app
-const mount = (el) => {
-  ReactDOM.render(<App/>, el);
+const mount = (el, { onNavigate,defaultHistory }) => {
+  const history = defaultHistory || createMemoryHistory();
+
+  if (onNavigate){
+  history.listen(onNavigate);
+  }
+
+  ReactDOM.render(<App history={history}/>, el);
+
+  return {
+    onParentNavigate({pathname: nextPathname}){
+      const { pathname } = history.location;
+
+      if(pathname !== nextPathname){
+       history.push(nextPathname);
+      } 
+    }
+  }
 };
 
 // If we are in devlopment and in isolation,
@@ -13,7 +30,7 @@ const mount = (el) => {
 if (process.env.NODE_ENV === "development") {
   const devRoot = document.querySelector("#_marketing-dev-root");
   if (devRoot) {
-    mount(devRoot);
+    mount(devRoot,{defaultHistory: createBrowserHistory()} );
   }
 }