@nx/react 17.0.4 → 17.0.6

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

@@ -1,16 +1,12 @@
 "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 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 child_process_1 = require("child_process");
 function getBuildOptions(buildTarget, context) {
     const target = (0, devkit_1.parseTargetString)(buildTarget, context);
     const buildOptions = (0, devkit_1.readTargetOptions)(target, context);
@@ -18,45 +14,30 @@ function getBuildOptions(buildTarget, context) {
         ...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, node_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), {
-                force: true,
-                recursive: true,
-            });
-        }
+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;
     }
-    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 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,
+    });
+    let isCollectingStaticRemoteOutput = true;
     const devRemoteIters = [];
     for (const app of remotes.devRemotes) {
         const remoteProjectServeTarget = context.projectGraph.nodes[app].data.targets['serve'];
@@ -67,121 +48,45 @@ async function startDevRemotes(remotes, context, options) {
             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, node_child_process_1.fork)(nxBin, [
-            'run-many',
-            `--target=build`,
-            `--projects=${staticRemotesConfig.remotes.join(',')}`,
-            ...(context.configurationName
-                ? [`--configuration=${context.configurationName}`]
+    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 = [];
+        const staticProcess = (0, child_process_1.fork)(nxBin, [
+            'run',
+            `${app}:serve-static${context.configurationName ? `:${context.configurationName}` : ''}`,
+            ...(isUsingModuleFederationDevServerExecutor
+                ? [`--isInitialHost=false`]
                 : []),
-            ...(options.parallel ? [`--parallel=${options.parallel}`] : []),
         ], {
             cwd: context.root,
             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.projectGraphCacheDirectory, `${new Date().toISOString().replace(/[:\.]/g, '_')}-build.log`);
-        const stdoutStream = (0, node_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, '');
-            stdoutStream.write(stdoutString);
-            if (stdoutString.includes('Successfully ran target build')) {
+            if (isCollectingStaticRemoteOutput) {
+                outWithErr.push(data.toString());
+            }
+            else {
+                outWithErr = null;
                 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) => {
-            stdoutStream.end();
             if (code !== 0) {
-                throw new Error(`Remote failed to start. A complete log can be found in: ${remoteBuildLogFile}`);
+                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'));
-    });
-}
-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, node_path_1.dirname)(outputPath);
-        const urlSegment = (0, node_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 }) => {
+    return yield* (0, async_iterable_1.combineAsyncIterables)(currIter, ...devRemoteIters, (0, async_iterable_1.createAsyncIterable)(async ({ next, done }) => {
         if (!options.isInitialHost) {
             done();
             return;
@@ -191,23 +96,20 @@ async function* moduleFederationDevServer(options, context) {
             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, {
+            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, {
                 retries: 480,
                 retryDelay: 2500,
-                host: host,
+                host: 'localhost',
             })));
-            devkit_1.logger.info(`NX All remotes started, server ready at ${baseUrl}`);
-            next({ success: true, baseUrl: baseUrl });
+            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}` });
         }
-        catch (err) {
-            throw new Error(`Failed to start remotes. Check above for any errors.`, {
-                cause: err,
-            });
+        catch {
+            throw new Error(`Timed out waiting for remote to start. Check above for any errors.`);
         }
         finally {
             done();

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

@@ -19,7 +19,7 @@
       "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`.",
+      "description": "List of remote applications to not automatically serve, either statically or in development mode.",
       "x-priority": "important"
     },
     "buildTarget": {
@@ -101,14 +101,6 @@
       "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/generators/application/application.js

@@ -13,8 +13,8 @@ const add_styled_dependencies_1 = require("../../rules/add-styled-dependencies")
 const devkit_1 = require("@nx/devkit");
 const init_1 = require("../init/init");
 const eslint_1 = require("@nx/eslint");
+const lint_project_1 = require("@nx/eslint/src/generators/lint-project/lint-project");
 const versions_1 = require("../../utils/versions");
-const maybe_js_1 = require("../../utils/maybe-js");
 const install_common_dependencies_1 = require("./lib/install-common-dependencies");
 const create_ts_config_1 = require("../../utils/create-ts-config");
 const add_swc_dependencies_1 = require("@nx/js/src/utils/swc/add-swc-dependencies");
@@ -22,9 +22,6 @@ const chalk = require("chalk");
 const show_possible_warnings_1 = require("./lib/show-possible-warnings");
 const add_e2e_1 = require("./lib/add-e2e");
 const eslint_file_1 = require("@nx/eslint/src/generators/utils/eslint-file");
-const js_1 = require("@nx/js");
-const log_show_project_command_1 = require("@nx/devkit/src/utils/log-show-project-command");
-const setup_tailwind_1 = require("../setup-tailwind/setup-tailwind");
 async function addLinting(host, options) {
     const tasks = [];
     if (options.linter === eslint_1.Linter.EsLint) {
@@ -35,10 +32,12 @@ async function addLinting(host, options) {
                 (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'tsconfig.app.json'),
             ],
             unitTestRunner: options.unitTestRunner,
+            eslintFilePatterns: [
+                (0, lint_project_1.mapLintPattern)(options.appProjectRoot, '{ts,tsx,js,jsx}', options.rootProject),
+            ],
             skipFormat: true,
             rootProject: options.rootProject,
             skipPackageJson: options.skipPackageJson,
-            addPlugin: options.addPlugin,
         });
         tasks.push(lintTask);
         if ((0, eslint_file_1.isEslintConfigSupported)(host)) {
@@ -54,7 +53,6 @@ async function addLinting(host, options) {
 }
 async function applicationGenerator(host, schema) {
     return await applicationGeneratorInternal(host, {
-        addPlugin: false,
         projectNameAndRootFormat: 'derived',
         ...schema,
     });
@@ -64,41 +62,17 @@ async function applicationGeneratorInternal(host, schema) {
     const tasks = [];
     const options = await (0, normalize_options_1.normalizeOptions)(host, schema);
     (0, show_possible_warnings_1.showPossibleWarnings)(host, options);
-    const jsInitTask = await (0, js_1.initGenerator)(host, {
-        ...schema,
-        tsConfigName: schema.rootProject ? 'tsconfig.json' : 'tsconfig.base.json',
-        skipFormat: true,
-    });
-    tasks.push(jsInitTask);
     const initTask = await (0, init_1.default)(host, {
         ...options,
         skipFormat: true,
+        skipHelperLibs: options.bundler === 'vite',
     });
     tasks.push(initTask);
-    if (options.bundler === 'webpack') {
-        const { webpackInitGenerator } = (0, devkit_1.ensurePackage)('@nx/webpack', versions_1.nxVersion);
-        const webpackInitTask = await webpackInitGenerator(host, {
-            skipPackageJson: options.skipPackageJson,
-            skipFormat: true,
-            addPlugin: options.addPlugin,
-        });
-        tasks.push(webpackInitTask);
-        if (!options.skipPackageJson) {
-            const { ensureDependencies } = await Promise.resolve().then(() => require('@nx/webpack/src/utils/ensure-dependencies'));
-            tasks.push(ensureDependencies(host, { uiFramework: 'react' }));
-        }
-    }
     if (!options.rootProject) {
         (0, create_ts_config_1.extractTsConfigBase)(host);
     }
     (0, create_application_files_1.createApplicationFiles)(host, options);
     (0, add_project_1.addProject)(host, options);
-    if (options.style === 'tailwind') {
-        const twTask = await (0, setup_tailwind_1.setupTailwindGenerator)(host, {
-            project: options.projectName,
-        });
-        tasks.push(twTask);
-    }
     if (options.bundler === 'vite') {
         const { createOrEditViteConfig, viteConfigurationGenerator } = (0, devkit_1.ensurePackage)('@nx/vite', versions_1.nxVersion);
         // We recommend users use `import.meta.env.MODE` and other variables in their code to differentiate between production and development.
@@ -114,7 +88,6 @@ async function applicationGeneratorInternal(host, schema) {
             inSourceTests: options.inSourceTests,
             compiler: options.compiler,
             skipFormat: true,
-            addPlugin: options.addPlugin,
         });
         tasks.push(viteTask);
         createOrEditViteConfig(host, {
@@ -135,15 +108,23 @@ async function applicationGeneratorInternal(host, schema) {
             plugins: ['react()'],
         }, false);
     }
+    else if (options.bundler === 'webpack') {
+        const { webpackInitGenerator } = (0, devkit_1.ensurePackage)('@nx/webpack', versions_1.nxVersion);
+        const webpackInitTask = await webpackInitGenerator(host, {
+            uiFramework: 'react',
+            skipFormat: true,
+        });
+        tasks.push(webpackInitTask);
+    }
     else if (options.bundler === 'rspack') {
         const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/rspack', versions_1.nxRspackVersion);
         const rspackTask = await configurationGenerator(host, {
             project: options.projectName,
-            main: (0, devkit_1.joinPathFragments)(options.appProjectRoot, (0, maybe_js_1.maybeJs)(options, `src/main.tsx`)),
+            main: (0, devkit_1.joinPathFragments)(options.appProjectRoot, (0, add_project_1.maybeJs)(options, `src/main.tsx`)),
             tsConfig: (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'tsconfig.app.json'),
             target: 'web',
             newProject: true,
-            framework: 'react',
+            uiFramework: 'react',
         });
         tasks.push(rspackTask);
     }
@@ -151,11 +132,10 @@ async function applicationGeneratorInternal(host, schema) {
         const { createOrEditViteConfig, vitestGenerator } = (0, devkit_1.ensurePackage)('@nx/vite', versions_1.nxVersion);
         const vitestTask = await vitestGenerator(host, {
             uiFramework: 'react',
-            coverageProvider: 'v8',
+            coverageProvider: 'c8',
             project: options.projectName,
             inSourceTests: options.inSourceTests,
             skipFormat: true,
-            addPlugin: options.addPlugin,
         });
         tasks.push(vitestTask);
         createOrEditViteConfig(host, {
@@ -201,8 +181,8 @@ async function applicationGeneratorInternal(host, schema) {
         devkit_1.logger.warn(`${chalk.bold('styled-jsx')} is not supported by ${chalk.bold('Rspack')}. We've added ${chalk.bold('babel-loader')} to your project, but using babel will slow down your build.`);
         tasks.push((0, devkit_1.addDependenciesToPackageJson)(host, {}, { 'babel-loader': versions_1.babelLoaderVersion }));
         host.write((0, devkit_1.joinPathFragments)(options.appProjectRoot, 'rspack.config.js'), (0, devkit_1.stripIndents) `
-        const { composePlugins, withNx, withReact } = require('@nx/rspack');
-        module.exports = composePlugins(withNx(), withReact(), (config) => {
+        const { composePlugins, withNx, withWeb } = require('@nx/rspack');
+        module.exports = composePlugins(withNx(), withWeb(), (config) => {
           config.module.rules.push({
             test: /\\.[jt]sx$/i,
             use: [
@@ -222,9 +202,6 @@ async function applicationGeneratorInternal(host, schema) {
     if (!options.skipFormat) {
         await (0, devkit_1.formatFiles)(host);
     }
-    tasks.push(() => {
-        (0, log_show_project_command_1.logShowProjectCommand)(options.projectName);
-    });
     return (0, devkit_1.runTasksInSerial)(...tasks);
 }
 exports.applicationGeneratorInternal = applicationGeneratorInternal;

package/src/generators/application/files/base-vite/index.html__tmpl__

@@ -7,7 +7,7 @@
 
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="/favicon.ico" />
-    <% if (!styledModule && style !== 'none') { %><link rel="stylesheet" href="/src/styles.<%= style === 'tailwind' ? 'css' : style %>" /><% } %>
+    <% if (!styledModule && style !== 'none') { %><link rel="stylesheet" href="/src/styles.<%= style %>" /><% } %>
   </head>
   <body>
     <div id="root"></div>

package/src/generators/application/files/base-webpack/src/environments/environment.prod.ts__tmpl__

@@ -0,0 +1,3 @@
+export const environment = {
+  production: true
+};

package/src/generators/application/files/base-webpack/src/environments/environment.ts__tmpl__

@@ -0,0 +1,6 @@
+// This file can be replaced during build by using the `fileReplacements` array.
+// When building for production, this file is replaced with `environment.prod.ts`.
+
+export const environment = {
+  production: false
+};

package/src/generators/application/files/base-webpack/src/index.html

@@ -3,6 +3,8 @@
   <head>
     <meta charset="utf-8" />
     <title><%= className %></title>
+    <base href="/" />
+
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
   </head>

package/src/generators/application/files/base-webpack/webpack.config.js__tmpl__

@@ -1,50 +1,9 @@
-<% if (webpackPluginOptions) { %>
-const { NxWebpackPlugin } = require('@nx/webpack');
-const { NxReactWebpackPlugin } = require('@nx/react');
-const { join } = require('path');
-
-module.exports = {
-  output: {
-    path: join(__dirname, '<%= offsetFromRoot %><%= webpackPluginOptions.outputPath %>'),
-  },
-  devServer: {
-    port: 4200
-  },
-  plugins: [
-    new NxWebpackPlugin({
-      tsConfig: '<%= webpackPluginOptions.tsConfig %>',
-      compiler: '<%= webpackPluginOptions.compiler %>',
-      main: '<%= webpackPluginOptions.main %>',
-      index: '<%= webpackPluginOptions.index %>',
-      baseHref: '<%= webpackPluginOptions.baseHref %>',
-      assets: <%- JSON.stringify(webpackPluginOptions.assets) %>,
-      styles: <%- JSON.stringify(webpackPluginOptions.styles) %>,
-      outputHashing: process.env['NODE_ENV'] === 'production' ? 'all' : 'none',
-      optimization: process.env['NODE_ENV'] === 'production',
-    }),
-    new NxReactWebpackPlugin({
-      // Uncomment this line if you don't want to use SVGR
-      // See: https://react-svgr.com/
-      // svgr: false
-    }),
-  ],
-};
-<% } else { %>
 const { composePlugins, withNx } = require('@nx/webpack');
 const { withReact } = require('@nx/react');
 
 // Nx plugins for webpack.
-module.exports = composePlugins(
-  withNx(),
-  withReact({
-    // Uncomment this line if you don't want to use SVGR
-    // See: https://react-svgr.com/
-    // svgr: false
-  }),
-  (config) => {
-    // Update the webpack config as needed here.
-    // e.g. `config.plugins.push(new MyPlugin())`
-    return config;
-  }
-);
-<% } %>
+module.exports = composePlugins(withNx(), withReact(), (config) => {
+  // Update the webpack config as needed here.
+  // e.g. `config.plugins.push(new MyPlugin())`
+  return config;
+});

package/src/generators/application/files/nx-welcome/src/app/nx-welcome.tsx

@@ -274,21 +274,12 @@ export function NxWelcome({ title }: { title: string }) {
     .button-pill:hover {
       color: rgba(255, 255, 255, 1) !important;
     }
-    #nx-console:hover {
+    .nx-console:hover {
       background-color: rgba(0, 122, 204, 1);
     }
-    #nx-console svg {
+    .nx-console svg {
       color: rgba(0, 122, 204, 1);
     }
-    #nx-console-jetbrains {
-      margin-top: 2rem;
-    }
-    #nx-console-jetbrains:hover {
-      background-color: rgba(255, 49, 140, 1);
-    }
-    #nx-console-jetbrains svg {
-      color: rgba(255, 49, 140, 1);
-    }
     #nx-repo:hover {
       background-color: rgba(24, 23, 23, 1);
     }
@@ -653,8 +644,7 @@ export function NxWelcome({ title }: { title: string }) {
             </div>
             <div id="other-links">
               <a
-                id="nx-console"
-                className="button-pill rounded shadow"
+                className="button-pill nx-console rounded shadow"
                 href="https://marketplace.visualstudio.com/items?itemName=nrwl.angular-console&utm_source=nx-project"
                 target="_blank"
                 rel="noreferrer"
@@ -670,35 +660,23 @@ export function NxWelcome({ title }: { title: string }) {
                 </svg>
                 <span>
                   Install Nx Console for VSCode
-                  <span>The official VSCode extension for Nx.</span>
+                  <span>The official VSCode plugin for Nx.</span>
                 </span>
               </a>
               <a
-                id="nx-console-jetbrains"
-                className="button-pill rounded shadow"
+                className="button-pill nx-console rounded shadow"
                 href="https://plugins.jetbrains.com/plugin/21060-nx-console"
                 target="_blank"
                 rel="noreferrer"
               >
                 <svg
-                  height="48"
-                  width="48"
-                  viewBox="20 20 60 60"
+                  fill="currentColor"
+                  role="img"
+                  viewBox="0 0 24 24"
                   xmlns="http://www.w3.org/2000/svg"
                 >
-                  <path d="m22.5 22.5h60v60h-60z" />
-                  <g fill="#fff">
-                    <path d="m29.03 71.25h22.5v3.75h-22.5z" />
-                    <path d="m28.09 38 1.67-1.58a1.88 1.88 0 0 0 1.47.87c.64 0 1.06-.44 1.06-1.31v-5.98h2.58v6a3.48 3.48 0 0 1 -.87 2.6 3.56 3.56 0 0 1 -2.57.95 3.84 3.84 0 0 1 -3.34-1.55z" />
-                    <path d="m36 30h7.53v2.19h-5v1.44h4.49v2h-4.42v1.49h5v2.21h-7.6z" />
-                    <path d="m47.23 32.29h-2.8v-2.29h8.21v2.27h-2.81v7.1h-2.6z" />
-                    <path d="m29.13 43.08h4.42a3.53 3.53 0 0 1 2.55.83 2.09 2.09 0 0 1 .6 1.53 2.16 2.16 0 0 1 -1.44 2.09 2.27 2.27 0 0 1 1.86 2.29c0 1.61-1.31 2.59-3.55 2.59h-4.44zm5 2.89c0-.52-.42-.8-1.18-.8h-1.29v1.64h1.24c.79 0 1.25-.26 1.25-.81zm-.9 2.66h-1.57v1.73h1.62c.8 0 1.24-.31 1.24-.86 0-.5-.4-.87-1.27-.87z" />
-                    <path d="m38 43.08h4.1a4.19 4.19 0 0 1 3 1 2.93 2.93 0 0 1 .9 2.19 3 3 0 0 1 -1.93 2.89l2.24 3.27h-3l-1.88-2.84h-.87v2.84h-2.56zm4 4.5c.87 0 1.39-.43 1.39-1.11 0-.75-.54-1.12-1.4-1.12h-1.44v2.26z" />
-                    <path d="m49.59 43h2.5l4 9.44h-2.79l-.67-1.69h-3.63l-.67 1.69h-2.71zm2.27 5.73-1-2.65-1.06 2.65z" />
-                    <path d="m56.46 43.05h2.6v9.37h-2.6z" />
-                    <path d="m60.06 43.05h2.42l3.37 5v-5h2.57v9.37h-2.26l-3.53-5.14v5.14h-2.57z" />
-                    <path d="m68.86 51 1.45-1.73a4.84 4.84 0 0 0 3 1.13c.71 0 1.08-.24 1.08-.65 0-.4-.31-.6-1.59-.91-2-.46-3.53-1-3.53-2.93 0-1.74 1.37-3 3.62-3a5.89 5.89 0 0 1 3.86 1.25l-1.26 1.84a4.63 4.63 0 0 0 -2.62-.92c-.63 0-.94.25-.94.6 0 .42.32.61 1.63.91 2.14.46 3.44 1.16 3.44 2.91 0 1.91-1.51 3-3.79 3a6.58 6.58 0 0 1 -4.35-1.5z" />
-                  </g>
+                  <title>IntelliJ</title>
+                  <path d="M0 0v24h24V0zm3.723 3.111h5v1.834h-1.39v6.277h1.39v1.834h-5v-1.834h1.444V4.945H3.723zm11.055 0H17v6.5c0 .612-.055 1.111-.222 1.556-.167.444-.39.777-.723 1.11-.277.279-.666.557-1.11.668a3.933 3.933 0 0 1-1.445.278c-.778 0-1.444-.167-1.944-.445a4.81 4.81 0 0 1-1.279-1.056l1.39-1.555c.277.334.555.555.833.722.277.167.611.278.945.278.389 0 .721-.111 1-.389.221-.278.333-.667.333-1.278zM2.222 19.5h9V21h-9z"></path>
                 </svg>
                 <span>
                   Install Nx Console for JetBrains
@@ -727,7 +705,7 @@ export function NxWelcome({ title }: { title: string }) {
                     />
                   </svg>
                   <h2>
-                    Nx Cloud
+                    NxCloud
                     <span>Enable faster CI & better DX</span>
                   </h2>
                 </div>
@@ -735,7 +713,7 @@ export function NxWelcome({ title }: { title: string }) {
                   You can activate distributed tasks executions and caching by
                   running:
                 </p>
-                <pre>nx connect</pre>
+                <pre>nx connect-to-nx-cloud</pre>
                 <a
                   href="https://nx.app/?utm_source=nx-project"
                   target="_blank"
@@ -792,28 +770,9 @@ export function NxWelcome({ title }: { title: string }) {
                 <span># Generate UI lib</span>
                 nx g @nx/react:lib ui
                 <span># Add a component</span>
-                nx g @nx/react:component ui/src/lib/button
+                nx g @nx/react:component button --project ui
               </pre>
             </details>
-            <details>
-              <summary>
-                <svg
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth="2"
-                    d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
-                  />
-                </svg>
-                View project details
-              </summary>
-              <pre>nx show project {title} --web</pre>
-            </details>
             <details>
               <summary>
                 <svg