@nx/react 17.0.3 → 17.0.5

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

package/src/generators/application/files/style-tailwind/src/app/__fileName__.tsx__tmpl__

@@ -0,0 +1,33 @@
+<% if (classComponent) { %>
+import { Component } from 'react';
+<% } if (!minimal) { %>
+import NxWelcome from "./nx-welcome";
+<% } %>
+
+<% if (classComponent) { %>
+export class App extends Component {
+  render() {
+<% } else { %>
+export function App() {
+<% } %>
+  return (
+  <div>
+    <% if (!minimal) { %>
+    <NxWelcome title="<%= projectName %>"/>
+     <% } else { %>
+      <h1>
+        <span> Hello there, </span>
+        Welcome <%= projectName %> 👋
+      </h1>
+     <% } %>
+  </div>);
+<% if (classComponent) { %>
+  }
+}
+<% } else { %>
+}
+<% } %>
+
+export default App;
+
+<% if (inSourceTests === true) { %> <%- inSourceVitestTests %> <% } %>

package/src/generators/application/files/style-tailwind/src/styles.css

@@ -0,0 +1 @@
+/* You can add global styles to this file, and also import other style files */

package/src/generators/application/lib/add-e2e.js

@@ -4,13 +4,20 @@ exports.addE2e = void 0;
 const devkit_1 = require("@nx/devkit");
 const web_1 = require("@nx/web");
 const versions_1 = require("../../../utils/versions");
