@nx/react 17.0.3 → 17.0.4

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

@@ -5,7 +5,19 @@ type ModuleFederationDevServerOptions = WebDevServerOptions & {
     skipRemotes?: string[];
     static?: boolean;
     isInitialHost?: boolean;
+    parallel?: number;
+    staticRemotesPort?: number;
 };
+type StaticRemoteConfig = {
+    basePath: string;
+    outputPath: string;
+    urlSegment: string;
+};
+type StaticRemotesConfig = {
+    remotes: string[];
+    config: Record<string, StaticRemoteConfig> | undefined;
+};
+export declare function parseStaticRemotesConfig(staticRemotes: string[] | undefined, context: ExecutorContext): StaticRemotesConfig;
 export default function moduleFederationDevServer(options: ModuleFederationDevServerOptions, context: ExecutorContext): AsyncIterableIterator<{
     success: boolean;
     baseUrl?: string;

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

@@ -1,12 +1,16 @@
 "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 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");
 function getBuildOptions(buildTarget, context) {
     const target = (0, devkit_1.parseTargetString)(buildTarget, context);
     const buildOptions = (0, devkit_1.readTargetOptions)(target, context);
@@ -14,30 +18,45 @@ function getBuildOptions(buildTarget, context) {
         ...buildOptions,
     };
 }
-async function* moduleFederationDevServer(options, context) {
-    // Force Node to resolve to look for the nx binary that is inside node_modules
-    const nxBin = require.resolve('nx/bin/nx');
-    const currIter = options.static
-        ? (0, file_server_impl_1.default)({
-            ...options,
-            parallel: false,
-            withDeps: false,
-            spa: false,
-            cors: true,
-        }, context)
-        : (0, dev_server_impl_1.default)(options, context);
-    const p = context.projectsConfigurations.projects[context.projectName];
-    const buildOptions = getBuildOptions(options.buildTarget, context);
-    if (!options.isInitialHost) {
-        return yield* currIter;
+function startStaticRemotesFileServer(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;
+        }
     }
-    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;
+    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,
+            });
+        }
+    }
+    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'];
@@ -48,45 +67,121 @@ async function* moduleFederationDevServer(options, context) {
             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));
     }
-    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`]
+    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}`]
                 : []),
+            ...(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) => {
-            if (isCollectingStaticRemoteOutput) {
-                outWithErr.push(data.toString());
-            }
-            else {
-                outWithErr = null;
+            const ANSII_CODE_REGEX = /[\u001b\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g;
+            const stdoutString = data.toString().replace(ANSII_CODE_REGEX, '');
+            stdoutStream.write(stdoutString);
+            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) => {
+            stdoutStream.end();
             if (code !== 0) {
-                devkit_1.logger.info(outWithErr.join(''));
-                throw new Error(`Remote failed to start. See above for errors.`);
+                throw new Error(`Remote failed to start. A complete log can be found in: ${remoteBuildLogFile}`);
             }
         });
         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);
     }
