Webpack Module Federation shared-routing Example?

[hskrishandi]

In webpack module federation of shared-routing example, we can have a scenario where we can run a dev server on a child App, yet also able to access the rest of the App.

The way it works is that:

Inside parent App:

• Parent app acts as a host, which has children App remotes with their routing. This is contained in its entry file.

// child applications
const DashboardService = React.lazy(() => import('dashboard/DashboardService'));
const OrderService = React.lazy(() => import('order/OrderService'));
const ProfilePage = React.lazy(() => import('profile/ProfilePage'));

const App = () => (
  <div>
    <Header>
    <React.Suspense fallback={'Loading'}>
      <Routes>
        <Route path="dashboard/*" element={<DashboardService />} />
        <Route path="orders/*" element={<OrderService />} />
        <Route path="profile/*" element={<ProfilePage />} />
      </Routes>
    </React.Suspense>
  </div>
)

• Parent app also exposes this entry file. (Hence the parent can also act as a remote)

Inside child App:

• Child app exposes entry file of its application.
• However, in the entry file for the dev-server, the child App imports the parent App's exposed entry file. And since the parent App contains the routing for the whole App, it enables us to access the whole App from the child App. So here, the child App acts as a host, while the parent App acts as a remote.

const Parent = React.lazy(() => import('parent/Parent'));

function App() {
  return (
    <React.Suspense>
      <Parent />
    </React.Suspense>
  );
}

With this setup, it doesn't matter whether we run the dev-server from the parent App or any of the child App, as we will get the same whole App.

I wonder if the following is achievable in this Vite federation plugin? From the guides here, seems that the remote has to be run as a Vite preview mode, and it prevents the parent App from being able to import the child App in dev-server mode.