+const has_webpack_plugin_1 = require("../../../utils/has-webpack-plugin");
+const has_vite_plugin_1 = require("../../../utils/has-vite-plugin");
 async function addE2e(tree, options) {
     switch (options.e2eTestRunner) {
         case 'cypress': {
-            (0, web_1.webStaticServeGenerator)(tree, {
-                buildTarget: `${options.projectName}:build`,
-                targetName: 'serve-static',
-            });
+            const hasNxBuildPlugin = (options.bundler === 'webpack' && (0, has_webpack_plugin_1.hasWebpackPlugin)(tree)) ||
+                (options.bundler === 'vite' && (0, has_vite_plugin_1.hasVitePlugin)(tree));
+            if (!hasNxBuildPlugin) {
+                await (0, web_1.webStaticServeGenerator)(tree, {
+                    buildTarget: `${options.projectName}:build`,
+                    targetName: 'serve-static',
+                    spa: true,
+                });
+            }
             const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/cypress', versions_1.nxVersion);
             (0, devkit_1.addProjectConfiguration)(tree, options.e2eProjectName, {
                 projectType: 'application',
@@ -27,9 +34,19 @@ async function addE2e(tree, options) {
                 // the name and root are already normalized, instruct the generator to use them as is
                 bundler: options.bundler === 'rspack' ? 'webpack' : options.bundler,
                 skipFormat: true,
-                devServerTarget: `${options.projectName}:serve`,
+                devServerTarget: `${options.projectName}:${options.e2eWebServerTarget}`,
+                baseUrl: options.e2eWebServerAddress,
                 jsx: true,
                 rootProject: options.rootProject,
+                webServerCommands: hasNxBuildPlugin
+                    ? {
+                        default: `nx run ${options.projectName}:${options.e2eWebServerTarget}`,
+                        production: `nx run ${options.projectName}:preview`,
+                    }
+                    : undefined,
+                ciWebServerCommand: hasNxBuildPlugin
+                    ? `nx run ${options.projectName}:serve-static`
+                    : undefined,
             });
         }
         case 'playwright': {
@@ -49,9 +66,10 @@ async function addE2e(tree, options) {
                 js: false,
                 linter: options.linter,
                 setParserOptionsProject: options.setParserOptionsProject,
-                webServerCommand: `${(0, devkit_1.getPackageManagerCommand)().exec} nx serve ${options.name}`,
-                webServerAddress: 'http://localhost:4200',
+                webServerCommand: `${(0, devkit_1.getPackageManagerCommand)().exec} nx ${options.e2eWebServerTarget} ${options.name}`,
+                webServerAddress: options.e2eWebServerAddress,
                 rootProject: options.rootProject,
+                addPlugin: options.addPlugin,
             });
         }
         case 'none':

package/src/generators/application/lib/add-jest.js

@@ -4,10 +4,10 @@ exports.addJest = void 0;
 const devkit_1 = require("@nx/devkit");
 const versions_1 = require("../../../utils/versions");
 async function addJest(host, options) {
-    const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/jest', versions_1.nxVersion);
-    if (options.unitTestRunner !== 'jest') {
+    if (options.unitTestRunner === 'none') {
         return () => { };
     }
+    const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/jest', versions_1.nxVersion);
     return await configurationGenerator(host, {
         ...options,
         project: options.projectName,

package/src/generators/application/lib/add-project.d.ts

@@ -1,3 +1,3 @@
 import { NormalizedSchema } from '../schema';
-export declare function addProject(host: any, options: NormalizedSchema): void;
-export declare function maybeJs(options: NormalizedSchema, path: string): string;
+import { Tree } from '@nx/devkit';
+export declare function addProject(host: Tree, options: NormalizedSchema): void;

package/src/generators/application/lib/add-project.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.maybeJs = exports.addProject = void 0;
+exports.addProject = void 0;
 const devkit_1 = require("@nx/devkit");
+const has_webpack_plugin_1 = require("../../../utils/has-webpack-plugin");
+const maybe_js_1 = require("../../../utils/maybe-js");
 function addProject(host, options) {
     const project = {
         root: options.appProjectRoot,
@@ -11,22 +13,18 @@ function addProject(host, options) {
         tags: options.parsedTags,
     };
     if (options.bundler === 'webpack') {
-        project.targets = {
-            build: createBuildTarget(options),
-            serve: createServeTarget(options),
-        };
+        if (!(0, has_webpack_plugin_1.hasWebpackPlugin)(host) || !options.addPlugin) {
+            project.targets = {
+                build: createBuildTarget(options),
+                serve: createServeTarget(options),
+            };
+        }
     }
     (0, devkit_1.addProjectConfiguration)(host, options.projectName, {
         ...project,
     });
 }
 exports.addProject = addProject;
-function maybeJs(options, path) {
-    return options.js && (path.endsWith('.ts') || path.endsWith('.tsx'))
-        ? path.replace(/\.tsx?$/, '.js')
-        : path;
-}
-exports.maybeJs = maybeJs;
 function createBuildTarget(options) {
     return {
         executor: '@nx/webpack:webpack',
@@ -39,7 +37,7 @@ function createBuildTarget(options) {
                 : options.projectName),
             index: (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'src/index.html'),
             baseHref: '/',
-            main: (0, devkit_1.joinPathFragments)(options.appProjectRoot, 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'),
             assets: [
                 (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'src/favicon.ico'),
@@ -51,7 +49,6 @@ function createBuildTarget(options) {
                     (0, devkit_1.joinPathFragments)(options.appProjectRoot, `src/styles.${options.style}`),
                 ],
             scripts: [],
-            isolatedConfig: true,
             webpackConfig: (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'webpack.config.js'),
         },
         configurations: {
@@ -64,8 +61,8 @@ function createBuildTarget(options) {
             production: {
                 fileReplacements: [
                     {
-                        replace: (0, devkit_1.joinPathFragments)(options.appProjectRoot, maybeJs(options, `src/environments/environment.ts`)),
-                        with: (0, devkit_1.joinPathFragments)(options.appProjectRoot, maybeJs(options, `src/environments/environment.prod.ts`)),
+                        replace: (0, devkit_1.joinPathFragments)(options.appProjectRoot, (0, maybe_js_1.maybeJs)(options, `src/environments/environment.ts`)),
+                        with: (0, devkit_1.joinPathFragments)(options.appProjectRoot, (0, maybe_js_1.maybeJs)(options, `src/environments/environment.prod.ts`)),
                     },
                 ],
                 optimization: true,

package/src/generators/application/lib/add-routing.d.ts

@@ -1,3 +1,3 @@
-import { NormalizedSchema } from '../schema';
 import { Tree } from '@nx/devkit';
+import { NormalizedSchema } from '../schema';
 export declare function addRouting(host: Tree, options: NormalizedSchema): import("@nx/devkit").GeneratorCallback;

package/src/generators/application/lib/add-routing.js

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.addRouting = void 0;
-const ast_utils_1 = require("../../../utils/ast-utils");
-const versions_1 = require("../../../utils/versions");
 const devkit_1 = require("@nx/devkit");
 const ensure_typescript_1 = require("@nx/js/src/utils/typescript/ensure-typescript");
+const ast_utils_1 = require("../../../utils/ast-utils");
+const versions_1 = require("../../../utils/versions");
+const maybe_js_1 = require("../../../utils/maybe-js");
 let tsModule;
 function addRouting(host, options) {
     if (!options.routing) {
@@ -13,7 +14,7 @@ function addRouting(host, options) {
     if (!tsModule) {
         tsModule = (0, ensure_typescript_1.ensureTypescript)();
     }
-    const appPath = (0, devkit_1.joinPathFragments)(options.appProjectRoot, maybeJs(options, `src/app/${options.fileName}.tsx`));
+    const appPath = (0, devkit_1.joinPathFragments)(options.appProjectRoot, (0, maybe_js_1.maybeJs)(options, `src/app/${options.fileName}.tsx`));
     const appFileContent = host.read(appPath, 'utf-8');
     const appSource = tsModule.createSourceFile(appPath, appFileContent, tsModule.ScriptTarget.Latest, true);
     const changes = (0, devkit_1.applyChangesToString)(appFileContent, (0, ast_utils_1.addInitialRoutes)(appPath, appSource));
@@ -24,8 +25,3 @@ function addRouting(host, options) {
     return () => { };
 }
 exports.addRouting = addRouting;
-function maybeJs(options, path) {
-    return options.js && (path.endsWith('.ts') || path.endsWith('.tsx'))
-        ? path.replace(/\.tsx?$/, '.js')
-        : path;
-}

package/src/generators/application/lib/create-application-files.js

@@ -6,6 +6,8 @@ const js_1 = require("@nx/js");
 const path_1 = require("path");
 const create_ts_config_1 = require("../../../utils/create-ts-config");
 const get_in_source_vitest_tests_template_1 = require("../../../utils/get-in-source-vitest-tests-template");
+const maybe_js_1 = require("../../../utils/maybe-js");
+const has_webpack_plugin_1 = require("../../../utils/has-webpack-plugin");
 const get_app_tests_1 = require("./get-app-tests");
 function createApplicationFiles(host, options) {
     let styleSolutionSpecificAppFiles;
@@ -15,6 +17,9 @@ function createApplicationFiles(host, options) {
     else if (options.style === 'styled-jsx') {
         styleSolutionSpecificAppFiles = '../files/style-styled-jsx';
     }
+    else if (options.style === 'tailwind') {
+        styleSolutionSpecificAppFiles = '../files/style-tailwind';
+    }
     else if (options.style === 'none') {
         styleSolutionSpecificAppFiles = '../files/style-none';
     }
@@ -38,7 +43,12 @@ function createApplicationFiles(host, options) {
         (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, '../files/base-vite'), options.appProjectRoot, templateVariables);
     }
     else if (options.bundler === 'webpack') {
-        (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, '../files/base-webpack'), options.appProjectRoot, templateVariables);
+        (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, '../files/base-webpack'), options.appProjectRoot, {
+            ...templateVariables,
+            webpackPluginOptions: (0, has_webpack_plugin_1.hasWebpackPlugin)(host)
+                ? createNxWebpackPluginOptions(options)
+                : null,
+        });
         if (options.compiler === 'babel') {
             (0, devkit_1.writeJson)(host, `${options.appProjectRoot}/.babelrc`, {
                 presets: [
@@ -112,3 +122,22 @@ function createApplicationFiles(host, options) {
     (0, create_ts_config_1.createTsConfig)(host, options.appProjectRoot, 'app', options, relativePathToRootTsConfig);
 }
 exports.createApplicationFiles = createApplicationFiles;
+function createNxWebpackPluginOptions(options) {
+    return {
+        target: 'web',
+        compiler: options.compiler ?? 'babel',
+        outputPath: (0, devkit_1.joinPathFragments)('dist', options.appProjectRoot != '.'
+            ? options.appProjectRoot
+            : options.projectName),
+        index: './src/index.html',
+        baseHref: '/',
+        main: (0, maybe_js_1.maybeJs)(options, `./src/main.tsx`),
+        tsConfig: './tsconfig.app.json',
+        assets: ['./src/favicon.ico', './src/assets'],
+        styles: options.styledModule || !options.hasStyles
+            ? []
+            : [
+                `./src/styles.${options.style !== 'tailwind' ? options.style : 'css'}`,
+            ],
+    };
+}

package/src/generators/application/lib/install-common-dependencies.js

@@ -4,7 +4,18 @@ exports.installCommonDependencies = void 0;
 const devkit_1 = require("@nx/devkit");
 const versions_1 = require("../../../utils/versions");
 function installCommonDependencies(host, options) {
-    const devDependencies = {};
+    if (options.skipPackageJson) {
+        return () => { };
+    }
+    const dependencies = {};
+    const devDependencies = {
+        '@types/node': versions_1.typesNodeVersion,
+        '@types/react': versions_1.typesReactVersion,
+        '@types/react-dom': versions_1.typesReactDomVersion,
+    };
+    if (options.bundler !== 'vite') {
+        dependencies['tslib'] = versions_1.tsLibVersion;
+    }
     // Vite requires style preprocessors to be installed manually.
     // `@nx/webpack` installs them automatically for now.
     if (options.bundler === 'vite' || options.unitTestRunner === 'vitest') {
@@ -28,6 +39,9 @@ function installCommonDependencies(host, options) {
             devDependencies['@babel/core'] = versions_1.babelCoreVersion;
         }
     }
+    if (options.unitTestRunner && options.unitTestRunner !== 'none') {
+        devDependencies['@testing-library/react'] = versions_1.testingLibraryReactVersion;
+    }
     return (0, devkit_1.addDependenciesToPackageJson)(host, {}, devDependencies);
 }
 exports.installCommonDependencies = installCommonDependencies;

package/src/generators/application/lib/normalize-options.js

@@ -26,15 +26,46 @@ async function normalizeOptions(host, options, callingGenerator = '@nx/react:app
         rootProject: options.rootProject,
         callingGenerator,
     });
+    const nxJson = (0, devkit_1.readNxJson)(host);
+    const addPlugin = process.env.NX_ADD_PLUGINS !== 'false' &&
+        nxJson.useInferencePlugins !== false;
+    options.addPlugin ??= addPlugin;
     options.rootProject = appProjectRoot === '.';
     options.projectNameAndRootFormat = projectNameAndRootFormat;
+    let e2eWebServerTarget = 'serve';
+    if (options.addPlugin) {
+        if (nxJson.plugins) {
+            for (const plugin of nxJson.plugins) {
+                if (options.bundler === 'vite' &&
+                    typeof plugin === 'object' &&
+                    plugin.plugin === '@nx/vite/plugin' &&
+                    plugin.options.serveTargetName) {
+                    e2eWebServerTarget = plugin.options
+                        .serveTargetName;
+                }
+                else if (options.bundler === 'webpack' &&
+                    typeof plugin === 'object' &&
+                    plugin.plugin === '@nx/webpack/plugin' &&
+                    plugin.options.serveTargetName) {
+                    e2eWebServerTarget = plugin.options
+                        .serveTargetName;
+                }
+            }
+        }
+    }
+    let e2ePort = options.devServerPort ?? 4200;
+    if (nxJson.targetDefaults?.[e2eWebServerTarget] &&
+        nxJson.targetDefaults?.[e2eWebServerTarget].options?.port) {
+        e2ePort = nxJson.targetDefaults?.[e2eWebServerTarget].options?.port;
+    }
     const e2eProjectName = options.rootProject ? 'e2e' : `${appProjectName}-e2e`;
     const e2eProjectRoot = options.rootProject ? 'e2e' : `${appProjectRoot}-e2e`;
+    const e2eWebServerAddress = `http://localhost:${e2ePort}`;
     const parsedTags = options.tags
         ? options.tags.split(',').map((s) => s.trim())
         : [];
     const fileName = options.pascalCaseFiles ? 'App' : 'app';
-    const styledModule = /^(css|scss|less|none)$/.test(options.style)
+    const styledModule = /^(css|scss|less|tailwind|none)$/.test(options.style)
         ? null
         : options.style;
     (0, assertion_1.assertValidStyle)(options.style);
@@ -48,6 +79,9 @@ async function normalizeOptions(host, options, callingGenerator = '@nx/react:app
         appProjectRoot,
         e2eProjectName,
         e2eProjectRoot,
+        e2eWebServerAddress,
+        e2eWebServerTarget,
+        e2ePort,
         parsedTags,
         fileName,
         styledModule,

package/src/generators/application/lib/set-defaults.js

@@ -14,6 +14,7 @@ function setDefaults(host, options) {
     nxJson.generators['@nx/react'] = nxJson.generators['@nx/react'] || {};
     const prev = { ...nxJson.generators['@nx/react'] };
     const appDefaults = {
+        babel: true,
         style: options.style,
         linter: options.linter,
         bundler: options.bundler,

package/src/generators/application/lib/update-jest-config.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.updateSpecConfig = void 0;
+const maybe_js_1 = require("../../../utils/maybe-js");
 const jest_utils_1 = require("../../../utils/jest-utils");
 const devkit_1 = require("@nx/devkit");
 function updateSpecConfig(host, options) {
@@ -8,21 +9,20 @@ function updateSpecConfig(host, options) {
         return;
     }
     (0, devkit_1.updateJson)(host, `${options.appProjectRoot}/tsconfig.spec.json`, (json) => {
-        json.types = json.types || [];
+        const compilerOptions = json.compilerOptions ?? {};
+        const types = compilerOptions.types ?? [];
         if (options.style === 'styled-jsx') {
-            json.types.push('@nx/react/typings/styled-jsx.d.ts');
+            types.push('@nx/react/typings/styled-jsx.d.ts');
         }
-        json.types = [
-            ...json.types,
-            '@nx/react/typings/cssmodule.d.ts',
-            '@nx/react/typings/image.d.ts',
-        ];
+        types.push('@nx/react/typings/cssmodule.d.ts', '@nx/react/typings/image.d.ts');
+        compilerOptions.types = types;
+        json.compilerOptions = compilerOptions;
         return json;
     });
     if (options.unitTestRunner !== 'jest') {
         return;
     }
-    const configPath = `${options.appProjectRoot}/jest.config.${options.js ? 'js' : 'ts'}`;
+    const configPath = (0, maybe_js_1.maybeJs)(options, `${options.appProjectRoot}/jest.config.ts`);
     const originalContent = host.read(configPath, 'utf-8');
     const content = (0, jest_utils_1.updateJestConfigContent)(originalContent);
     host.write(configPath, content);

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

@@ -28,6 +28,7 @@ export interface Schema {
   rootProject?: boolean;
   bundler?: 'webpack' | 'vite' | 'rspack';
   minimal?: boolean;
+  addPlugin?: boolean;
 }
 
 export interface NormalizedSchema<T extends Schema = Schema> extends T {
@@ -35,9 +36,13 @@ export interface NormalizedSchema<T extends Schema = Schema> extends T {
   appProjectRoot: string;
   e2eProjectName: string;
   e2eProjectRoot: string;
+  e2eWebServerAddress: string;
+  e2eWebServerTarget: string;
+  e2ePort: number;
   parsedTags: string[];
   fileName: string;
   styledModule: null | SupportedStyles;
   hasStyles: boolean;
   unitTestRunner: 'jest' | 'vitest' | 'none';
+  addPlugin?: boolean;
 }

package/src/generators/application/schema.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "http://json-schema.org/schema",
+  "$schema": "https://json-schema.org/schema",
   "cli": "nx",
   "$id": "NxReactApp",
   "title": "Create a React Application",
@@ -56,11 +56,15 @@
           },
           {
             "value": "scss",
-            "label": "SASS(.scss)       [ http://sass-lang.com                     ]"
+            "label": "SASS(.scss)       [ https://sass-lang.com                     ]"
           },
           {
             "value": "less",
-            "label": "LESS              [ http://lesscss.org                       ]"
+            "label": "LESS              [ https://lesscss.org                       ]"
+          },
+          {
+            "value": "tailwind",
+            "label": "tailwind [ https://tailwindcss.com/            ]"
           },
           {
             "value": "styled-components",