-    return yield* (0, async_iterable_1.combineAsyncIterables)(currIter, ...devRemoteIters, (0, async_iterable_1.createAsyncIterable)(async ({ next, done }) => {
+    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;
@@ -96,20 +191,23 @@ async function* moduleFederationDevServer(options, context) {
             return;
         }
         try {
-            await Promise.all(remotes.remotePorts.map((port) => 
-            // Allow 20 minutes for each remote to start, which is plenty of time but we can tweak it later if needed.
-            // Most remotes should start in under 1 minute.
-            (0, wait_for_port_open_1.waitForPortOpen)(port, {
+            const 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: 'localhost',
+                host: host,
             })));
-            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}` });
+            devkit_1.logger.info(`NX All remotes started, server ready at ${baseUrl}`);
+            next({ success: true, baseUrl: baseUrl });
         }
-        catch {
-            throw new Error(`Timed out waiting for remote to start. Check above for any errors.`);
+        catch (err) {
+            throw new Error(`Failed to start remotes. Check above for any errors.`, {
+                cause: err,
+            });
         }
         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.",
+      "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": {
@@ -101,6 +101,14 @@
       "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,6 +22,9 @@ 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) {
@@ -32,12 +35,10 @@ 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)) {
@@ -53,6 +54,7 @@ async function addLinting(host, options) {
 }
 async function applicationGenerator(host, schema) {
     return await applicationGeneratorInternal(host, {
+        addPlugin: false,
         projectNameAndRootFormat: 'derived',
         ...schema,
     });
@@ -62,17 +64,41 @@ 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.
@@ -88,6 +114,7 @@ async function applicationGeneratorInternal(host, schema) {
             inSourceTests: options.inSourceTests,
             compiler: options.compiler,
             skipFormat: true,
+            addPlugin: options.addPlugin,
         });
         tasks.push(viteTask);
         createOrEditViteConfig(host, {
@@ -108,23 +135,15 @@ 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, add_project_1.maybeJs)(options, `src/main.tsx`)),
+            main: (0, devkit_1.joinPathFragments)(options.appProjectRoot, (0, maybe_js_1.maybeJs)(options, `src/main.tsx`)),
             tsConfig: (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'tsconfig.app.json'),
             target: 'web',
             newProject: true,
-            uiFramework: 'react',
+            framework: 'react',
         });
         tasks.push(rspackTask);
     }
@@ -132,10 +151,11 @@ 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: 'c8',
+            coverageProvider: 'v8',
             project: options.projectName,
             inSourceTests: options.inSourceTests,
             skipFormat: true,
+            addPlugin: options.addPlugin,
         });
         tasks.push(vitestTask);
         createOrEditViteConfig(host, {
@@ -181,8 +201,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, withWeb } = require('@nx/rspack');
-        module.exports = composePlugins(withNx(), withWeb(), (config) => {
+        const { composePlugins, withNx, withReact } = require('@nx/rspack');
+        module.exports = composePlugins(withNx(), withReact(), (config) => {
           config.module.rules.push({
             test: /\\.[jt]sx$/i,
             use: [
@@ -202,6 +222,9 @@ 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 %>" /><% } %>
+    <% if (!styledModule && style !== 'none') { %><link rel="stylesheet" href="/src/styles.<%= style === 'tailwind' ? 'css' : style %>" /><% } %>
   </head>
   <body>
     <div id="root"></div>

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

@@ -3,8 +3,6 @@
   <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,9 +1,50 @@
+<% 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(), (config) => {
-  // Update the webpack config as needed here.
-  // e.g. `config.plugins.push(new MyPlugin())`
-  return config;
-});
+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;
+  }
+);
+<% } %>

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

@@ -274,12 +274,21 @@ 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);
     }
@@ -644,7 +653,8 @@ export function NxWelcome({ title }: { title: string }) {
             </div>
             <div id="other-links">
               <a
-                className="button-pill nx-console rounded shadow"
+                id="nx-console"
+                className="button-pill rounded shadow"
                 href="https://marketplace.visualstudio.com/items?itemName=nrwl.angular-console&utm_source=nx-project"
                 target="_blank"
                 rel="noreferrer"
@@ -660,23 +670,35 @@ export function NxWelcome({ title }: { title: string }) {
                 </svg>
                 <span>
                   Install Nx Console for VSCode
-                  <span>The official VSCode plugin for Nx.</span>
+                  <span>The official VSCode extension for Nx.</span>
                 </span>
               </a>
               <a
-                className="button-pill nx-console rounded shadow"
+                id="nx-console-jetbrains"
+                className="button-pill rounded shadow"
                 href="https://plugins.jetbrains.com/plugin/21060-nx-console"
                 target="_blank"
                 rel="noreferrer"
               >
                 <svg
-                  fill="currentColor"
-                  role="img"
-                  viewBox="0 0 24 24"
+                  height="48"
+                  width="48"
+                  viewBox="20 20 60 60"
                   xmlns="http://www.w3.org/2000/svg"
                 >
-                  <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>
+                  <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>
                 </svg>
                 <span>
                   Install Nx Console for JetBrains
@@ -705,7 +727,7 @@ export function NxWelcome({ title }: { title: string }) {
                     />
                   </svg>
                   <h2>
-                    NxCloud
+                    Nx Cloud
                     <span>Enable faster CI & better DX</span>
                   </h2>
                 </div>
@@ -713,7 +735,7 @@ export function NxWelcome({ title }: { title: string }) {
                   You can activate distributed tasks executions and caching by
                   running:
                 </p>
-                <pre>nx connect-to-nx-cloud</pre>
+                <pre>nx connect</pre>
                 <a
                   href="https://nx.app/?utm_source=nx-project"
                   target="_blank"
@@ -770,9 +792,28 @@ 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 button --project ui
+                nx g @nx/react:component ui/src/lib/button
               </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