@nx/react 17.1.2 → 17.2.0-beta.1

package/mf/dynamic-federation.d.ts

@@ -0,0 +1,4 @@
+export type ResolveRemoteUrlFunction = (remoteName: string) => string | Promise<string>;
+export declare function setRemoteUrlResolver(_resolveRemoteUrl: ResolveRemoteUrlFunction): void;
+export declare function setRemoteDefinitions(definitions: Record<string, string>): void;
+export declare function loadRemoteModule(remoteName: string, moduleName: string): Promise<any>;

package/mf/dynamic-federation.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.loadRemoteModule = exports.setRemoteDefinitions = exports.setRemoteUrlResolver = void 0;
+let remoteUrlDefinitions;
+let resolveRemoteUrl;
+const remoteModuleMap = new Map();
+const remoteContainerMap = new Map();
+let initialSharingScopeCreated = false;
+function setRemoteUrlResolver(_resolveRemoteUrl) {
+    resolveRemoteUrl = _resolveRemoteUrl;
+}
+exports.setRemoteUrlResolver = setRemoteUrlResolver;
+function setRemoteDefinitions(definitions) {
+    remoteUrlDefinitions = definitions;
+}
+exports.setRemoteDefinitions = setRemoteDefinitions;
+async function loadRemoteModule(remoteName, moduleName) {
+    const remoteModuleKey = `${remoteName}:${moduleName}`;
+    if (remoteModuleMap.has(remoteModuleKey)) {
+        return remoteModuleMap.get(remoteModuleKey);
+    }
+    const container = remoteContainerMap.has(remoteName)
+        ? remoteContainerMap.get(remoteName)
+        : await loadRemoteContainer(remoteName);
+    const factory = await container.get(moduleName);
+    const Module = factory();
+    remoteModuleMap.set(remoteModuleKey, Module);
+    return Module;
+}
+exports.loadRemoteModule = loadRemoteModule;
+const fetchRemoteModule = (url, remoteName) => {
+    return new Promise((resolve, reject) => {
+        const script = document.createElement('script');
+        script.src = url;
+        script.type = 'text/javascript';
+        script.async = true;
+        script.onload = () => {
+            const proxy = {
+                get: (request) => window[remoteName].get(request),
+                init: (arg) => {
+                    try {
+                        window[remoteName].init(arg);
+                    }
+                    catch (e) {
+                        console.error(`Failed to initialize remote ${remoteName}`, e);
+                        reject(e);
+                    }
+                },
+            };
+            resolve(proxy);
+        };
+        script.onerror = () => reject(new Error(`Remote ${remoteName} not found`));
+        document.head.appendChild(script);
+    });
+};
+async function loadRemoteContainer(remoteName) {
+    if (!resolveRemoteUrl && !remoteUrlDefinitions) {
+        throw new Error('Call setRemoteDefinitions or setRemoteUrlResolver to allow Dynamic Federation to find the remote apps correctly.');
+    }
+    if (!initialSharingScopeCreated) {
+        initialSharingScopeCreated = true;
+        await __webpack_init_sharing__('default');
+    }
+    const remoteUrl = remoteUrlDefinitions
+        ? remoteUrlDefinitions[remoteName]
+        : await resolveRemoteUrl(remoteName);
+    let containerUrl = remoteUrl;
+    if (!remoteUrl.endsWith('.mjs') && !remoteUrl.endsWith('.js')) {
+        containerUrl = `${remoteUrl}${remoteUrl.endsWith('/') ? '' : '/'}remoteEntry.js`;
+    }
+    const container = await fetchRemoteModule(containerUrl, remoteName);
+    await container.init(__webpack_share_scopes__.default);
+    remoteContainerMap.set(remoteName, container);
+    return container;
+}

package/mf/index.d.ts

@@ -0,0 +1 @@
+export { loadRemoteModule, setRemoteDefinitions, setRemoteUrlResolver, } from './dynamic-federation';

