Added module federation

apps/portal/package.json

@@ -33,6 +33,7 @@
   "devDependencies": {
     "@babel/core": "^7.21.0",
     "@babel/preset-env": "^7.21.4",
+    "@originjs/vite-plugin-federation": "^1.2.2",
     "@types/lodash": "^4.14.191",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",

apps/portal/src/components/Investigation.tsx

@@ -6,6 +6,7 @@ import {
 } from '@edata-portal/core';
 import { Suspense } from 'react';
 import { Alert } from 'react-bootstrap';
+import { SessionViewer } from 'remoteApp/SessionViewer';
 
 export function Investigation() {
   const investigationId = usePath('investigationId');
@@ -17,6 +18,7 @@ export function Investigation() {
       </Suspense>
       <>
         Session Viewer Beamline and date (renderDataset)
+        <SessionViewer></SessionViewer>
         <br />
         <>Foreach Data viewer</>
       </>

apps/portal/vite.config.ts

@@ -2,13 +2,20 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import tsconfigPaths from 'vite-tsconfig-paths';
 import legacy from '@vitejs/plugin-legacy';
-
+import federation from '@originjs/vite-plugin-federation';
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
     react(),
     tsconfigPaths(),
     legacy({ targets: ['defaults', 'not IE 11', 'Chrome>= 70'] }),
+    federation({
+      name: 'app',
+      remotes: {
+        remoteApp: 'http://localhost:3001/assets/remoteEntry.js',
+      },
+      shared: ['react', 'react-dom'],
+    }),
   ],
   server: {
     port: 3000,

apps/session-viewer/package.json

@@ -4,25 +4,69 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
+    "dev": "vite --port 3001 --strictPort",
+    "build": "vite build",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "preview": "vite preview --port 3001 --strictPort"
   },
   "dependencies": {
+    "@babel/eslint-parser": "^7.19.1",
+    "@edata-portal/core": "workspace:*",
+    "@fortawesome/fontawesome-svg-core": "^6.3.0",
+    "@fortawesome/free-solid-svg-icons": "^6.3.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "lodash": "^4.17.21",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-bootstrap": "^2.7.2",
+    "react-dom": "^18.2.0",
+    "react-intersection-observer": "^9.4.3",
+    "react-router-dom": "^6.8.2"
   },
   "devDependencies": {
+    "@babel/core": "^7.21.0",
+    "@babel/preset-env": "^7.21.4",
+    "@originjs/vite-plugin-federation": "^1.2.2",
+    "@types/lodash": "^4.14.191",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
-    "@typescript-eslint/eslint-plugin": "^5.57.1",
-    "@typescript-eslint/parser": "^5.57.1",
-    "@vitejs/plugin-react": "^4.0.0",
-    "eslint": "^8.38.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.3.4",
-    "typescript": "^5.0.2",
-    "vite": "^4.3.2"
+    "@vitejs/plugin-legacy": "^4.0.2",
+    "@vitejs/plugin-react": "^3.1.0",
+    "eslint": "^8.36.0",
+    "prettier": "^2.8.6",
+    "terser": "^5.16.5",
+    "typescript": "^4.9.3",
+    "vite": "^4.2.0",
+    "vite-tsconfig-paths": "^4.0.7"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest",
+      "plugin:react/recommended",
+      "plugin:react/jsx-runtime"
+    ],
+    "rules": {
+      "react/no-unknown-property": "off",
+      "no-restricted-imports": [
+        "error",
+        {
+          "patterns": [
+            ".*"
+          ]
+        }
+      ]
+    },
+    "overrides": [
+      {
+        "files": [
+          "index.ts",
+          "index.tsx"
+        ],
+        "rules": {
+          "no-restricted-imports": "off"
+        }
+      }
+    ],
+    "root": true
   }
 }

apps/session-viewer/tsconfig.json

 {
+  "extends": "../../tsconfig.json",
+  "include": ["src"],
   "compilerOptions": {
-    "target": "ESNext",
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "baseUrl": "src",
+    "outDir": "dist",
+    "noEmit": true
   },
-  "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+  "exclude": ["../../packages/*"],
+  "references": [
+    { "path": "./tsconfig.node.json" },
+    { "path": "../../packages/core" }
+  ]
 }

apps/session-viewer/vite.config.ts

-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import federation from '@originjs/vite-plugin-federation';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
-})
+  plugins: [
+    react(),
+    federation({
+      name: 'remote_app',
+      filename: 'remoteEntry.js',
+      exposes: {
+        './SessionViewer': './src/components/SessionViewer',
+      },
+      shared: ['react', 'react-dom'],
+    }),
+  ],
+  build: {
+    modulePreload: false,
+    target: 'esnext',
+    minify: false,
+    cssCodeSplit: false,
+  },
+});