@nx/react 17.0.3 → 17.0.5

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

@@ -5,7 +5,20 @@ type ModuleFederationDevServerOptions = WebDevServerOptions & {
     skipRemotes?: string[];
     static?: boolean;
     isInitialHost?: boolean;
+    parallel?: number;
+    staticRemotesPort?: number;
+    pathToManifestFile?: string;
 };
+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,18 @@
 "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");
+const fs_1 = require("fs");
+const path_1 = require("path");
 function getBuildOptions(buildTarget, context) {
     const target = (0, devkit_1.parseTargetString)(buildTarget, context);
     const buildOptions = (0, devkit_1.readTargetOptions)(target, context);
@@ -14,7 +20,133 @@ 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,
+            });
+        }
+    }
+    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 startRemotes(remotes, context, options, target = 'serve') {
+    const remoteIters = [];
+    for (const app of remotes) {
+        const remoteProjectServeTarget = context.projectGraph.nodes[app].data.targets[target];
+        const isUsingModuleFederationDevServerExecutor = remoteProjectServeTarget.executor.includes('module-federation-dev-server');
+        const overrides = target === 'serve'
+            ? {
+                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 }
+                    : {}),
+            }
+            : {};
+        remoteIters.push(await (0, devkit_1.runExecutor)({
+            project: app,
+            target,
+            configuration: context.configurationName,
+        }, overrides, context));
+    }
+    return remoteIters;
+}
+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) => {
+            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) {
+                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
@@ -28,6 +160,17 @@ 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');
+    if (options.pathToManifestFile) {
+        const userPathToManifestFile = (0, node_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 ((0, path_1.extname)(options.pathToManifestFile) !== '.json') {
+            throw new Error(`The Module Federation manifest file must be a JSON. Please ensure the file at ${userPathToManifestFile} is a JSON.`);
+        }
+        pathToManifestFile = userPathToManifestFile;
+    }
     if (!options.isInitialHost) {
         return yield* currIter;
     }
@@ -36,57 +179,26 @@ async function* moduleFederationDevServer(options, context) {
         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'];
-        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,
-            ...(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`]
-                : []),
-        ], {
-            cwd: context.root,
-            stdio: ['ignore', 'pipe', 'pipe', 'ipc'],
-        });
-        staticProcess.stdout.on('data', (data) => {
-            if (isCollectingStaticRemoteOutput) {
-                outWithErr.push(data.toString());
+    }, pathToManifestFile);
+    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 {
-                outWithErr = null;
-                staticProcess.stdout.removeAllListeners('data');
-            }
-        });
-        staticProcess.stderr.on('data', (data) => devkit_1.logger.info(data.toString()));
-        staticProcess.on('exit', (code) => {
-            if (code !== 0) {
-                devkit_1.logger.info(outWithErr.join(''));
-                throw new Error(`Remote failed to start. See above for errors.`);
+                return portToUse;
             }
-        });
-        process.on('SIGTERM', () => staticProcess.kill('SIGTERM'));
-        process.on('exit', () => staticProcess.kill('SIGTERM'));
+        }, 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 startRemotes(remotes.devRemotes, context, options, 'serve');
+    const dynamicRemotesIters = await startRemotes(remotes.dynamicRemotes, context, options, 'serve-static');
+    const staticRemotesIter = remotes.staticRemotes.length > 0
+        ? startStaticRemotesFileServer(staticRemotesConfig, context, options)
+        : undefined;
+    return yield* (0, async_iterable_1.combineAsyncIterables)(currIter, ...devRemoteIters, ...dynamicRemotesIters, ...(staticRemotesIter ? [staticRemotesIter] : []), (0, async_iterable_1.createAsyncIterable)(async ({ next, done }) => {
         if (!options.isInitialHost) {
             done();
             return;
@@ -96,20 +208,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,18 @@
       "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."
+    },
+    "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."
     }
   }
 }

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;
+  }
+);
+<% } %>