Add new files and update dependencies

.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+  "workbench.colorCustomizations": {
+    "activityBar.background": "#2B3106",
+    "titleBar.activeBackground": "#3C4408",
+    "titleBar.activeForeground": "#F9FCE5"
+  }
+}

apps/mehrzweck-e2e/cypress.config.ts → apps/container-e2e/cypress.config.ts

@@ -7,10 +7,10 @@ export default defineConfig({
     ...nxE2EPreset(__filename, {
       cypressDir: 'src',
       webServerCommands: {
-        default: 'nx run mehrzweck:serve',
-        production: 'nx run mehrzweck:preview',
+        default: 'nx run container:serve',
+        production: 'nx run container:preview',
       },
-      ciWebServerCommand: 'nx run mehrzweck:serve-static',
+      ciWebServerCommand: 'nx run container:serve-static',
     }),
     baseUrl: 'http://localhost:4200',
   },

apps/mehrzweck-e2e/project.json → apps/container-e2e/project.json

@@ -1,9 +1,9 @@
 {
-  "name": "mehrzweck-e2e",
+  "name": "container-e2e",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
-  "sourceRoot": "apps/mehrzweck-e2e/src",
+  "sourceRoot": "apps/container-e2e/src",
   "targets": {},
-  "implicitDependencies": ["mehrzweck"],
+  "implicitDependencies": ["container"],
   "tags": []
 }

apps/mehrzweck-e2e/src/e2e/app.cy.ts → apps/container-e2e/src/e2e/app.cy.ts

@@ -1,6 +1,6 @@
 import { getGreeting } from '../support/app.po';
 
-describe('mehrzweck-e2e', () => {
+describe('container-e2e', () => {
   beforeEach(() => cy.visit('/'));
 
   it('should display welcome message', () => {

apps/mehrzweck/jest.config.ts → apps/container/jest.config.ts

@@ -1,11 +1,11 @@
 /* eslint-disable */
 export default {
-  displayName: 'mehrzweck',
+  displayName: 'container',
   preset: '../../jest.preset.js',
   transform: {
     '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nx/react/plugins/jest',
     '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nx/react/babel'] }],
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
-  coverageDirectory: '../../coverage/apps/mehrzweck',
+  coverageDirectory: '../../coverage/apps/container',
 };

apps/container/module-federation.config.ts

@@ -0,0 +1,25 @@
+import { ModuleFederationConfig } from '@nx/webpack';
+
+const config: ModuleFederationConfig = {
+  name: 'container',
+  /**
+   * To use a remote that does not exist in your current Nx Workspace
+   * You can use the tuple-syntax to define your remote
+   *
+   * remotes: [['my-external-remote', 'https://nx-angular-remote.netlify.app']]
+   *
+   * You _may_ need to add a `remotes.d.ts` file to your `src/` folder declaring the external remote for tsc, with the
+   * following content:
+   *
+   * declare module 'my-external-remote';
+   *
+   */
+  remotes: [
+    ['genel-muhasebe', 'http://localhost:3005/remoteEntry.js']
+  ],
+  exposes: {
+    './App': 'apps/container/src/app/app',
+  },
+  };
+
+export default config;

apps/container/project.json

@@ -0,0 +1,93 @@
+{
+  "name": "container",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "apps/container/src",
+  "projectType": "application",
+  "targets": {
+    "build": {
+      "executor": "@nx/webpack:webpack",
+      "outputs": ["{options.outputPath}"],
+      "defaultConfiguration": "production",
+      "options": {
+        "compiler": "babel",
+        "outputPath": "dist/apps/container",
+        "index": "apps/container/src/index.html",
+        "baseHref": "/",
+        "main": "apps/container/src/main.ts",
+        "tsConfig": "apps/container/tsconfig.app.json",
+        "assets": [
+          "apps/container/src/favicon.ico",
+          "apps/container/src/assets"
+        ],
+        "styles": ["apps/container/src/styles.css"],
+        "scripts": [],
+        "webpackConfig": "apps/container/webpack.config.ts"
+      },
+      "configurations": {
+        "development": {
+          "extractLicenses": false,
+          "optimization": false,
+          "sourceMap": true,
+          "vendorChunk": true
+        },
+        "production": {
+          "fileReplacements": [
+            {
+              "replace": "apps/container/src/environments/environment.ts",
+              "with": "apps/container/src/environments/environment.prod.ts"
+            }
+          ],
+          "optimization": true,
+          "outputHashing": "all",
+          "sourceMap": false,
+          "namedChunks": false,
+          "extractLicenses": true,
+          "vendorChunk": false,
+          "webpackConfig": "apps/container/webpack.config.prod.ts"
+        }
+      }
+    },
+    "serve": {
+      "executor": "@nx/react:module-federation-dev-server",
+      "defaultConfiguration": "development",
+      "options": {
+        "buildTarget": "container:build",
+        "hmr": true,
+        "liveReload": true,
+        "watch": true,
+        "port": 3002
+      },
+      "configurations": {
+        "development": {
+          "buildTarget": "container:build:development",
+          "hmr": true,
+          "liveReload": true,
+          "watch": true,
+          "port": 3002
+        },
+        "production": {
+          "buildTarget": "container:build:production",
+          "hmr": false
+        }
+      }
+    },
+    "serve-static": {
+      "executor": "@nx/web:file-server",
+      "defaultConfiguration": "production",
+      "options": {
+        "buildTarget": "container:build",
+        "watch": false,
+        "port": 3002
+      },
+      "configurations": {
+        "development": {
+          "buildTarget": "container:build:development"
+        },
+        "production": {
+          "buildTarget": "container:build:production"
+        }
+      }
+    }
+  },
+  "tags": []
+}

apps/container/src/app/app.spec.tsx

@@ -0,0 +1,25 @@
+import { render } from '@testing-library/react';
+
+import { BrowserRouter } from 'react-router-dom';
+
+import App from './app';
+
+describe('App', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
+    );
+    expect(baseElement).toBeTruthy();
+  });
+
+  it('should have a greeting as the title', () => {
+    const { getByText } = render(
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
+    );
+    expect(getByText(/Welcome container/gi)).toBeTruthy();
+  });
+});

apps/container/src/app/app.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+import NxWelcome from './nx-welcome';
+
+import { Link, Route, Routes } from 'react-router-dom';
+
+export function App() {
+  return (
+    <React.Suspense fallback={null}>
+      <ul>
+        <li>
+          <Link to="/">1122222222</Link>
+        </li>
+      </ul>
+      <Routes>
+        <Route path="/" element={<NxWelcome title="container" />} />
+      </Routes>
+    </React.Suspense>
+  );
+}
+
+export default App;

apps/mehrzweck/src/app/nx-welcome.tsx → apps/container/src/app/nx-welcome.tsx

@@ -427,7 +427,7 @@ export function NxWelcome({ title }: { title: string }) {
         <div className="container">
           <div id="welcome">
             <h1>
-              <span> Hello there, </span>
+              <span> Hello there,22222 </span>
               Welcome {title} 👋
             </h1>
           </div>

apps/mehrzweck/src/main.tsx → apps/container/src/bootstrap.tsx

@@ -1,5 +1,6 @@
 import { StrictMode } from 'react';
 import * as ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
 
 import App from './app/app';
 
@@ -8,6 +9,8 @@ const root = ReactDOM.createRoot(
 );
 root.render(
   <StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </StrictMode>
 );

apps/mehrzweck/src/index.html → apps/container/src/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>Mehrzweck</title>
+    <title>Container</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
   </head>

apps/container/src/main.ts

@@ -0,0 +1 @@
+import('./bootstrap').catch((err) => console.error(err));

apps/container/webpack.config.prod.ts

@@ -0,0 +1,37 @@
+import { composePlugins, withNx } from '@nx/webpack';
+import { withReact } from '@nx/react';
+import { withModuleFederation } from '@nx/react/module-federation';
+import { ModuleFederationConfig } from '@nx/webpack';
+
+import baseConfig from './module-federation.config';
+
+const prodConfig: ModuleFederationConfig = {
+  ...baseConfig,
+  /*
+   * Remote overrides for production.
+   * Each entry is a pair of a unique name and the URL where it is deployed.
+   *
+   * e.g.
+   * remotes: [
+   *   ['app1', 'http://app1.example.com'],
+   *   ['app2', 'http://app2.example.com'],
+   * ]
+   *
+   * You can also use a full path to the remoteEntry.js file if desired.
+   *
+   * remotes: [
+   *   ['app1', 'http://example.com/path/to/app1/remoteEntry.js'],
+   *   ['app2', 'http://example.com/path/to/app2/remoteEntry.js'],
+   * ]
+   */
+  remotes: [
+    ['genel-muhasebe', 'http://localhost:3005/remoteEntry.js']
+  ]
+};
+
+// Nx plugins for webpack to build config object from Nx options and context.
+export default composePlugins(
+  withNx(),
+  withReact(),
+  withModuleFederation(prodConfig)
+);

apps/container/webpack.config.ts

@@ -0,0 +1,21 @@
+import { composePlugins, withNx, ModuleFederationConfig } from '@nx/webpack';
+import { withReact } from '@nx/react';
+import { withModuleFederation } from '@nx/react/module-federation';
+
+import baseConfig from './module-federation.config';
+
+const config: ModuleFederationConfig = {
+  ...baseConfig,
+};
+
+// Nx plugins for webpack to build config object from Nx options and context.
+export default composePlugins(
+  withNx(),
+  withReact(),
+  withModuleFederation(config),
+  (config) => {
+    return {
+      ...config,
+    };
+  }
+);