frontend: Try to use remote EmbeddedApp

frontend/package.json

@@ -12,7 +12,7 @@
     "start2": "VITE_CJS_IGNORE_WARNING=true REACT_APP_ENABLED_FEATURES=SINGLE_SIGN_ON,REASSIGN_PARTITIONS vite",
     "build": "tsc && npm run lint && vite build",
     "build-local-test": "tsc && npm run lint && REACT_APP_BUSINESS=true REACT_APP_CONSOLE_GIT_SHA=abc123 REACT_APP_CONSOLE_GIT_REF=local REACT_APP_BUILD_TIMESTAMP=32503680000 REACT_APP_DEV_HINT=true vite build",
-    "serve": "vite preview --port 3004",
+    "serve": "vite preview --port 3004 --strictPort",
     "test": "TZ=GMT jest --coverage --watchAll=false",
     "test:dev": "TZ=GMT jest --coverage --watchAll",
     "lint": "eslint \"./src/**/*.{ts,tsx}\" --cache",
@@ -66,6 +66,7 @@
     "vite-tsconfig-paths": "^4.2.2"
   },
   "devDependencies": {
+    "@originjs/vite-plugin-federation": "^1.3.3",
     "@swc/helpers": "^0.5.3",
     "@swc/jest": "^0.2.29",
     "@testing-library/jest-dom": "^6.1.4",

frontend/src/EmbeddedApp.tsx

@@ -9,7 +9,7 @@
  * by the Apache License, Version 2.0
  */
 
- import { useEffect } from 'react';
+import React from 'react';
 import { BrowserRouter } from 'react-router-dom';
 
 /* start global stylesheets */
@@ -27,7 +27,7 @@ import './assets/fonts/kumbh-sans.css';
 import { appGlobal } from './state/appGlobal';
 
 import { SetConfigArguments, setup, embeddedAvailableRoutesObservable } from './config';
-import HistorySetter from './components/misc/HistorySetter';
+// import HistorySetter from './components/misc/HistorySetter';
 import AppContent from './components/layout/Content';
 import { observer } from 'mobx-react';
 import { ChakraProvider, redpandaTheme, redpandaToastOptions } from '@redpanda-data/ui';
@@ -51,11 +51,17 @@ export interface EmbeddedProps extends SetConfigArguments {
      * we don't prematurely render console if the higher-order-component Console.tsx might rerender.
      * In the future we might decide to use memo() as well
      */
-    isConsoleReadyToMount?: boolean;
+    // isConsoleReadyToMount?: boolean;
 }
 
 function EmbeddedApp({ basePath, ...p }: EmbeddedProps) {
-    useEffect(() => {
+    console.log('Remote App EmbeddedApp p: ', p);
+
+    React.useEffect(() => {
+        console.log('Remote EmbeddedApp React.useEffect');
+    }, []);
+
+    React.useEffect(() => {
         const shellNavigationHandler = (event: Event) => {
             const pathname = (event as CustomEvent<string>).detail;
             const { pathname: currentPathname } = appGlobal.history.location;
@@ -75,13 +81,13 @@ function EmbeddedApp({ basePath, ...p }: EmbeddedProps) {
 
     setup(p);
 
-    if (!p.isConsoleReadyToMount) {
-        return null;
-    }
+    // if (!p.isConsoleReadyToMount) {
+    //     return null;
+    // }
 
     return (
         <BrowserRouter basename={basePath}>
-            <HistorySetter />
+            {/* <HistorySetter /> */}
             <ChakraProvider theme={redpandaTheme} toastOptions={redpandaToastOptions}>
                 <AppContent />
             </ChakraProvider>

frontend/vite.config.ts

@@ -20,6 +20,9 @@ import svgrPlugin from 'vite-plugin-svgr';
 import { createHtmlPlugin } from 'vite-plugin-html';
 import tsconfigPaths from 'vite-tsconfig-paths';
 import muteWarningsPlugin, { warningsToIgnore } from './vite/muteWarningsPlugin';
+
+import federation from '@originjs/vite-plugin-federation';
+
 const ENV_PREFIX = 'REACT_APP_';
 
 // https://vitejs.dev/config/
@@ -36,6 +39,14 @@ export default defineConfig(({ mode }) => {
           }
         }
       }),
+      federation({
+        name: 'remote_app',
+        filename: 'remoteEntry.js',
+        exposes: {
+          './EmbeddedApp': './src/EmbeddedApp',
+        },
+        shared: ['react', 'react-dom']
+      }),
       envCompatible({ prefix: ENV_PREFIX }),
       checker({
         overlay: false,
@@ -80,6 +91,12 @@ export default defineConfig(({ mode }) => {
     build: {
       outDir: 'build',
       sourcemap: true,
+      modulePreload: {
+        polyfill: false,
+      },
+      target: 'esnext',
+      minify: false,
+      cssCodeSplit: false,
        // TODO: we need to look at how Vite/Rollup sets source maps vs CRA.
       // Can we differentiate between production vs dev build?
     },