@nx/react 0.0.0-pr-22179-271588f

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

@@ -0,0 +1,211 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseStaticRemotesConfig = void 0;
+const devkit_1 = require("@nx/devkit");
+const dev_server_impl_1 = require("@nx/webpack/src/executors/dev-server/dev-server.impl");
+const file_server_impl_1 = require("@nx/web/src/executors/file-server/file-server.impl");
+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);
+    return {
+        ...buildOptions,
+    };
+}
+function startStaticRemotesFileServer(staticRemotesConfig, context, options) {
+    let shouldMoveToCommonLocation = false;
+    let commonOutputDirectory;
+    for (const app of staticRemotesConfig.remotes) {
+        const remoteBasePath = staticRemotesConfig.config[app].basePath;
+        if (!commonOutputDirectory) {
+            commonOutputDirectory = remoteBasePath;
+        }
+        else if (commonOutputDirectory !== remoteBasePath) {
+            shouldMoveToCommonLocation = true;
+            break;
+        }
+    }
+    if (shouldMoveToCommonLocation) {
+        commonOutputDirectory = (0, path_1.join)(devkit_1.workspaceRoot, 'tmp/static-remotes');
+        for (const app of staticRemotesConfig.remotes) {
+            const remoteConfig = staticRemotesConfig.config[app];
+            (0, fs_1.cpSync)(remoteConfig.outputPath, (0, path_1.join)(commonOutputDirectory, remoteConfig.urlSegment), {
+                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, options) {
+    const devRemoteIters = [];
+    for (const app of remotes.devRemotes) {
+        const remoteProjectServeTarget = context.projectGraph.nodes[app].data.targets['serve'];
+        const isUsingModuleFederationDevServerExecutor = remoteProjectServeTarget.executor.includes('module-federation-dev-server');
+        devRemoteIters.push(await (0, devkit_1.runExecutor)({
+            project: app,
+            target: 'serve',
+            configuration: context.configurationName,
+        }, {
+            watch: true,
+            ...(options.host ? { host: options.host } : {}),
+            ...(options.ssl ? { ssl: options.ssl } : {}),
+            ...(options.sslCert ? { sslCert: options.sslCert } : {}),
+            ...(options.sslKey ? { sslKey: options.sslKey } : {}),
+            ...(isUsingModuleFederationDevServerExecutor
+                ? { isInitialHost: false }
+                : {}),
+        }, context));
+    }
+    return devRemoteIters;
+}
+async function buildStaticRemotes(staticRemotesConfig, nxBin, context, options) {
+    if (!staticRemotesConfig.remotes.length) {
+        return;
+    }
+    devkit_1.logger.info(`NX Building ${staticRemotesConfig.remotes.length} static remotes...`);
+    const mappedLocationOfRemotes = {};
+    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) => {
+        const staticProcess = (0, child_process_1.fork)(nxBin, [
+            'run-many',
+            `--target=build`,
+            `--projects=${staticRemotesConfig.remotes.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 ${staticRemotesConfig.remotes.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'));
+    });
+}
+function parseStaticRemotesConfig(staticRemotes, context) {
+    if (!staticRemotes?.length) {
+        return { remotes: [], config: undefined };
+    }
+    const config = {};
+    for (const app of staticRemotes) {
+        const outputPath = context.projectGraph.nodes[app].data.targets['build'].options.outputPath;
+        const basePath = (0, path_1.dirname)(outputPath);
+        const urlSegment = (0, path_1.basename)(outputPath);
+        config[app] = { basePath, outputPath, urlSegment };
+    }
+    return { remotes: staticRemotes, config };
+}
+exports.parseStaticRemotesConfig = parseStaticRemotesConfig;
+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;
+            }
+            else {
+                return portToUse;
+            }
+        }, options.staticRemotesPort);
+    }
+    const staticRemotesConfig = parseStaticRemotesConfig(remotes.staticRemotes, context);
+    await buildStaticRemotes(staticRemotesConfig, nxBin, context, options);
+    const devRemoteIters = await startDevRemotes(remotes, context, options);
+    const staticRemotesIter = remotes.staticRemotes.length > 0
+        ? startStaticRemotesFileServer(staticRemotesConfig, 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;
+        }
+        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: host,
+            })));
+            devkit_1.logger.info(`NX All remotes started, server ready at ${baseUrl}`);
+            next({ success: true, baseUrl: baseUrl });
+        }
+        catch (err) {
+            throw new Error(`Failed to start remotes. Check above for any errors.`, {
+                cause: err,
+            });
+        }
+        finally {
+            done();
+        }
+    }));
+}
+exports.default = moduleFederationDevServer;

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

@@ -0,0 +1,114 @@
+{
+  "version": 2,
+  "outputCapture": "direct-nodejs",
+  "title": "Module Federation Dev Server",
+  "description": "Serve a web application.",
+  "cli": "nx",
+  "type": "object",
+  "properties": {
+    "devRemotes": {
+      "type": "array",
+      "items": {
+        "type": "string"
+      },
+      "description": "List of remote applications to run in development mode (i.e. using serve target).",
+      "x-priority": "important"
+    },
+    "skipRemotes": {
+      "type": "array",
+      "items": {
+        "type": "string"
+      },
+      "description": "List of remote applications to not automatically serve, either statically or in development mode. This will not remove the remotes from the `module-federation.config` file, and therefore the application may still try to fetch these remotes.\nThis option is useful for when the `host` application is using a `remote` that does not live in the same workspace as the `host`.",
+      "x-priority": "important"
+    },
+    "buildTarget": {
+      "type": "string",
+      "description": "Target which builds the application.",
+      "x-priority": "important"
+    },
+    "port": {
+      "type": "number",
+      "description": "Port to listen on.",
+      "default": 4200,
+      "x-priority": "important"
+    },
+    "host": {
+      "type": "string",
+      "description": "Host to listen on.",
+      "default": "localhost"
+    },
+    "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`."
+    },
+    "watch": {
+      "type": "boolean",
+      "description": "Watches for changes and rebuilds application.",
+      "default": true
+    },
+    "liveReload": {
+      "type": "boolean",
+      "description": "Whether to reload the page on change, using live-reload.",
+      "default": true
+    },
+    "hmr": {
+      "type": "boolean",
+      "description": "Enable hot module replacement.",
+      "default": false
+    },
+    "publicHost": {
+      "type": "string",
+      "description": "Public URL where the application will be served."
+    },
+    "open": {
+      "type": "boolean",
+      "description": "Open the application in the browser.",
+      "default": false,
+      "x-priority": "important"
+    },
+    "allowedHosts": {
+      "type": "string",
+      "description": "This option allows you to whitelist services that are allowed to access the dev server."
+    },
+    "memoryLimit": {
+      "type": "number",
+      "description": "Memory limit for type checking service process in `MB`."
+    },
+    "maxWorkers": {
+      "type": "number",
+      "description": "Number of workers to use for type checking."
+    },
+    "baseHref": {
+      "type": "string",
+      "description": "Base url for the application being built."
+    },
+    "static": {
+      "type": "boolean",
+      "description": "Whether to use a static file server instead of the webpack-dev-server. This should be used for remote applications that are also host applications."
+    },
+    "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"
+    },
+    "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/executors/module-federation-ssr-dev-server/module-federation-ssr-dev-server.impl.d.ts

@@ -0,0 +1,9 @@
+import { ExecutorContext } from '@nx/devkit';
+import { WebSsrDevServerOptions } from '@nx/webpack/src/executors/ssr-dev-server/schema';
+type ModuleFederationDevServerOptions = WebSsrDevServerOptions & {
+    devRemotes?: string | string[];
+    skipRemotes?: string[];
+    host: string;
+};
+export default function moduleFederationSsrDevServer(options: ModuleFederationDevServerOptions, context: ExecutorContext): AsyncGenerator<any, any, undefined>;
+export {};

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

@@ -0,0 +1,106 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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 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");
+function getBuildOptions(buildTarget, context) {
+    const target = (0, devkit_1.parseTargetString)(buildTarget, context);
+    const buildOptions = (0, devkit_1.readTargetOptions)(target, context);
+    return {
+        ...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;
+    }
+    try {
+        const config = require(moduleFederationConfigPath);
+        cleanupTranspiler();
+        return config.default || config;
+    }
+    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`);
+    }
+}
+async function* moduleFederationSsrDevServer(options, context) {
+    let iter = (0, ssr_dev_server_impl_1.default)(options, context);
+    const p = 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;
+        }
+        else if (!context.projectGraph.nodes[validRemote]) {
+            remotesNotInWorkspace.push(validRemote);
+            return false;
+        }
+        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.`);
+    }
+    const devServeApps = !options.devRemotes
+        ? []
+        : Array.isArray(options.devRemotes)
+            ? options.devRemotes
+            : [options.devRemotes];
+    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);
+    }
+    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}`);
+        }
+    });
+}
+exports.default = moduleFederationSsrDevServer;

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

@@ -0,0 +1,48 @@
+{
+  "version": 2,
+  "outputCapture": "direct-nodejs",
+  "title": "Module Federation SSR Dev Server",
+  "description": "Serve a SSR host application along with its known remotes.",
+  "cli": "nx",
+  "type": "object",
+  "properties": {
+    "browserTarget": {
+      "type": "string",
+      "description": "Target which builds the browser application.",
+      "x-priority": "important"
+    },
+    "serverTarget": {
+      "type": "string",
+      "description": "Target which builds the server application.",
+      "x-priority": "important"
+    },
+    "port": {
+      "type": "number",
+      "description": "The port to be set on `process.env.PORT` for use in the server.",
+      "default": 4200,
+      "x-priority": "important"
+    },
+    "devRemotes": {
+      "type": "array",
+      "items": {
+        "type": "string"
+      },
+      "description": "List of remote applications to run in development mode (i.e. using serve target).",
+      "x-priority": "important"
+    },
+    "skipRemotes": {
+      "type": "array",
+      "items": {
+        "type": "string"
+      },
+      "description": "List of remote applications to not automatically serve, either statically or in development mode.",
+      "x-priority": "important"
+    },
+    "host": {
+      "type": "string",
+      "description": "Host to listen on.",
+      "default": "localhost"
+    }
+  },
+  "required": ["browserTarget", "serverTarget"]
+}

package/src/generators/application/application.d.ts

@@ -0,0 +1,5 @@
+import { Schema } from './schema';
+import { GeneratorCallback, Tree } from '@nx/devkit';
+export declare function applicationGenerator(host: Tree, schema: Schema): Promise<GeneratorCallback>;
+export declare function applicationGeneratorInternal(host: Tree, schema: Schema): Promise<GeneratorCallback>;
+export default applicationGenerator;