@nx/react 19.6.0-canary.20240814-6d83ae2 → 19.6.0-rc.0

package/migrations.json

@@ -41,6 +41,18 @@
       "version": "18.1.1-beta.0",
       "description": "Ensure targetDefaults inputs for task hashing when '@nx/webpack:webpack' is used are correct for Module Federation.",
       "factory": "./src/migrations/update-18-1-1/fix-target-defaults-inputs"
+    },
+    "update-19-6-0-turn-module-federation-dts-off": {
+      "cli": "nx",
+      "version": "19.6.0-beta.4",
+      "description": "Ensure Module Federation DTS is turned off by default.",
+      "factory": "./src/migrations/update-19-6-0/turn-off-dts-by-default"
+    },
+    "update-module-federation-ssr-server-file": {
+      "cli": "nx",
+      "version": "19.6.0-beta.4",
+      "description": "Update the server file for Module Federation SSR port value to be the same as the 'serve' target port value.",
+      "factory": "./src/migrations/update-19-6-0/update-ssr-server-port"
     }
   },
   "packageJsonUpdates": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "19.6.0-canary.20240814-6d83ae2",
+  "version": "19.6.0-rc.0",
   "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, Vitest, Playwright, 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": {
@@ -39,14 +39,15 @@
     "minimatch": "9.0.3",
     "tslib": "^2.3.0",
     "@module-federation/enhanced": "~0.2.3",
-    "@nx/devkit": "19.6.0-canary.20240814-6d83ae2",
-    "@nx/js": "19.6.0-canary.20240814-6d83ae2",
-    "@nx/eslint": "19.6.0-canary.20240814-6d83ae2",
-    "@nx/web": "19.6.0-canary.20240814-6d83ae2",
-    "@nrwl/react": "19.6.0-canary.20240814-6d83ae2"
+    "@nx/devkit": "19.6.0-rc.0",
+    "@nx/js": "19.6.0-rc.0",
+    "@nx/eslint": "19.6.0-rc.0",
+    "@nx/web": "19.6.0-rc.0",
+    "@nrwl/react": "19.6.0-rc.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "type": "commonjs"
+  "type": "commonjs",
+  "types": "./index.d.ts"
 }

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

@@ -9,8 +9,6 @@ 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 cache_directory_1 = require("nx/src/utils/cache-directory");
 const node_child_process_1 = require("node:child_process");
-const node_path_1 = require("node:path");
-const node_fs_1 = require("node:fs");
 const fs_1 = require("fs");
 const path_1 = require("path");
 const start_remote_proxies_1 = require("@nx/webpack/src/utils/module-federation/start-remote-proxies");