package/mf/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setRemoteUrlResolver = exports.setRemoteDefinitions = exports.loadRemoteModule = void 0;
+var dynamic_federation_1 = require("./dynamic-federation");
+Object.defineProperty(exports, "loadRemoteModule", { enumerable: true, get: function () { return dynamic_federation_1.loadRemoteModule; } });
+Object.defineProperty(exports, "setRemoteDefinitions", { enumerable: true, get: function () { return dynamic_federation_1.setRemoteDefinitions; } });
+Object.defineProperty(exports, "setRemoteUrlResolver", { enumerable: true, get: function () { return dynamic_federation_1.setRemoteUrlResolver; } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "17.1.2",
+  "version": "17.2.0-beta.1",
   "private": false,
   "description": "The React plugin for Nx contains executors and generators for managing React applications and libraries within an Nx workspace. It provides:\n\n\n- Integration with libraries such as Jest, Cypress, and Storybook.\n\n- Generators for applications, libraries, components, hooks, and more.\n\n- Library build support for publishing packages to npm or other registries.\n\n- Utilities for automatic workspace refactoring.",
   "repository": {
@@ -37,11 +37,11 @@
     "file-loader": "^6.2.0",
     "minimatch": "3.0.5",
     "tslib": "^2.3.0",
-    "@nx/devkit": "17.1.2",
-    "@nx/js": "17.1.2",
-    "@nx/eslint": "17.1.2",
-    "@nx/web": "17.1.2",
-    "@nrwl/react": "17.1.2"
+    "@nx/devkit": "17.2.0-beta.1",
+    "@nx/js": "17.2.0-beta.1",
+    "@nx/eslint": "17.2.0-beta.1",
+    "@nx/web": "17.2.0-beta.1",
+    "@nrwl/react": "17.2.0-beta.1"
   },
   "publishConfig": {
     "access": "public"

package/src/executors/module-federation-dev-server/module-federation-dev-server.impl.d.ts

@@ -6,6 +6,7 @@ type ModuleFederationDevServerOptions = WebDevServerOptions & {
     static?: boolean;
     isInitialHost?: boolean;
     parallel?: number;
+    staticRemotesPort?: number;
 };
 export default function moduleFederationDevServer(options: ModuleFederationDevServerOptions, context: ExecutorContext): AsyncIterableIterator<{
     success: boolean;

package/src/executors/module-federation-dev-server/module-federation-dev-server.impl.js

@@ -7,6 +7,8 @@ const module_federation_1 = require("@nx/webpack/src/utils/module-federation");
 const async_iterable_1 = require("@nx/devkit/src/utils/async-iterable");
 const wait_for_port_open_1 = require("@nx/web/src/utils/wait-for-port-open");
 const child_process_1 = require("child_process");
+const path_1 = require("path");
+const fs_1 = require("fs");
 function getBuildOptions(buildTarget, context) {
     const target = (0, devkit_1.parseTargetString)(buildTarget, context);
     const buildOptions = (0, devkit_1.readTargetOptions)(target, context);
@@ -14,62 +16,46 @@ function getBuildOptions(buildTarget, context) {
         ...buildOptions,
     };
 }
-async function* moduleFederationDevServer(options, context) {
-    // Force Node to resolve to look for the nx binary that is inside node_modules
-    const nxBin = require.resolve('nx/bin/nx');
-    const currIter = options.static
-        ? (0, file_server_impl_1.default)({
-            ...options,
-            parallel: false,
-            withDeps: false,
-            spa: false,
-            cors: true,
-        }, context)
-        : (0, dev_server_impl_1.default)(options, context);
-    const p = context.projectsConfigurations.projects[context.projectName];
-    const buildOptions = getBuildOptions(options.buildTarget, context);
-    if (!options.isInitialHost) {
-        return yield* currIter;
+function startStaticRemotesFileServer(remotes, context, options) {
+    let shouldMoveToCommonLocation = false;
+    let commonOutputDirectory;
+    for (const app of remotes.staticRemotes) {
+        const outputPath = context.projectGraph.nodes[app].data.targets['build'].options.outputPath;
+        const directoryOfOutputPath = (0, path_1.dirname)(outputPath);
+        if (!commonOutputDirectory) {
+            commonOutputDirectory = directoryOfOutputPath;
+        }
+        else if (commonOutputDirectory !== directoryOfOutputPath) {
+            shouldMoveToCommonLocation = true;
+        }
     }
-    const moduleFederationConfig = (0, module_federation_1.getModuleFederationConfig)(buildOptions.tsConfig, context.root, p.root, 'react');
-    const remotes = (0, module_federation_1.getRemotes)(options.devRemotes, options.skipRemotes, moduleFederationConfig, {
-        projectName: context.projectName,
-        projectGraph: context.projectGraph,
-        root: context.root,
-    });
-    devkit_1.logger.info(`NX Building ${remotes.staticRemotes.length} static remotes...`);
-    await new Promise((res) => {
-        const staticProcess = (0, child_process_1.fork)(nxBin, [
-            'run-many',
-            `--target=build`,
-            `--projects=${remotes.staticRemotes.join(',')}`,
-            ...(context.configurationName
-                ? [`--configuration=${context.configurationName}`]
-                : []),
-            ...(options.parallel ? [`--parallel=${options.parallel}`] : []),
-        ], {
-            cwd: context.root,
-            stdio: ['ignore', 'pipe', 'pipe', 'ipc'],
-        });
-        staticProcess.stdout.on('data', (data) => {
-            const ANSII_CODE_REGEX = /[\u001b\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g;
-            const stdoutString = data.toString().replace(ANSII_CODE_REGEX, '');
-            if (stdoutString.includes('Successfully ran target build')) {
-                staticProcess.stdout.removeAllListeners('data');
-                devkit_1.logger.info(`NX Built ${remotes.staticRemotes.length} static remotes`);
-                res();
-            }
-        });
-        staticProcess.stderr.on('data', (data) => devkit_1.logger.info(data.toString()));
-        staticProcess.on('exit', (code) => {
-            if (code !== 0) {
-                throw new Error(`Remote failed to start. See above for errors.`);
-            }
-        });
-        process.on('SIGTERM', () => staticProcess.kill('SIGTERM'));
-        process.on('exit', () => staticProcess.kill('SIGTERM'));
-    });
-    let isCollectingStaticRemoteOutput = true;
+    if (shouldMoveToCommonLocation) {
+        commonOutputDirectory = (0, path_1.join)(devkit_1.workspaceRoot, 'tmp/static-remotes');
+        for (const app of remotes.staticRemotes) {
+            const outputPath = context.projectGraph.nodes[app].data.targets['build'].options
+                .outputPath;
+            (0, fs_1.cpSync)(outputPath, commonOutputDirectory, {
+                force: true,
+                recursive: true,
+            });
+        }
+    }
+    const staticRemotesIter = (0, file_server_impl_1.default)({
+        cors: true,
+        watch: false,
+        staticFilePath: commonOutputDirectory,
+        parallel: false,
+        spa: false,
+        withDeps: false,
+        host: options.host,
+        port: options.staticRemotesPort,
+        ssl: options.ssl,
+        sslCert: options.sslCert,
+        sslKey: options.sslKey,
+    }, context);
+    return staticRemotesIter;
+}
+async function startDevRemotes(remotes, context) {
     const devRemoteIters = [];
     for (const app of remotes.devRemotes) {
         const remoteProjectServeTarget = context.projectGraph.nodes[app].data.targets['serve'];
@@ -85,40 +71,86 @@ async function* moduleFederationDevServer(options, context) {
                 : {}),
         }, context));
     }
+    return devRemoteIters;
+}
+async function buildStaticRemotes(remotes, nxBin, context, options) {
+    devkit_1.logger.info(`NX Building ${remotes.staticRemotes.length} static remotes...`);
+    const mappedLocationOfRemotes = {};
     for (const app of remotes.staticRemotes) {
-        const remoteProjectServeTarget = context.projectGraph.nodes[app].data.targets['serve-static'];
-        const isUsingModuleFederationDevServerExecutor = remoteProjectServeTarget.executor.includes('module-federation-dev-server');
-        let outWithErr = [];
+        mappedLocationOfRemotes[app] = `http${options.ssl ? 's' : ''}://${options.host}:${options.staticRemotesPort}/${app}`;
+    }
+    process.env.NX_MF_DEV_SERVER_STATIC_REMOTES = JSON.stringify(mappedLocationOfRemotes);
+    await new Promise((res) => {
         const staticProcess = (0, child_process_1.fork)(nxBin, [
-            'run',
-            `${app}:serve-static${context.configurationName ? `:${context.configurationName}` : ''}`,
-            ...(isUsingModuleFederationDevServerExecutor
-                ? [`--isInitialHost=false`]
+            'run-many',
+            `--target=build`,
+            `--projects=${remotes.staticRemotes.join(',')}`,
+            ...(context.configurationName
+                ? [`--configuration=${context.configurationName}`]
                 : []),
+            ...(options.parallel ? [`--parallel=${options.parallel}`] : []),
         ], {
             cwd: context.root,
             stdio: ['ignore', 'pipe', 'pipe', 'ipc'],
         });
         staticProcess.stdout.on('data', (data) => {
-            if (isCollectingStaticRemoteOutput) {
-                outWithErr.push(data.toString());
-            }
-            else {
-                outWithErr = null;
+            const ANSII_CODE_REGEX = /[\u001b\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g;
+            const stdoutString = data.toString().replace(ANSII_CODE_REGEX, '');
+            if (stdoutString.includes('Successfully ran target build')) {
                 staticProcess.stdout.removeAllListeners('data');
+                devkit_1.logger.info(`NX Built ${remotes.staticRemotes.length} static remotes`);
+                res();
             }
         });
         staticProcess.stderr.on('data', (data) => devkit_1.logger.info(data.toString()));
         staticProcess.on('exit', (code) => {
             if (code !== 0) {
-                devkit_1.logger.info(outWithErr.join(''));
                 throw new Error(`Remote failed to start. See above for errors.`);
             }
         });
         process.on('SIGTERM', () => staticProcess.kill('SIGTERM'));
         process.on('exit', () => staticProcess.kill('SIGTERM'));
+    });
+}
+async function* moduleFederationDevServer(options, context) {
+    const initialStaticRemotesPorts = options.staticRemotesPort;
+    options.staticRemotesPort ??= options.port + 1;
+    // Force Node to resolve to look for the nx binary that is inside node_modules
+    const nxBin = require.resolve('nx/bin/nx');
+    const currIter = options.static
+        ? (0, file_server_impl_1.default)({
+            ...options,
+            parallel: false,
+            withDeps: false,
+            spa: false,
+            cors: true,
+        }, context)
+        : (0, dev_server_impl_1.default)(options, context);
+    const p = context.projectsConfigurations.projects[context.projectName];
+    const buildOptions = getBuildOptions(options.buildTarget, context);
+    if (!options.isInitialHost) {
+        return yield* currIter;
+    }
+    const moduleFederationConfig = (0, module_federation_1.getModuleFederationConfig)(buildOptions.tsConfig, context.root, p.root, 'react');
+    const remotes = (0, module_federation_1.getRemotes)(options.devRemotes, options.skipRemotes, moduleFederationConfig, {
+        projectName: context.projectName,
+        projectGraph: context.projectGraph,
+        root: context.root,
+    });
+    if (remotes.devRemotes.length > 0 && !initialStaticRemotesPorts) {
+        options.staticRemotesPort = options.devRemotes.reduce((portToUse, r) => {
+            const remotePort = context.projectGraph.nodes[r].data.targets['serve'].options.port;
+            if (remotePort >= portToUse) {
+                return remotePort + 1;
+            }
+        }, options.staticRemotesPort);
     }
-    return yield* (0, async_iterable_1.combineAsyncIterables)(currIter, ...devRemoteIters, (0, async_iterable_1.createAsyncIterable)(async ({ next, done }) => {
+    await buildStaticRemotes(remotes, nxBin, context, options);
+    const devRemoteIters = await startDevRemotes(remotes, context);
+    const staticRemotesIter = remotes.staticRemotes.length > 0
+        ? startStaticRemotesFileServer(remotes, context, options)
+        : undefined;
+    return yield* (0, async_iterable_1.combineAsyncIterables)(currIter, ...devRemoteIters, ...(staticRemotesIter ? [staticRemotesIter] : []), (0, async_iterable_1.createAsyncIterable)(async ({ next, done }) => {
         if (!options.isInitialHost) {
             done();
             return;
@@ -128,15 +160,14 @@ async function* moduleFederationDevServer(options, context) {
             return;
         }
         try {
-            await Promise.all(remotes.remotePorts.map((port) => 
-            // Allow 20 minutes for each remote to start, which is plenty of time but we can tweak it later if needed.
-            // Most remotes should start in under 1 minute.
-            (0, wait_for_port_open_1.waitForPortOpen)(port, {
+            const portsToWaitFor = staticRemotesIter
+                ? [options.staticRemotesPort, ...remotes.remotePorts]
+                : [...remotes.remotePorts];
+            await Promise.all(portsToWaitFor.map((port) => (0, wait_for_port_open_1.waitForPortOpen)(port, {
                 retries: 480,
                 retryDelay: 2500,
                 host: 'localhost',
             })));
-            isCollectingStaticRemoteOutput = false;
             devkit_1.logger.info(`NX All remotes started, server ready at http://localhost:${options.port}`);
             next({ success: true, baseUrl: `http://localhost:${options.port}` });
         }

package/src/executors/module-federation-dev-server/schema.json

@@ -105,6 +105,10 @@
     "parallel": {
       "type": "number",
       "description": "Max number of parallel processes for building static remotes"
+    },
+    "staticRemotesPort": {
+      "type": "number",
+      "description": "The port at which to serve the file-server for the static remotes."
     }
   }
 }

package/src/generators/application/lib/update-jest-config.js

@@ -8,15 +8,14 @@ function updateSpecConfig(host, options) {
         return;
     }
     (0, devkit_1.updateJson)(host, `${options.appProjectRoot}/tsconfig.spec.json`, (json) => {
-        json.types = json.types || [];
+        const compilerOptions = json.compilerOptions ?? {};
+        const types = compilerOptions.types ?? [];
         if (options.style === 'styled-jsx') {
-            json.types.push('@nx/react/typings/styled-jsx.d.ts');
+            types.push('@nx/react/typings/styled-jsx.d.ts');
         }
-        json.types = [
-            ...json.types,
-            '@nx/react/typings/cssmodule.d.ts',
-            '@nx/react/typings/image.d.ts',
-        ];
+        types.push('@nx/react/typings/cssmodule.d.ts', '@nx/react/typings/image.d.ts');
+        compilerOptions.types = types;
+        json.compilerOptions = compilerOptions;
         return json;
     });
     if (options.unitTestRunner !== 'jest') {

package/src/generators/host/files/common/src/app/__fileName__.tsx__tmpl__

@@ -3,12 +3,20 @@ import * as React from 'react';
 import NxWelcome from "./nx-welcome";
 <% } %>
 import { Link, Route, Routes } from 'react-router-dom';
+<% if (dynamic) { %>
+import { loadRemoteModule } from '@nx/react/mf';
+<% } %>
 
 <% if (remotes.length > 0) { %>
 <% remotes.forEach(function(r) { %>
+<% if (dynamic) { %>
+ const <%= r.className %> = React.lazy(() => loadRemoteModule('<%= r.fileName %>', './Module'))
+<% } else  { %>
  const <%= r.className %> = React.lazy(() => import('<%= r.fileName %>/Module'));
+<% } %>
  <% }); %>
 <% } %>
+
 export function App() {
   return (
     <React.Suspense fallback={null}>

package/src/generators/host/files/common/tsconfig.lint.json__tmpl__

@@ -0,0 +1,19 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": [
+        "node",
+        "@nx/react/typings/cssmodule.d.ts",
+        "@nx/react/typings/image.d.ts"
+    ]
+  },
+  "include": [
+    "src/**/*.js",
+    "src/**/*.jsx",
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "webpack.config.ts",
+    "webpack.prod.config.ts"
+  ]
+}

package/src/generators/host/files/module-federation/module-federation.config.js__tmpl__

@@ -1,6 +1,21 @@
 module.exports = {
   name: '<%= projectName %>',
+  /**
+   * 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: [
-  <% remotes.forEach(function(r) {%> "<%= r.fileName %>", <% }); %>
+    <% if (static) { 
+         remotes.forEach(function(r) { %> "<%= r.fileName %>", <% }); 
+       }
+    %>
   ],
-};
+};

package/src/generators/host/files/module-federation/src/main.ts__tmpl__

@@ -1 +1,10 @@
-import('./bootstrap');
+<% if (dynamic) { %>
+    import { setRemoteDefinitions } from '@nx/react/mf';
+
+    fetch('/assets/module-federation.manifest.json')
+    .then((res) => res.json())
+    .then(definitions => setRemoteDefinitions(definitions))
+    .then(() =>  import('./bootstrap').catch(err => console.error(err)));
+<% } else { %>
+    import('./bootstrap').catch(err => console.error(err));
+<% } %>

package/src/generators/host/files/module-federation-ssr/module-federation.server.config.js__tmpl__

@@ -6,8 +6,11 @@
 const moduleFederationConfig = {
     name: '<%= projectName %>',
     remotes: [
-    <% remotes.forEach(function(r) {%> "<%= r.fileName %>", <% }); %>
-    ],
+       <% if (static) { 
+         remotes.forEach(function(r) { %> "<%= r.fileName %>", <% }); 
+       }
+    %>
+  ],
 };
 
 module.exports = moduleFederationConfig;

package/src/generators/host/files/module-federation-ssr-ts/module-federation.server.config.ts__tmpl__

@@ -3,8 +3,11 @@ import { ModuleFederationConfig } from '@nx/webpack';
 const config: ModuleFederationConfig = {
     name: '<%= projectName %>',
     remotes: [
-    <% remotes.forEach(function(r) {%> "<%= r.fileName %>", <% }); %>
-    ],
+      <% if (static) { 
+         remotes.forEach(function(r) { %> "<%= r.fileName %>", <% }); 
+       }
+    %>
+  ],
 };
 
 export default config;

package/src/generators/host/files/module-federation-ts/module-federation.config.ts__tmpl__

@@ -2,9 +2,24 @@ import { ModuleFederationConfig } from '@nx/webpack';
 
 const config: ModuleFederationConfig = {
     name: '<%= projectName %>',
+    /**
+     * 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: [
-        <% remotes.forEach(function(r) {%> "<%= r.fileName %>", <% }); %>
-],
+            <% if (static) { 
+         remotes.forEach(function(r) { %> "<%= r.fileName %>", <% }); 
+       }
+    %>
+  ],
 };
 
 export default config;

package/src/generators/host/files/module-federation-ts/src/main.ts__tmpl__

@@ -1 +1,10 @@
-import('./bootstrap');
+<% if (dynamic) { %>
+    import { setRemoteDefinitions } from '@nx/react/mf';
+
+    fetch('/assets/module-federation.manifest.json')
+    .then((res) => res.json())
+    .then(definitions => setRemoteDefinitions(definitions))
+    .then(() =>  import('./bootstrap').catch(err => console.error(err)));
+<% } else { %>
+    import('./bootstrap').catch(err => console.error(err));
+<% } %>

package/src/generators/host/host.js

@@ -23,6 +23,7 @@ async function hostGeneratorInternal(host, schema) {
     const options = {
         ...(await (0, normalize_options_1.normalizeOptions)(host, schema, '@nx/react:host')),
         typescriptConfiguration: schema.typescriptConfiguration ?? true,
+        dynamic: schema.dynamic ?? false,
     };
     const initTask = await (0, application_1.default)(host, {
         ...options,
@@ -51,6 +52,8 @@ async function hostGeneratorInternal(host, schema) {
                 skipFormat: true,
                 projectNameAndRootFormat: options.projectNameAndRootFormat,
                 typescriptConfiguration: options.typescriptConfiguration,
+                dynamic: options.dynamic,
+                host: options.name,
             });
             tasks.push(remoteTask);
             remotePort++;
@@ -72,6 +75,9 @@ async function hostGeneratorInternal(host, schema) {
         projectConfig.targets.server.options.webpackConfig = (0, devkit_1.joinPathFragments)(projectConfig.root, `webpack.server.config.${options.typescriptConfiguration ? 'ts' : 'js'}`);
         (0, devkit_1.updateProjectConfiguration)(host, options.projectName, projectConfig);
     }
+    if (!options.setParserOptionsProject) {
+        host.delete((0, devkit_1.joinPathFragments)(options.appProjectRoot, 'tsconfig.lint.json'));
+    }
     if (!options.skipFormat) {
         await (0, devkit_1.formatFiles)(host);
     }

package/src/generators/host/lib/add-module-federation-files.d.ts

@@ -1,5 +1,6 @@
 import { NormalizedSchema } from '../schema';
-export declare function addModuleFederationFiles(host: any, options: NormalizedSchema, defaultRemoteManifest: {
+import { Tree } from '@nx/devkit';
+export declare function addModuleFederationFiles(host: Tree, options: NormalizedSchema, defaultRemoteManifest: {
     name: string;
     port: number;
 }[]): void;

package/src/generators/host/lib/add-module-federation-files.js

@@ -2,11 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.addModuleFederationFiles = void 0;
 const devkit_1 = require("@nx/devkit");
-const path_1 = require("path");
 function addModuleFederationFiles(host, options, defaultRemoteManifest) {
     const templateVariables = {
         ...(0, devkit_1.names)(options.name),
         ...options,
+        static: !options?.dynamic,
         tmpl: '',
         remotes: defaultRemoteManifest.map(({ name, port }) => {
             return {
@@ -15,24 +15,36 @@ function addModuleFederationFiles(host, options, defaultRemoteManifest) {
             };
         }),
     };
+    const projectConfig = (0, devkit_1.readProjectConfiguration)(host, options.name);
+    const pathToMFManifest = (0, devkit_1.joinPathFragments)(projectConfig.sourceRoot, 'assets/module-federation.manifest.json');
     // Module federation requires bootstrap code to be dynamically imported.
     // Renaming original entry file so we can use `import(./bootstrap)` in
     // new entry file.
-    host.rename((0, path_1.join)(options.appProjectRoot, 'src/main.tsx'), (0, path_1.join)(options.appProjectRoot, 'src/bootstrap.tsx'));
-    (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, `../files/common`), options.appProjectRoot, templateVariables);
+    host.rename((0, devkit_1.joinPathFragments)(options.appProjectRoot, 'src/main.tsx'), (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'src/bootstrap.tsx'));
+    (0, devkit_1.generateFiles)(host, (0, devkit_1.joinPathFragments)(__dirname, `../files/common`), options.appProjectRoot, templateVariables);
     const pathToModuleFederationFiles = options.typescriptConfiguration
         ? 'module-federation-ts'
         : 'module-federation';
     // New entry file is created here.
-    (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, `../files/${pathToModuleFederationFiles}`), options.appProjectRoot, templateVariables);
-    if (options.typescriptConfiguration) {
-        const pathToWebpackConfig = (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'webpack.config.js');
-        const pathToWebpackProdConfig = (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'webpack.config.prod.js');
-        if (host.exists(pathToWebpackConfig)) {
-            host.delete(pathToWebpackConfig);
+    (0, devkit_1.generateFiles)(host, (0, devkit_1.joinPathFragments)(__dirname, `../files/${pathToModuleFederationFiles}`), options.appProjectRoot, templateVariables);
+    function deleteFileIfExists(host, filePath) {
+        if (host.exists(filePath)) {
+            host.delete(filePath);
         }
-        if (host.exists(pathToWebpackProdConfig)) {
-            host.delete(pathToWebpackProdConfig);
+    }
+    function processWebpackConfig(options, host, fileName) {
+        const pathToWebpackConfig = (0, devkit_1.joinPathFragments)(options.appProjectRoot, fileName);
+        deleteFileIfExists(host, pathToWebpackConfig);
+    }
+    if (options.typescriptConfiguration) {
+        processWebpackConfig(options, host, 'webpack.config.js');
+        processWebpackConfig(options, host, 'webpack.config.prod.js');
+    }
+    if (options.dynamic) {
+        processWebpackConfig(options, host, 'webpack.config.prod.js');
+        processWebpackConfig(options, host, 'webpack.config.prod.ts');
+        if (!host.exists(pathToMFManifest)) {
+            host.write(pathToMFManifest, '{}');
         }
     }
 }

package/src/generators/host/lib/setup-ssr-for-host.js

@@ -13,6 +13,7 @@ async function setupSsrForHost(tree, options, appName, defaultRemoteManifest) {
         : 'module-federation-ssr';
     (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, `../files/${pathToModuleFederationSsrFiles}`), project.root, {
         ...options,
+        static: !options?.dynamic,
         remotes: defaultRemoteManifest.map(({ name, port }) => {
             return {
                 ...(0, devkit_1.names)(name),

package/src/generators/host/schema.d.ts

@@ -25,6 +25,7 @@ export interface Schema {
   unitTestRunner: 'jest' | 'vitest' | 'none';
   minimal?: boolean;
   typescriptConfiguration?: boolean;
+  dynamic?: boolean;
 }
 
 export interface NormalizedSchema extends Schema {

package/src/generators/host/schema.json

@@ -74,6 +74,11 @@
       "enum": ["eslint"],
       "default": "eslint"
     },
+    "dynamic": {
+      "type": "boolean",
+      "description": "Should the host application use dynamic federation?",
+      "default": false
+    },
     "skipFormat": {
       "description": "Skip formatting files.",
       "type": "boolean",

package/src/generators/init/init.js

@@ -48,8 +48,8 @@ async function reactInitGenerator(host, schema) {
     setDefault(host);
     if (!schema.e2eTestRunner || schema.e2eTestRunner === 'cypress') {
         (0, devkit_1.ensurePackage)('@nx/cypress', versions_1.nxVersion);
-        const { cypressInitGenerator } = await Promise.resolve().then(() => require('@nx/cypress/src/generators/init/init'));
-        const cypressTask = await cypressInitGenerator(host, {});
+        const { cypressInitGenerator } = (await Promise.resolve().then(() => require('@nx/cypress/src/generators/init/init')));
+        const cypressTask = await cypressInitGenerator(host, schema);
         tasks.push(cypressTask);
     }
     if (!schema.skipPackageJson) {

package/src/generators/remote/files/module-federation/module-federation.config.js__tmpl__

@@ -1,5 +1,8 @@
 module.exports = {
    name: '<%= projectName %>',
+   <% if (dynamic) { %>
+   library: { type: 'var', name: '<%= projectName %>'},
+   <% } %>
    exposes: {
      './Module': './src/remote-entry.ts',
    },

package/src/generators/remote/files/module-federation-ssr-ts/tsconfig.lint.json__tmpl__

@@ -0,0 +1,19 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": [
+        "node",
+        "@nx/react/typings/cssmodule.d.ts",
+        "@nx/react/typings/image.d.ts"
+    ]
+  },
+  "include": [
+    "src/**/*.js",
+    "src/**/*.jsx",
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "webpack.config.ts",
+    "webpack.prod.config.ts"
+  ]
+}

package/src/generators/remote/files/module-federation-ts/module-federation.config.ts__tmpl__

@@ -2,6 +2,9 @@ import {ModuleFederationConfig} from '@nx/webpack';
 
 const config: ModuleFederationConfig = {
     name: '<%= projectName %>',
+    <% if (dynamic) { %>
+   library: { type: 'var', name: '<%= projectName %>'},
+   <% } %>
     exposes: {
         './Module': './src/remote-entry.ts',
     },

package/src/generators/remote/files/module-federation-ts/tsconfig.lint.json__tmpl__

@@ -0,0 +1,19 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": [
+        "node",
+        "@nx/react/typings/cssmodule.d.ts",
+        "@nx/react/typings/image.d.ts"
+    ]
+  },
+  "include": [
+    "src/**/*.js",
+    "src/**/*.jsx",
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "webpack.config.ts",
+    "webpack.prod.config.ts"
+  ]
+}

package/src/generators/remote/lib/add-remote-to-dynamic-host.d.ts

@@ -0,0 +1,2 @@
+import { Tree } from '@nx/devkit';
+export declare function addRemoteToDynamicHost(tree: Tree, remoteName: string, remotePort: number, pathToMfManifest: string): void;

package/src/generators/remote/lib/add-remote-to-dynamic-host.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addRemoteToDynamicHost = void 0;
+function addRemoteToDynamicHost(tree, remoteName, remotePort, pathToMfManifest) {
+    const current = tree.read(pathToMfManifest, 'utf8');
+    tree.write(pathToMfManifest, JSON.stringify({
+        ...JSON.parse(current),
+        [remoteName]: `http://localhost:${remotePort}`,
+    }));
+}
+exports.addRemoteToDynamicHost = addRemoteToDynamicHost;

package/src/generators/remote/remote.js

@@ -10,6 +10,7 @@ const update_module_federation_project_1 = require("../../rules/update-module-fe
 const setup_ssr_1 = require("../setup-ssr/setup-ssr");
 const setup_ssr_for_remote_1 = require("./lib/setup-ssr-for-remote");
 const setup_tspath_for_remote_1 = require("./lib/setup-tspath-for-remote");
+const add_remote_to_dynamic_host_1 = require("./lib/add-remote-to-dynamic-host");
 function addModuleFederationFiles(host, options) {
     const templateVariables = {
         ...(0, devkit_1.names)(options.name),
@@ -44,6 +45,7 @@ async function remoteGeneratorInternal(host, schema) {
     const options = {
         ...(await (0, normalize_options_1.normalizeOptions)(host, schema, '@nx/react:remote')),
         typescriptConfiguration: schema.typescriptConfiguration ?? false,
+        dynamic: schema.dynamic ?? false,
     };
     const initAppTask = await (0, application_1.default)(host, {
         ...options,
@@ -75,6 +77,14 @@ async function remoteGeneratorInternal(host, schema) {
         projectConfig.targets.server.options.webpackConfig = (0, devkit_1.joinPathFragments)(projectConfig.root, `webpack.server.config.${options.typescriptConfiguration ? 'ts' : 'js'}`);
         (0, devkit_1.updateProjectConfiguration)(host, options.projectName, projectConfig);
     }
+    if (!options.setParserOptionsProject) {
+        host.delete((0, devkit_1.joinPathFragments)(options.appProjectRoot, 'tsconfig.lint.json'));
+    }
+    if (options.host && options.dynamic) {
+        const hostConfig = (0, devkit_1.readProjectConfiguration)(host, schema.host);
+        const pathToMFManifest = (0, devkit_1.joinPathFragments)(hostConfig.sourceRoot, 'assets/module-federation.manifest.json');
+        (0, add_remote_to_dynamic_host_1.addRemoteToDynamicHost)(host, options.name, options.devServerPort, pathToMFManifest);
+    }
     if (!options.skipFormat) {
         await (0, devkit_1.formatFiles)(host);
     }

package/src/generators/remote/schema.d.ts

@@ -26,6 +26,7 @@ export interface Schema {
   tags?: string;
   unitTestRunner: 'jest' | 'vitest' | 'none';
   typescriptConfiguration?: boolean;
+  dynamic?: boolean;
 }
 
 export interface NormalizedSchema extends ApplicationNormalizedSchema {

package/src/generators/remote/schema.json

@@ -28,6 +28,12 @@
       "type": "string",
       "enum": ["as-provided", "derived"]
     },
+    "dynamic": {
+      "type": "boolean",
+      "description": "Should the host application use dynamic federation?",
+      "default": false,
+      "x-priority": "internal"
+    },
     "style": {
       "description": "The file extension to be used for style files.",
       "type": "string",

package/src/module-federation/utils.js

@@ -8,6 +8,13 @@ function getFunctionDeterminateRemoteUrl(isServer = false) {
     const target = isServer ? 'serve-server' : 'serve';
     const remoteEntry = isServer ? 'server/remoteEntry.js' : 'remoteEntry.js';
     return function (remote) {
+        const mappedStaticRemotesFromEnv = process.env
+            .NX_MF_DEV_SERVER_STATIC_REMOTES
+            ? JSON.parse(process.env.NX_MF_DEV_SERVER_STATIC_REMOTES)
+            : undefined;
+        if (mappedStaticRemotesFromEnv && mappedStaticRemotesFromEnv[remote]) {
+            return `${mappedStaticRemotesFromEnv[remote]}/${remoteEntry}`;
+        }
         let remoteConfiguration = null;
         try {
             remoteConfiguration = (0, project_graph_1.readCachedProjectConfiguration)(remote);

package/src/rules/update-module-federation-project.d.ts

@@ -4,4 +4,5 @@ export declare function updateModuleFederationProject(host: Tree, options: {
     appProjectRoot: string;
     devServerPort?: number;
     typescriptConfiguration?: boolean;
+    dynamic?: boolean;
 }): GeneratorCallback;

package/src/rules/update-module-federation-project.js

@@ -14,6 +14,14 @@ function updateModuleFederationProject(host, options) {
         ...projectConfig.targets.build.configurations.production,
         webpackConfig: `${options.appProjectRoot}/webpack.config.prod.${options.typescriptConfiguration ? 'ts' : 'js'}`,
     };
+    // If host should be configured to use dynamic federation
+    if (options.dynamic) {
+        const pathToProdWebpackConfig = (0, devkit_1.joinPathFragments)(projectConfig.root, `webpack.prod.config.${options.typescriptConfiguration ? 'ts' : 'js'}`);
+        if (host.exists(pathToProdWebpackConfig)) {
+            host.delete(pathToProdWebpackConfig);
+        }
+        delete projectConfig.targets.build.configurations.production?.webpackConfig;
+    }
     projectConfig.targets.serve.executor =
         '@nx/react:module-federation-dev-server';
     projectConfig.targets.serve.options.port = options.devServerPort;