@@ -40,10 +38,10 @@ function startStaticRemotesFileServer(staticRemotesConfig, context, options) {
         }
     }
     if (shouldMoveToCommonLocation) {
-        commonOutputDirectory = (0, node_path_1.join)(devkit_1.workspaceRoot, 'tmp/static-remotes');
+        commonOutputDirectory = (0, path_1.join)(devkit_1.workspaceRoot, 'tmp/static-remotes');
         for (const app of staticRemotesConfig.remotes) {
             const remoteConfig = staticRemotesConfig.config[app];
-            (0, node_fs_1.cpSync)(remoteConfig.outputPath, (0, node_path_1.join)(commonOutputDirectory, remoteConfig.urlSegment), {
+            (0, fs_1.cpSync)(remoteConfig.outputPath, (0, path_1.join)(commonOutputDirectory, remoteConfig.urlSegment), {
                 force: true,
                 recursive: true,
             });
@@ -103,7 +101,6 @@ async function buildStaticRemotes(staticRemotesConfig, nxBin, context, options)
     for (const app of staticRemotesConfig.remotes) {
         mappedLocationOfRemotes[app] = `http${options.ssl ? 's' : ''}://${options.host}:${options.staticRemotesPort}/${staticRemotesConfig.config[app].urlSegment}`;
     }
-    process.env.NX_MF_DEV_SERVER_STATIC_REMOTES = JSON.stringify(mappedLocationOfRemotes);
     await new Promise((res, rej) => {
         const staticProcess = (0, node_child_process_1.fork)(nxBin, [
             'run-many',
@@ -118,8 +115,8 @@ async function buildStaticRemotes(staticRemotesConfig, nxBin, context, options)
             stdio: ['ignore', 'pipe', 'pipe', 'ipc'],
         });
         // File to debug build failures e.g. 2024-01-01T00_00_0_0Z-build.log'
-        const remoteBuildLogFile = (0, node_path_1.join)(cache_directory_1.workspaceDataDirectory, `${new Date().toISOString().replace(/[:\.]/g, '_')}-build.log`);
-        const stdoutStream = (0, node_fs_1.createWriteStream)(remoteBuildLogFile);
+        const remoteBuildLogFile = (0, path_1.join)(cache_directory_1.workspaceDataDirectory, `${new Date().toISOString().replace(/[:\.]/g, '_')}-build.log`);
+        const stdoutStream = (0, fs_1.createWriteStream)(remoteBuildLogFile);
         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, '');
@@ -167,9 +164,9 @@ async function* moduleFederationDevServer(options, context) {
         : (0, dev_server_impl_1.default)(options, context);
     const p = context.projectsConfigurations.projects[context.projectName];
     const buildOptions = getBuildOptions(options.buildTarget, context);
-    let pathToManifestFile = (0, node_path_1.join)(context.root, p.sourceRoot, 'assets/module-federation.manifest.json');
+    let pathToManifestFile = (0, path_1.join)(context.root, p.sourceRoot, 'assets/module-federation.manifest.json');
     if (options.pathToManifestFile) {
-        const userPathToManifestFile = (0, node_path_1.join)(context.root, options.pathToManifestFile);
+        const userPathToManifestFile = (0, path_1.join)(context.root, options.pathToManifestFile);
         if (!(0, fs_1.existsSync)(userPathToManifestFile)) {
             throw new Error(`The provided Module Federation manifest file path does not exist. Please check the file exists at "${userPathToManifestFile}".`);
         }
@@ -197,8 +194,8 @@ async function* moduleFederationDevServer(options, context) {
     const staticRemotesIter = startStaticRemotesFileServer(staticRemotesConfig, context, options);
     (0, start_remote_proxies_1.startRemoteProxies)(staticRemotesConfig, mappedLocationsOfStaticRemotes, options.ssl
         ? {
-            pathToCert: (0, node_path_1.join)(devkit_1.workspaceRoot, options.sslCert),
-            pathToKey: (0, node_path_1.join)(devkit_1.workspaceRoot, options.sslKey),
+            pathToCert: (0, path_1.join)(devkit_1.workspaceRoot, options.sslCert),
+            pathToKey: (0, path_1.join)(devkit_1.workspaceRoot, options.sslKey),
         }
         : undefined);
     return yield* (0, async_iterable_1.combineAsyncIterables)(currIter, ...devRemoteIters, ...(staticRemotesIter ? [staticRemotesIter] : []), (0, async_iterable_1.createAsyncIterable)(async ({ next, done }) => {

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

@@ -1,9 +1,19 @@
 import { ExecutorContext } from '@nx/devkit';
 import { WebSsrDevServerOptions } from '@nx/webpack/src/executors/ssr-dev-server/schema';
-type ModuleFederationDevServerOptions = WebSsrDevServerOptions & {
-    devRemotes?: string | string[];
+type ModuleFederationSsrDevServerOptions = WebSsrDevServerOptions & {
+    devRemotes?: (string | {
+        remoteName: string;
+        configuration: string;
+    })[];
     skipRemotes?: string[];
     host: string;
+    pathToManifestFile?: string;
+    staticRemotesPort?: number;
+    parallel?: number;
+    ssl?: boolean;
+    sslKey?: string;
+    sslCert?: string;
+    isInitialHost?: boolean;
 };
-export default function moduleFederationSsrDevServer(options: ModuleFederationDevServerOptions, context: ExecutorContext): AsyncGenerator<any, any, undefined>;
+export default function moduleFederationSsrDevServer(ssrDevServerOptions: ModuleFederationSsrDevServerOptions, context: ExecutorContext): AsyncGenerator<any, any, any>;
 export {};

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

@@ -4,11 +4,23 @@ exports.default = moduleFederationSsrDevServer;
 const devkit_1 = require("@nx/devkit");
 const ssr_dev_server_impl_1 = require("@nx/webpack/src/executors/ssr-dev-server/ssr-dev-server.impl");
 const path_1 = require("path");
-const chalk = require("chalk");
+const module_federation_1 = require("@nx/webpack/src/utils/module-federation");
 const async_iterable_1 = require("@nx/devkit/src/utils/async-iterable");
 const child_process_1 = require("child_process");
 const fs_1 = require("fs");
-const internal_1 = require("@nx/js/src/internal");
+const parse_static_remotes_config_1 = require("@nx/webpack/src/utils/module-federation/parse-static-remotes-config");
+const file_server_impl_1 = require("@nx/web/src/executors/file-server/file-server.impl");
+const cache_directory_1 = require("nx/src/utils/cache-directory");
+const start_ssr_remote_proxies_1 = require("@nx/webpack/src/utils/module-federation/start-ssr-remote-proxies");
+const wait_for_port_open_1 = require("@nx/web/src/utils/wait-for-port-open");
+function normalizeOptions(options) {
+    return {
+        ...options,
+        ssl: options.ssl ?? false,
+        sslCert: options.sslCert ? (0, path_1.join)(devkit_1.workspaceRoot, options.sslCert) : undefined,
+        sslKey: options.sslKey ? (0, path_1.join)(devkit_1.workspaceRoot, options.sslKey) : undefined,
+    };
+}
 function getBuildOptions(buildTarget, context) {
     const target = (0, devkit_1.parseTargetString)(buildTarget, context);
     const buildOptions = (0, devkit_1.readTargetOptions)(target, context);
@@ -16,93 +28,181 @@ function getBuildOptions(buildTarget, context) {
         ...buildOptions,
     };
 }
-function getModuleFederationConfig(tsconfigPath, workspaceRoot, projectRoot) {
-    const moduleFederationConfigPathJS = (0, path_1.join)(workspaceRoot, projectRoot, 'module-federation.config.js');
-    const moduleFederationConfigPathTS = (0, path_1.join)(workspaceRoot, projectRoot, 'module-federation.config.ts');
-    let moduleFederationConfigPath = moduleFederationConfigPathJS;
-    const fullTSconfigPath = tsconfigPath.startsWith(workspaceRoot)
-        ? tsconfigPath
-        : (0, path_1.join)(workspaceRoot, tsconfigPath);
-    // create a no-op so this can be called with issue
-    let cleanupTranspiler = () => { };
-    if ((0, fs_1.existsSync)(moduleFederationConfigPathTS)) {
-        cleanupTranspiler = (0, internal_1.registerTsProject)(fullTSconfigPath);
-        moduleFederationConfigPath = moduleFederationConfigPathTS;
+function startSsrStaticRemotesFileServer(ssrStaticRemotesConfig, context, options) {
+    if (ssrStaticRemotesConfig.remotes.length === 0) {
+        return;
     }
-    try {
-        const config = require(moduleFederationConfigPath);
-        cleanupTranspiler();
-        return config.default || config;
+    // The directories are usually generated with /browser and /server suffixes so we need to copy them to a common directory
+    const commonOutputDirectory = (0, path_1.join)(devkit_1.workspaceRoot, 'tmp/static-remotes');
+    for (const app of ssrStaticRemotesConfig.remotes) {
+        const remoteConfig = ssrStaticRemotesConfig.config[app];
+        (0, fs_1.cpSync)(remoteConfig.outputPath, (0, path_1.join)(commonOutputDirectory, remoteConfig.urlSegment), {
+            force: true,
+            recursive: true,
+        });
     }
-    catch {
-        throw new Error(`Could not load ${moduleFederationConfigPath}. Was this project generated with "@nx/react:host"?\nSee: https://nx.dev/concepts/more-concepts/faster-builds-with-module-federation`);
+    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,
+        cacheSeconds: -1,
+    }, context);
+    return staticRemotesIter;
+}
+async function startRemotes(remotes, context, options) {
+    const remoteIters = [];
+    const target = 'serve';
+    for (const app of remotes) {
+        const remoteProjectServeTarget = context.projectGraph.nodes[app].data.targets[target];
+        const isUsingModuleFederationSsrDevServerExecutor = remoteProjectServeTarget.executor.includes('module-federation-ssr-dev-server');
+        const configurationOverride = options.devRemotes?.find((remote) => typeof remote !== 'string' && remote.remoteName === app)?.configuration;
+        {
+            const defaultOverrides = {
+                ...(options.host ? { host: options.host } : {}),
+                ...(options.ssl ? { ssl: options.ssl } : {}),
+                ...(options.sslCert ? { sslCert: options.sslCert } : {}),
+                ...(options.sslKey ? { sslKey: options.sslKey } : {}),
+            };
+            const overrides = {
+                watch: true,
+                ...defaultOverrides,
+                ...(isUsingModuleFederationSsrDevServerExecutor
+                    ? { isInitialHost: false }
+                    : {}),
+            };
+            remoteIters.push(await (0, devkit_1.runExecutor)({
+                project: app,
+                target,
+                configuration: configurationOverride ?? context.configurationName,
+            }, overrides, context));
+        }
     }
+    return remoteIters;
+}
+async function buildSsrStaticRemotes(staticRemotesConfig, nxBin, context, options) {
+    if (!staticRemotesConfig.remotes.length) {
+        return;
+    }
+    devkit_1.logger.info(`Nx is building ${staticRemotesConfig.remotes.length} static remotes...`);
+    const mapLocationOfRemotes = {};
+    for (const remoteApp of staticRemotesConfig.remotes) {
+        mapLocationOfRemotes[remoteApp] = `http${options.ssl ? 's' : ''}://${options.host}:${options.staticRemotesPort}/${staticRemotesConfig.config[remoteApp].urlSegment}`;
+    }
+    await new Promise((resolve) => {
+        const childProcess = (0, child_process_1.fork)(nxBin, [
+            'run-many',
+            '--target=server',
+            '--projects',
+            staticRemotesConfig.remotes.join(','),
+            ...(context.configurationName
+                ? [`--configuration=${context.configurationName}`]
+                : []),
+            ...(options.parallel ? [`--parallel=${options.parallel}`] : []),
+        ], {
+            cwd: context.root,
+            stdio: ['ignore', 'pipe', 'pipe', 'ipc'],
+        });
+        // Add a listener to the child process to capture the build log
+        const remoteBuildLogFile = (0, path_1.join)(cache_directory_1.workspaceDataDirectory, `${new Date().toISOString().replace(/[:\.]/g, '_')}-build.log`);
+        const remoteBuildLogStream = (0, fs_1.createWriteStream)(remoteBuildLogFile);
+        childProcess.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, '');
+            remoteBuildLogStream.write(stdoutString);
+            // in addition to writing into the stdout stream, also show error directly in console
+            // so the error is easily discoverable. 'ERROR in' is the key word to search in webpack output.
+            if (stdoutString.includes('ERROR in')) {
+                devkit_1.logger.log(stdoutString);
+            }
+            if (stdoutString.includes('Successfully ran target server')) {
+                childProcess.stdout.removeAllListeners('data');
+                devkit_1.logger.info(`Nx Built ${staticRemotesConfig.remotes.length} static remotes.`);
+                resolve();
+            }
+        });
+        process.on('SIGTERM', () => childProcess.kill('SIGTERM'));
+        process.on('exit', () => childProcess.kill('SIGTERM'));
+    });
+    return mapLocationOfRemotes;
 }
-async function* moduleFederationSsrDevServer(options, context) {
+async function* moduleFederationSsrDevServer(ssrDevServerOptions, context) {
+    const options = normalizeOptions(ssrDevServerOptions);
+    // Force Node to resolve to look for the nx binary that is inside node_modules
+    const nxBin = require.resolve('nx/bin/nx');
     let iter = (0, ssr_dev_server_impl_1.default)(options, context);
-    const p = context.projectsConfigurations.projects[context.projectName];
+    const projectConfig = context.projectsConfigurations.projects[context.projectName];
     const buildOptions = getBuildOptions(options.browserTarget, context);
-    const moduleFederationConfig = getModuleFederationConfig(buildOptions.tsConfig, context.root, p.root);
-    const remotesToSkip = new Set(options.skipRemotes ?? []);
-    const remotesNotInWorkspace = [];
-    const knownRemotes = (moduleFederationConfig.remotes ?? []).filter((r) => {
-        const validRemote = Array.isArray(r) ? r[0] : r;
-        if (remotesToSkip.has(validRemote)) {
-            return false;
+    let pathToManifestFile = (0, path_1.join)(context.root, projectConfig.sourceRoot, 'assets/module-federation.manifest.json');
+    if (options.pathToManifestFile) {
+        const userPathToManifestFile = (0, path_1.join)(context.root, options.pathToManifestFile);
+        if (!(0, fs_1.existsSync)(userPathToManifestFile)) {
+            throw new Error(`The provided Module Federation manifest file path does not exist. Please check the file exists at "${userPathToManifestFile}".`);
         }
-        else if (!context.projectGraph.nodes[validRemote]) {
-            remotesNotInWorkspace.push(validRemote);
-            return false;
+        else if ((0, path_1.extname)(userPathToManifestFile) !== '.json') {
+            throw new Error(`The Module Federation manifest file must be a JSON. Please ensure the file at ${userPathToManifestFile} is a JSON.`);
         }
-        else {
-            return true;
-        }
-    });
-    if (remotesNotInWorkspace.length > 0) {
-        devkit_1.logger.warn(`Skipping serving ${remotesNotInWorkspace.join(', ')} as they could not be found in the workspace. Ensure they are served correctly.`);
+        pathToManifestFile = userPathToManifestFile;
     }
-    const devServeApps = !options.devRemotes
-        ? []
-        : Array.isArray(options.devRemotes)
-            ? options.devRemotes
-            : [options.devRemotes];
-    // Set NX_MF_DEV_REMOTES for the Nx Runtime Library Control Plugin
-    process.env.NX_MF_DEV_REMOTES = JSON.stringify(devServeApps);
-    for (const app of knownRemotes) {
-        const [appName] = Array.isArray(app) ? app : [app];
-        const isDev = devServeApps.includes(appName);
-        const remoteServeIter = isDev
-            ? await (0, devkit_1.runExecutor)({
-                project: appName,
-                target: 'serve',
-                configuration: context.configurationName,
-            }, {
-                watch: isDev,
-            }, context)
-            : (0, async_iterable_1.mapAsyncIterable)((0, async_iterable_1.createAsyncIterable)(async ({ next, done }) => {
-                const remoteProject = context.projectsConfigurations.projects[appName];
-                const remoteServerOutput = (0, path_1.join)(devkit_1.workspaceRoot, remoteProject.targets.server.options.outputPath, remoteProject.targets.server.options.outputFileName);
-                const pm = (0, devkit_1.getPackageManagerCommand)();
-                (0, child_process_1.execSync)(`${pm.exec} nx run ${appName}:server${context.configurationName ? `:${context.configurationName}` : ''}`, { stdio: 'inherit' });
-                const child = (0, child_process_1.fork)(remoteServerOutput, {
-                    env: {
-                        PORT: remoteProject.targets['serve-browser'].options.port,
-                    },
-                });
-                child.on('message', (msg) => {
-                    if (msg === 'nx.server.ready') {
-                        next(true);
-                        done();
-                    }
-                });
-            }), (x) => x);
-        iter = (0, async_iterable_1.combineAsyncIterables)(iter, remoteServeIter);
+    if (!options.isInitialHost) {
+        return yield* iter;
     }
-    let numAwaiting = knownRemotes.length + 1; // remotes + host
-    return yield* (0, async_iterable_1.tapAsyncIterable)(iter, (x) => {
-        numAwaiting--;
-        if (numAwaiting === 0) {
-            devkit_1.logger.info(`[ ${chalk.green('ready')} ] http://${options.host ?? 'localhost'}:${options.port ?? 4200}`);
+    const moduleFederationConfig = (0, module_federation_1.getModuleFederationConfig)(buildOptions.tsConfig, context.root, projectConfig.root, 'react');
+    const remoteNames = options.devRemotes?.map((remote) => typeof remote === 'string' ? remote : remote.remoteName);
+    const remotes = (0, module_federation_1.getRemotes)(remoteNames, options.skipRemotes, moduleFederationConfig, {
+        projectName: context.projectName,
+        projectGraph: context.projectGraph,
+        root: context.root,
+    }, pathToManifestFile);
+    options.staticRemotesPort ??= remotes.staticRemotePort;
+    process.env.NX_MF_DEV_REMOTES = JSON.stringify(remotes.devRemotes.map((r) => (typeof r === 'string' ? r : r.remoteName)));
+    const staticRemotesConfig = (0, parse_static_remotes_config_1.parseStaticSsrRemotesConfig)([...remotes.staticRemotes, ...remotes.dynamicRemotes], context);
+    const mappedLocationsOfStaticRemotes = await buildSsrStaticRemotes(staticRemotesConfig, nxBin, context, options);
+    const devRemoteIters = await startRemotes(remotes.devRemotes, context, options);
+    const staticRemotesIter = startSsrStaticRemotesFileServer(staticRemotesConfig, context, options);
+    (0, start_ssr_remote_proxies_1.startSsrRemoteProxies)(staticRemotesConfig, mappedLocationsOfStaticRemotes, options.ssl
+        ? {
+            pathToCert: options.sslCert,
+            pathToKey: options.sslKey,
         }
-    });
+        : undefined);
+    return yield* (0, async_iterable_1.combineAsyncIterables)(iter, ...devRemoteIters, ...(staticRemotesIter ? [staticRemotesIter] : []), (0, async_iterable_1.createAsyncIterable)(async ({ next, done }) => {
+        if (!options.isInitialHost) {
+            done();
+            return;
+        }
+        if (remotes.remotePorts.length === 0) {
+            done();
+            return;
+        }
+        try {
+            const host = options.host ?? 'localhost';
+            const baseUrl = `http${options.ssl ? 's' : ''}://${host}:${options.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,
+            })));
+            devkit_1.logger.info(`Nx all ssr remotes have started, server ready at ${baseUrl}`);
+            next({ success: true, baseUrl });
+        }
+        catch (error) {
+            throw new Error(`Nx failed to start ssr remotes. Check above for errors.`, {
+                cause: error,
+            });
+        }
+        finally {
+            done();
+        }
+    }));
 }

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

@@ -42,6 +42,33 @@
       "type": "string",
       "description": "Host to listen on.",
       "default": "localhost"
+    },
+    "staticRemotesPort": {
+      "type": "number",
+      "description": "The port at which to serve the file-server for the static remotes."
+    },
+    "pathToManifestFile": {
+      "type": "string",
+      "description": "Path to a Module Federation manifest file (e.g. `my/path/to/module-federation.manifest.json`) containing the dynamic remote applications relative to the workspace root."
+    },
+    "ssl": {
+      "type": "boolean",
+      "description": "Serve using HTTPS.",
+      "default": false
+    },
+    "sslKey": {
+      "type": "string",
+      "description": "SSL key to use for serving HTTPS."
+    },
+    "sslCert": {
+      "type": "string",
+      "description": "SSL certificate to use for serving HTTPS."
+    },
+    "isInitialHost": {
+      "type": "boolean",
+      "description": "Whether the host that is running this executor is the first in the project tree to do so.",
+      "default": true,
+      "x-priority": "internal"
     }
   },
   "required": ["browserTarget", "serverTarget"]

package/src/generators/component-cypress-spec/schema.json

@@ -3,7 +3,8 @@
   "cli": "nx",
   "$id": "NxReactComponentCypressSpec",
   "title": "Create component Cypress spec",
-  "description": "Create a Cypress spec for a UI component that has a story.",
+  "description": "Create a Storybook Cypress spec for a UI component that has a story.",
+  "x-deprecated": "Use interactionTests instead. This option will be removed in v20.",
   "type": "object",
   "properties": {
     "project": {

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

@@ -9,4 +9,9 @@ const config = {
 };
 
 // Nx plugins for webpack to build config object from Nx options and context.
-module.exports = composePlugins(withNx(), withReact(), withModuleFederation(config));
+/**
+ * DTS Plugin is disabled in Nx Workspaces as Nx already provides Typing support for Module Federation
+ * The DTS Plugin can be enabled by setting dts: true
+ * Learn more about the DTS Plugin here: https://module-federation.io/configure/dts.html
+ */
+module.exports = composePlugins(withNx(), withReact(), withModuleFederation(config, { dts: false }));

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

@@ -29,4 +29,9 @@ const prodConfig = {
 };
 
 // Nx plugins for webpack to build config object from Nx options and context.
-module.exports = composePlugins(withNx(), withReact(), withModuleFederation(prodConfig));
+/**
+ * DTS Plugin is disabled in Nx Workspaces as Nx already provides Typing support for Module Federation
+ * The DTS Plugin can be enabled by setting dts: true
+ * Learn more about the DTS Plugin here: https://module-federation.io/configure/dts.html
+ */
+module.exports = composePlugins(withNx(), withReact(), withModuleFederation(prodConfig, { dts: false }));

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

@@ -4,7 +4,7 @@ import cors from 'cors';
 
 import { handleRequest } from './src/main.server';
 
-const port = process.env['PORT'] || 4200;
+const port = process.env['PORT'] || <%= port %>;
 const app = express();
 
 const browserDist = path.join(process.cwd(), '<%= browserBuildOutputPath %>');

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

@@ -9,4 +9,9 @@ const defaultConfig = {
 };
 
 // Nx plugins for webpack to build config object from Nx options and context.
-module.exports = composePlugins(withNx(), withReact({ssr: true}), withModuleFederationForSSR(defaultConfig));
+/**
+ * DTS Plugin is disabled in Nx Workspaces as Nx already provides Typing support for Module Federation
+ * The DTS Plugin can be enabled by setting dts: true
+ * Learn more about the DTS Plugin here: https://module-federation.io/configure/dts.html
+ */
+module.exports = composePlugins(withNx(), withReact({ssr: true}), withModuleFederationForSSR(defaultConfig, { dts: false }));

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

@@ -4,7 +4,7 @@ import cors from 'cors';
 
 import { handleRequest } from './src/main.server';
 
-const port = process.env['PORT'] || 4200;
+const port = process.env['PORT'] || <%= port %>;
 const app = express();
 
 const browserDist = path.join(process.cwd(), '<%= browserBuildOutputPath %>');

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

@@ -9,4 +9,9 @@ const defaultConfig = {
 };
 
 // Nx plugins for webpack to build config object from Nx options and context.
-export default composePlugins(withNx(), withReact({ssr: true}), withModuleFederationForSSR(defaultConfig));
+/**
+ * DTS Plugin is disabled in Nx Workspaces as Nx already provides Typing support for Module Federation
+ * The DTS Plugin can be enabled by setting dts: true
+ * Learn more about the DTS Plugin here: https://module-federation.io/configure/dts.html
+ */
+export default composePlugins(withNx(), withReact({ssr: true}), withModuleFederationForSSR(defaultConfig, { dts: false }));

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

@@ -30,4 +30,9 @@ const prodConfig: ModuleFederationConfig = {
 };
 
 // Nx plugins for webpack to build config object from Nx options and context.
-export default composePlugins(withNx(), withReact(), withModuleFederation(prodConfig));
+/**
+ * DTS Plugin is disabled in Nx Workspaces as Nx already provides Typing support for Module Federation
+ * The DTS Plugin can be enabled by setting dts: true
+ * Learn more about the DTS Plugin here: https://module-federation.io/configure/dts.html
+ */
+export default composePlugins(withNx(), withReact(), withModuleFederation(prodConfig, { dts: false }));

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

@@ -9,4 +9,9 @@ const config: ModuleFederationConfig = {
 };
 
 // Nx plugins for webpack to build config object from Nx options and context.
-export default composePlugins(withNx(), withReact(), withModuleFederation(config));
+/**
+ * DTS Plugin is disabled in Nx Workspaces as Nx already provides Typing support for Module Federation
+ * The DTS Plugin can be enabled by setting dts: true
+ * Learn more about the DTS Plugin here: https://module-federation.io/configure/dts.html
+ */
+export default composePlugins(withNx(), withReact(), withModuleFederation(config, { dts: false }));

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

@@ -14,6 +14,7 @@ async function setupSsrForHost(tree, options, appName, defaultRemoteManifest) {
     (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, `../files/${pathToModuleFederationSsrFiles}`), project.root, {
         ...options,
         static: !options?.dynamic,
+        port: Number(options?.devServerPort) || 4200,
         remotes: defaultRemoteManifest.map(({ name, port }) => {
             return {
                 ...(0, devkit_1.names)(name),

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

@@ -9,4 +9,9 @@ const config = {
 };
 
 // Nx plugins for webpack to build config object from Nx options and context.
-module.exports = composePlugins(withNx(), withReact(), withModuleFederation(config));
+/**
+ * DTS Plugin is disabled in Nx Workspaces as Nx already provides Typing support Module Federation
+ * The DTS Plugin can be enabled by setting dts: true
+ * Learn more about the DTS Plugin here: https://module-federation.io/configure/dts.html
+ */
+module.exports = composePlugins(withNx(), withReact(), withModuleFederation(config, { dts: false }));

package/src/generators/remote/files/module-federation-ssr/server.ts__tmpl__

@@ -4,7 +4,7 @@ import cors from 'cors';
 
 import { handleRequest } from './src/main.server';
 
-const port = process.env['PORT'] || 4200;
+const port = process.env['PORT'] || <%= port %>;
 const app = express();
 
 const browserDist = path.join(process.cwd(), '<%= browserBuildOutputPath %>');

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

@@ -9,4 +9,9 @@ const defaultConfig = {
 };
 
 // Nx plugins for webpack to build config object from Nx options and context.
-module.exports = composePlugins(withNx(), withReact({ssr: true}), withModuleFederationForSSR(defaultConfig));
+/**
+ * DTS Plugin is disabled in Nx Workspaces as Nx already provides Typing support Module Federation
+ * The DTS Plugin can be enabled by setting dts: true
+ * Learn more about the DTS Plugin here: https://module-federation.io/configure/dts.html
+ */
+module.exports = composePlugins(withNx(), withReact({ssr: true}), withModuleFederationForSSR(defaultConfig, { dts: false }));

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

@@ -4,7 +4,7 @@ import cors from 'cors';
 
 import { handleRequest } from './src/main.server';
 
-const port = process.env['PORT'] || 4200;
+const port = process.env['PORT'] || <%= port %>;
 const app = express();
 
 const browserDist = path.join(process.cwd(), '<%= browserBuildOutputPath %>');

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

@@ -9,4 +9,9 @@ const defaultConfig = {
 };
 
 // Nx plugins for webpack to build config object from Nx options and context.
-export default composePlugins(withNx(), withReact({ssr: true}), withModuleFederationForSSR(defaultConfig));
+/**
+ * DTS Plugin is disabled in Nx Workspaces as Nx already provides Typing support Module Federation
+ * The DTS Plugin can be enabled by setting dts: true
+ * Learn more about the DTS Plugin here: https://module-federation.io/configure/dts.html
+ */
+export default composePlugins(withNx(), withReact({ssr: true}), withModuleFederationForSSR(defaultConfig, { dts: false }));

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

@@ -9,4 +9,9 @@ const config = {
 };
 
 // Nx plugins for webpack to build config object from Nx options and context.
-export default composePlugins(withNx(), withReact(), withModuleFederation(config));
+/**
+ * DTS Plugin is disabled in Nx Workspaces as Nx already provides Typing support Module Federation
+ * The DTS Plugin can be enabled by setting dts: true
+ * Learn more about the DTS Plugin here: https://module-federation.io/configure/dts.html
+ */
+export default composePlugins(withNx(), withReact(), withModuleFederation(config, { dts: false }));

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

@@ -11,6 +11,7 @@ async function setupSsrForRemote(tree, options, appName) {
         : 'module-federation-ssr';
     (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, `../files/${pathToModuleFederationSsrFiles}`), project.root, {
         ...options,
+        port: Number(options?.devServerPort) || 4200,
         appName,
         tmpl: '',
         browserBuildOutputPath: project.targets.build.options.outputPath,

package/src/generators/setup-ssr/files/server.ts__tmpl__

@@ -4,11 +4,11 @@ import cors from 'cors';
 
 import { handleRequest } from './src/main.server';
 
-const port = process.env['PORT'] || 4200;
+const port = process.env['PORT'] || <%= port %>;
 const app = express();
 
 const browserDist = path.join(process.cwd(), '<%= browserBuildOutputPath %>');
-const indexPath =path.join(browserDist, 'index.html');
+const indexPath = path.join(browserDist, 'index.html');
 
 app.use(cors());
 

package/src/generators/setup-ssr/setup-ssr.js

@@ -150,6 +150,7 @@ async function setupSsrGenerator(tree, options) {
     nxJson.targetDefaults.server.cache = true;
     (0, devkit_1.generateFiles)(tree, (0, path_1.join)(__dirname, 'files'), projectRoot, {
         tmpl: '',
+        port: Number(options?.serverPort) || 4200,
         extraInclude: options.extraInclude?.length > 0
             ? `"${options.extraInclude.join('", "')}",`
             : '',

package/src/generators/stories/schema.json

@@ -19,11 +19,13 @@
     },
     "generateCypressSpecs": {
       "type": "boolean",
-      "description": "Automatically generate `*.spec.ts` files in the cypress e2e app generated by the cypress-configure generator."
+      "description": "Automatically generate `*.spec.ts` files in the cypress e2e app generated by the cypress-configure generator.",
+      "x-deprecated": "Use interactionTests instead. This option will be removed in v20."
     },
     "cypressProject": {
       "type": "string",
-      "description": "The Cypress project to generate the stories under. This is inferred from `project` by default."
+      "description": "The Cypress project to generate the stories under. This is inferred from `project` by default.",
+      "x-deprecated": "Use interactionTests instead. This option will be removed in v20."
     },
     "interactionTests": {
       "type": "boolean",

package/src/migrations/update-19-6-0/turn-off-dts-by-default.d.ts

@@ -0,0 +1,2 @@
+import { type Tree } from '@nx/devkit';
+export default function (tree: Tree): Promise<void>;

package/src/migrations/update-19-6-0/turn-off-dts-by-default.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = default_1;
+const devkit_1 = require("@nx/devkit");
+const minimatch_1 = require("minimatch");
+const tsquery_1 = require("@phenomnomnominal/tsquery");
+async function default_1(tree) {
+    (0, devkit_1.visitNotIgnoredFiles)(tree, '', (path) => {
+        const webpackConfigGlob = '**/webpack*.config*.{js,ts,mjs,cjs}';
+        const result = (0, minimatch_1.minimatch)(path, webpackConfigGlob);
+        if (!result) {
+            return;
+        }
+        let webpackConfigContents = tree.read(path, 'utf-8');
+        if (!/withModuleFederationSSR|withModuleFederation/.test(webpackConfigContents)) {
+            return;
+        }
+        const WITH_MODULE_FEDERATION_SELECTOR = 'CallExpression:has(Identifier[name=composePlugins]) > CallExpression:has(Identifier[name=withModuleFederation]),CallExpression:has(Identifier[name=composePlugins]) > CallExpression:has(Identifier[name=withModuleFederationForSSR])';
+        const EXISTING_MF_OVERRIDES_SELECTOR = 'ObjectLiteralExpression';
+        const ast = tsquery_1.tsquery.ast(webpackConfigContents);
+        const withModuleFederationNodes = (0, tsquery_1.tsquery)(ast, WITH_MODULE_FEDERATION_SELECTOR, { visitAllChildren: true });
+        if (!withModuleFederationNodes.length) {
+            return;
+        }
+        const withModuleFederationNode = withModuleFederationNodes[0];
+        const existingOverridesNodes = (0, tsquery_1.tsquery)(withModuleFederationNode, EXISTING_MF_OVERRIDES_SELECTOR, { visitAllChildren: true });
+        if (!existingOverridesNodes.length) {
+            // doesn't exist, add it
+            webpackConfigContents = `${webpackConfigContents.slice(0, withModuleFederationNode.getEnd() - 1)},${JSON.stringify({ dts: false })}${webpackConfigContents.slice(withModuleFederationNode.getEnd() - 1)}`;
+        }
+        else {
+            let existingOverrideNode;
+            for (const node of existingOverridesNodes) {
+                if (!existingOverrideNode) {
+                    existingOverrideNode = node;
+                }
+                if (existingOverrideNode.getText().includes(node.getText())) {
+                    continue;
+                }
+                existingOverrideNode = node;
+            }
+            const DTS_PROPERTY_SELECTOR = 'PropertyAssignment > Identifier[name=dts]';
+            const dtsPropertyNode = (0, tsquery_1.tsquery)(existingOverrideNode, DTS_PROPERTY_SELECTOR);
+            if (dtsPropertyNode.length) {
+                // dts already exists, do nothing
+                return;
+            }
+            const newOverrides = `{ dts: false, ${existingOverrideNode
+                .getText()
+                .slice(1)}`;
+            webpackConfigContents = `${webpackConfigContents.slice(0, existingOverrideNode.getStart())}${newOverrides}${webpackConfigContents.slice(existingOverrideNode.getEnd())}`;
+        }
+        tree.write(path, webpackConfigContents);
+    });
+    await (0, devkit_1.formatFiles)(tree);
+}

package/src/migrations/update-19-6-0/update-ssr-server-port.d.ts

@@ -0,0 +1,2 @@
+import { type Tree } from '@nx/devkit';
+export default function update(tree: Tree): void;

package/src/migrations/update-19-6-0/update-ssr-server-port.js

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = update;
+const devkit_1 = require("@nx/devkit");
+const tsquery_1 = require("@phenomnomnominal/tsquery");
+const ts = require("typescript");
+const minimatch_1 = require("minimatch");
+const executor_options_utils_1 = require("@nx/devkit/src/generators/executor-options-utils");
+function update(tree) {
+    const projects = (0, devkit_1.getProjects)(tree);
+    const executors = [
+        '@nx/webpack:ssr-dev-server',
+        '@nx/react:module-federation-ssr-dev-server',
+    ];
+    executors.forEach((executor) => {
+        (0, executor_options_utils_1.forEachExecutorOptions)(tree, executor, (options, projectName) => {
+            const project = projects.get(projectName);
+            if (isModuleFederationSSRProject(tree, project)) {
+                const port = options.port;
+                if (tree.exists((0, devkit_1.joinPathFragments)(project.root, 'server.ts'))) {
+                    const serverContent = tree.read((0, devkit_1.joinPathFragments)(project.root, 'server.ts'), 'utf-8');
+                    if (serverContent && port) {
+                        const updatedServerContent = updateServerPort(serverContent, port);
+                        if (updatedServerContent) {
+                            tree.write((0, devkit_1.joinPathFragments)(project.root, 'server.ts'), updatedServerContent);
+                        }
+                    }
+                }
+            }
+        });
+    });
+}
+function updateServerPort(serverContent, port) {
+    const sourceFile = tsquery_1.tsquery.ast(serverContent);
+    const serverPortNode = (0, tsquery_1.tsquery)(sourceFile, `VariableDeclaration:has(Identifier[name="port"])`)[0];
+    if (serverPortNode) {
+        const binaryExpression = (0, tsquery_1.tsquery)(serverPortNode, 'BinaryExpression')[0];
+        if (binaryExpression) {
+            const leftExpression = (0, tsquery_1.tsquery)(binaryExpression, 'PropertyAccessExpression:has(Identifier[name="env"])')[0];
+            const rightExpression = (0, tsquery_1.tsquery)(binaryExpression, 'NumericLiteral[text="4200"]')[0];
+            if (leftExpression && rightExpression) {
+                const serverPortDeclaration = serverPortNode;
+                const newInitializer = ts.factory.createBinaryExpression(
+                // process.env.PORT
+                ts.factory.createPropertyAccessExpression(ts.factory.createPropertyAccessExpression(ts.factory.createIdentifier('process'), ts.factory.createIdentifier('env')), 'PORT'), 
+                // ||
+                ts.SyntaxKind.BarBarToken, 
+                // port value
+                ts.factory.createNumericLiteral(port.toString()));
+                const updatePortDeclaration = ts.factory.updateVariableDeclaration(serverPortDeclaration, serverPortDeclaration.name, serverPortDeclaration.exclamationToken, serverPortDeclaration.type, newInitializer);
+                const updatedStatements = sourceFile.statements.map((statement) => {
+                    if (ts.isVariableStatement(statement)) {
+                        const updatedDeclarationList = statement.declarationList.declarations.map((decl) => decl === serverPortDeclaration ? updatePortDeclaration : decl);
+                        const updatedDeclList = ts.factory.updateVariableDeclarationList(statement.declarationList, updatedDeclarationList);
+                        return ts.factory.updateVariableStatement(statement, statement.modifiers, updatedDeclList);
+                    }
+                    return statement;
+                });
+                const updatedSourceFile = ts.factory.updateSourceFile(sourceFile, updatedStatements);
+                const printer = ts.createPrinter();
+                return printer.printNode(ts.EmitHint.Unspecified, updatedSourceFile, sourceFile);
+            }
+        }
+    }
+}
+function isModuleFederationSSRProject(tree, project) {
+    let hasMfeServerConfig = false;
+    (0, devkit_1.visitNotIgnoredFiles)(tree, project.root, (filePath) => {
+        if ((0, minimatch_1.minimatch)(filePath, '**/module-federation*.server.config.*')) {
+            hasMfeServerConfig = true;
+        }
+    });
+    return hasMfeServerConfig;
+}