@nx/react 0.0.0-pr-29720-06f67e5 → 0.0.0-pr-3-4fa8cf8

package/src/generators/application/files/react-router-ssr/ts-solution/package.json__tmpl__

@@ -0,0 +1,24 @@
+{
+  "name": "<%= projectName %>",
+  "private": true,
+  "type": "module",
+  "scripts": {},
+  "dependencies": {
+    "@react-router/node": "<%= reactRouterVersion %>",
+    "@react-router/serve": "<%= reactRouterVersion %>",
+    "isbot": "<%= reactRouterIsBotVersion %>",
+    "react": "<%= reactVersion %>",
+    "react-dom": "<%= reactVersion %>",
+    "react-router": "<%= reactRouterVersion %>"
+  },
+  "devDependencies": {
+    "@react-router/dev": "<%= reactRouterVersion %>",
+    "@types/node": "<%= typesNodeVersion %>",
+    "@types/react": "<%= reactVersion %>",
+    "@types/react-dom": "<%= reactVersion %>"
+  },
+  "engines": {
+  "node": ">=20"
+  },
+  "sideEffects": false,
+}

package/src/generators/application/files/react-router-ssr/ts-solution/tsconfig.app.json__tmpl__

@@ -0,0 +1,39 @@
+{
+  "extends": "<%= offsetFromRoot %>tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "lib": ["DOM", "DOM.Iterable", "ES2019"],
+    "types": ["@react-router/node", "vite/client"],
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "target": "ES2022",
+    "strict": true,
+    "allowJs": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true
+  },
+  "include": [
+    "app/**/*.ts",
+    "app/**/*.tsx",
+    "app/**/*.js",
+    "app/**/*.jsx",
+    "**/.server/**/*.ts",
+    "**/.server/**/*.tsx",
+    "**/.client/**/*.ts",
+    "**/.client/**/*.tsx"
+  ],
+  "exclude": [
+    "tests/**/*.spec.ts",
+    "tests/**/*.test.ts",
+    "tests/**/*.spec.tsx",
+    "tests/**/*.test.tsx",
+    "tests/**/*.spec.js",
+    "tests/**/*.test.js",
+    "tests/**/*.spec.jsx",
+    "tests/**/*.test.jsx"
+  ]
+}

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

@@ -28,8 +28,10 @@ async function addE2e(tree, options) {
         e2eWebServerInfo = await getWebpackE2EWebServerInfo(tree, options.projectName, (0, devkit_1.joinPathFragments)(options.appProjectRoot, `webpack.config.${options.js ? 'js' : 'ts'}`), options.addPlugin, options.devServerPort ?? 4200);
     }
     else if (options.bundler === 'vite') {
-        const { getViteE2EWebServerInfo } = (0, devkit_1.ensurePackage)('@nx/vite', versions_1.nxVersion);
-        e2eWebServerInfo = await getViteE2EWebServerInfo(tree, options.projectName, (0, devkit_1.joinPathFragments)(options.appProjectRoot, `vite.config.${options.js ? 'js' : 'ts'}`), options.addPlugin, options.devServerPort ?? 4200);
+        const { getViteE2EWebServerInfo, getReactRouterE2EWebServerInfo } = (0, devkit_1.ensurePackage)('@nx/vite', versions_1.nxVersion);
+        e2eWebServerInfo = options.useReactRouter
+            ? await getReactRouterE2EWebServerInfo(tree, options.projectName, (0, devkit_1.joinPathFragments)(options.appProjectRoot, `vite.config.${options.js ? 'js' : 'ts'}`), options.addPlugin, options.devServerPort ?? 4200)
+            : await getViteE2EWebServerInfo(tree, options.projectName, (0, devkit_1.joinPathFragments)(options.appProjectRoot, `vite.config.${options.js ? 'js' : 'ts'}`), options.addPlugin, options.devServerPort ?? 4200);
     }
     else if (options.bundler === 'rsbuild') {
         (0, devkit_1.ensurePackage)('@nx/rsbuild', versions_1.nxVersion);
@@ -46,17 +48,15 @@ async function addE2e(tree, options) {
     switch (options.e2eTestRunner) {
         case 'cypress': {
             const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/cypress', versions_1.nxVersion);
-            if (options.isUsingTsSolutionConfig) {
-                (0, devkit_1.writeJson)(tree, (0, devkit_1.joinPathFragments)(options.e2eProjectRoot, 'package.json'), {
-                    name: options.e2eProjectName,
-                    version: '0.0.1',
-                    private: true,
-                    nx: {
-                        projectType: 'application',
-                        sourceRoot: (0, devkit_1.joinPathFragments)(options.e2eProjectRoot, 'src'),
-                        implicitDependencies: [options.projectName],
-                    },
-                });
+            const packageJson = {
+                name: options.e2eProjectName,
+                version: '0.0.1',
+                private: true,
+            };
+            if (!options.useProjectJson) {
+                packageJson.nx = {
+                    implicitDependencies: [options.projectName],
+                };
             }
             else {
                 (0, devkit_1.addProjectConfiguration)(tree, options.e2eProjectName, {
@@ -68,6 +68,9 @@ async function addE2e(tree, options) {
                     tags: [],
                 });
             }
+            if (!options.useProjectJson || options.isUsingTsSolutionConfig) {
+                (0, devkit_1.writeJson)(tree, (0, devkit_1.joinPathFragments)(options.e2eProjectRoot, 'package.json'), packageJson);
+            }
             const e2eTask = await configurationGenerator(tree, {
                 ...options,
                 project: options.e2eProjectName,
@@ -116,17 +119,15 @@ async function addE2e(tree, options) {
         }
         case 'playwright': {
             const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/playwright', versions_1.nxVersion);
-            if (options.isUsingTsSolutionConfig) {
-                (0, devkit_1.writeJson)(tree, (0, devkit_1.joinPathFragments)(options.e2eProjectRoot, 'package.json'), {
-                    name: options.e2eProjectName,
-                    version: '0.0.1',
-                    private: true,
-                    nx: {
-                        projectType: 'application',
-                        sourceRoot: (0, devkit_1.joinPathFragments)(options.e2eProjectRoot, 'src'),
-                        implicitDependencies: [options.projectName],
-                    },
-                });
+            const packageJson = {
+                name: options.e2eProjectName,
+                version: '0.0.1',
+                private: true,
+            };
+            if (!options.useProjectJson) {
+                packageJson.nx = {
+                    implicitDependencies: [options.projectName],
+                };
             }
             else {
                 (0, devkit_1.addProjectConfiguration)(tree, options.e2eProjectName, {
@@ -135,8 +136,12 @@ async function addE2e(tree, options) {
                     sourceRoot: (0, devkit_1.joinPathFragments)(options.e2eProjectRoot, 'src'),
                     targets: {},
                     implicitDependencies: [options.projectName],
+                    tags: [],
                 });
             }
+            if (!options.useProjectJson || options.isUsingTsSolutionConfig) {
+                (0, devkit_1.writeJson)(tree, (0, devkit_1.joinPathFragments)(options.e2eProjectRoot, 'package.json'), packageJson);
+            }
             const e2eTask = await configurationGenerator(tree, {
                 project: options.e2eProjectName,
                 skipFormat: true,

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

@@ -1,3 +1,4 @@
 import { type Tree, type GeneratorCallback } from '@nx/devkit';
 import { NormalizedSchema } from '../schema';
 export declare function addLinting(host: Tree, options: NormalizedSchema): Promise<GeneratorCallback>;
+export declare function isEslintInstalled(tree: Tree): boolean;

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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.addLinting = addLinting;
+exports.isEslintInstalled = isEslintInstalled;
 const devkit_1 = require("@nx/devkit");
 const eslint_1 = require("@nx/eslint");
 const eslint_file_1 = require("@nx/eslint/src/generators/utils/eslint-file");
@@ -8,6 +9,7 @@ const flat_config_1 = require("@nx/eslint/src/utils/flat-config");
 const devkit_2 = require("@nx/devkit");
 const add_swc_dependencies_1 = require("@nx/js/src/utils/swc/add-swc-dependencies");
 const lint_1 = require("../../../utils/lint");
+const versions_1 = require("../../../utils/versions");
 async function addLinting(host, options) {
     const tasks = [];
     if (options.linter === eslint_1.Linter.EsLint) {
@@ -43,6 +45,42 @@ async function addLinting(host, options) {
             const addSwcTask = (0, add_swc_dependencies_1.addSwcDependencies)(host);
             tasks.push(installTask, addSwcTask);
         }
+        if (options.useReactRouter) {
+            await ignoreReactRouterFilesInEslintConfig(host, options.appProjectRoot);
+        }
     }
     return (0, devkit_2.runTasksInSerial)(...tasks);
 }
+async function ignoreReactRouterFilesInEslintConfig(tree, projectRoot) {
+    if (!isEslintInstalled(tree)) {
+        return;
+    }
+    (0, devkit_1.ensurePackage)('@nx/eslint', versions_1.nxVersion);
+    const { addIgnoresToLintConfig, isEslintConfigSupported } = await Promise.resolve().then(() => require('@nx/eslint/src/generators/utils/eslint-file'));
+    if (!isEslintConfigSupported(tree)) {
+        return;
+    }
+    const { useFlatConfig } = await Promise.resolve().then(() => require('@nx/eslint/src/utils/flat-config'));
+    const isUsingFlatConfig = useFlatConfig(tree);
+    if (!projectRoot && !isUsingFlatConfig) {
+        // root eslintrc files ignore all files and the root eslintrc files add
+        // back all the project files, so we only add the ignores to the project
+        // eslintrc files
+        return;
+    }
+    // for flat config, we update the root config file
+    const directory = isUsingFlatConfig ? '' : projectRoot ?? '';
+    addIgnoresToLintConfig(tree, directory, ['**/build', '**/.react-router']);
+}
+function isEslintInstalled(tree) {
+    try {
+        require('eslint');
+        return true;
+    }
+    catch { }
+    // it might not be installed yet, but it might be in the tree pending install
+    const { devDependencies, dependencies } = tree.exists('package.json')
+        ? (0, devkit_1.readJson)(tree, 'package.json')
+        : {};
+    return !!devDependencies?.['eslint'] || !!dependencies?.['eslint'];
+}

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

@@ -28,26 +28,42 @@ function addProject(host, options) {
             serve: createRspackServeTarget(options),
         };
     }
-    if (options.isUsingTsSolutionConfig) {
-        (0, devkit_1.writeJson)(host, (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'package.json'), {
-            name: options.projectName,
-            version: '0.0.1',
-            private: true,
-        });
+    const packageJson = {
+        name: options.importPath,
+        version: '0.0.1',
+        private: true,
+    };
+    if (!options.useProjectJson) {
+        if (options.projectName !== options.importPath) {
+            packageJson.nx = { name: options.projectName };
+        }
+        if (Object.keys(project.targets).length) {
+            packageJson.nx ??= {};
+            packageJson.nx.targets = project.targets;
+        }
+        if (options.parsedTags?.length) {
+            packageJson.nx ??= {};
+            packageJson.nx.tags = options.parsedTags;
+        }
     }
-    if (!options.isUsingTsSolutionConfig || options.alwaysGenerateProjectJson) {
+    else {
         (0, devkit_1.addProjectConfiguration)(host, options.projectName, {
             ...project,
         });
     }
-    else if (options.parsedTags?.length ||
-        Object.keys(project.targets).length) {
-        const updatedProject = {
-            root: options.appProjectRoot,
-            targets: project.targets,
-            tags: options.parsedTags?.length ? options.parsedTags : undefined,
-        };
-        (0, devkit_1.updateProjectConfiguration)(host, options.projectName, updatedProject);
+    if (!options.useProjectJson || options.isUsingTsSolutionConfig) {
+        // React Router already adds a package.json to the project root
+        if (options.useReactRouter) {
+            (0, devkit_1.updateJson)(host, (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'package.json'), (json) => {
+                return {
+                    name: packageJson.name,
+                    ...json,
+                };
+            });
+        }
+        else {
+            (0, devkit_1.writeJson)(host, (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'package.json'), packageJson);
+        }
     }
 }
 function createRspackBuildTarget(options) {

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

@@ -20,7 +20,7 @@ function addRouting(host, 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));
+    const changes = (0, devkit_1.applyChangesToString)(appFileContent, (0, ast_utils_1.addInitialRoutes)(appPath, appSource, options.inSourceTests));
     host.write(appPath, changes);
     if (!options.skipPackageJson) {
         return (0, devkit_1.addDependenciesToPackageJson)(host, { 'react-router-dom': versions_1.reactRouterDomVersion }, {});

package/src/generators/application/lib/bundlers/add-vite.js

@@ -11,6 +11,18 @@ async function setupViteConfiguration(tree, options, tasks) {
     if (tree.exists((0, devkit_1.joinPathFragments)(options.appProjectRoot, 'src/environments'))) {
         tree.delete((0, devkit_1.joinPathFragments)(options.appProjectRoot, 'src/environments'));
     }
+    const reactRouterFrameworkConfig = {
+        imports: [`import { reactRouter } from '@react-router/dev/vite'`],
+        plugins: ['!process.env.VITEST && reactRouter()'],
+    };
+    const baseReactConfig = {
+        imports: [
+            options.compiler === 'swc'
+                ? `import react from '@vitejs/plugin-react-swc'`
+                : `import react from '@vitejs/plugin-react'`,
+        ],
+        plugins: ['react()'],
+    };
     const viteTask = await viteConfigurationGenerator(tree, {
         uiFramework: 'react',
         project: options.projectName,
@@ -29,12 +41,9 @@ async function setupViteConfiguration(tree, options, tasks) {
         includeVitest: options.unitTestRunner === 'vitest',
         inSourceTests: options.inSourceTests,
         rollupOptionsExternal: ["'react'", "'react-dom'", "'react/jsx-runtime'"],
-        imports: [
-            options.compiler === 'swc'
-                ? `import react from '@vitejs/plugin-react-swc'`
-                : `import react from '@vitejs/plugin-react'`,
-        ],
-        plugins: ['react()'],
+        ...(options.useReactRouter
+            ? reactRouterFrameworkConfig
+            : baseReactConfig),
     }, false);
 }
 async function setupVitestConfiguration(tree, options, tasks) {

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

@@ -12,6 +12,7 @@ const get_app_tests_1 = require("./get-app-tests");
 const onboarding_1 = require("nx/src/nx-cloud/utilities/onboarding");
 const has_rspack_plugin_1 = require("../../../utils/has-rspack-plugin");
 const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
+const versions_1 = require("../../../utils/versions");
 async function createApplicationFiles(host, options) {
     let styleSolutionSpecificAppFiles;
     if (options.styledModule && options.style !== 'styled-jsx') {
@@ -39,8 +40,15 @@ async function createApplicationFiles(host, options) {
     const relativePathToRootTsConfig = (0, js_1.getRelativePathToRootTsConfig)(host, options.appProjectRoot);
     const appTests = (0, get_app_tests_1.getAppTests)(options);
     const templateVariables = {
-        ...(0, devkit_1.names)(options.name),
+        ...options.names,
         ...options,
+        typesNodeVersion: versions_1.typesNodeVersion,
+        typesReactDomVersion: versions_1.typesReactDomVersion,
+        reactRouterVersion: versions_1.reactRouterVersion,
+        typesReactVersion: versions_1.typesReactVersion,
+        reactDomVersion: versions_1.reactDomVersion,
+        reactVersion: versions_1.reactVersion,
+        reactRouterIsBotVersion: versions_1.reactRouterIsBotVersion,
         js: !!options.js, // Ensure this is defined in template
         tmpl: '',
         offsetFromRoot: (0, devkit_1.offsetFromRoot)(options.appProjectRoot),
@@ -50,9 +58,12 @@ async function createApplicationFiles(host, options) {
         hasStyleFile,
         isUsingTsSolutionSetup: (0, ts_solution_setup_1.isUsingTsSolutionSetup)(host),
     };
-    if (options.bundler === 'vite') {
+    if (options.bundler === 'vite' && !options.useReactRouter) {
         (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, '../files/base-vite'), options.appProjectRoot, templateVariables);
     }
+    else if (options.bundler === 'vite' && options.useReactRouter) {
+        generateReactRouterFiles(host, options, templateVariables);
+    }
     else if (options.bundler === 'webpack') {
         (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, '../files/base-webpack'), options.appProjectRoot, {
             ...templateVariables,
@@ -137,9 +148,12 @@ async function createApplicationFiles(host, options) {
         const tutorialUrl = options.rootProject
             ? 'https://nx.dev/getting-started/tutorials/react-standalone-tutorial'
             : 'https://nx.dev/react-tutorial/1-code-generation?utm_source=nx-project';
-        (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, '../files/nx-welcome', onBoardingStatus), options.appProjectRoot, { ...templateVariables, connectCloudUrl, tutorialUrl });
+        const path = options.useReactRouter
+            ? '../files/react-router-ssr/nx-welcome'
+            : '../files/nx-welcome';
+        (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, path, onBoardingStatus), options.appProjectRoot, { ...templateVariables, connectCloudUrl, tutorialUrl });
     }
-    (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, styleSolutionSpecificAppFiles), options.appProjectRoot, templateVariables);
+    (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, styleSolutionSpecificAppFiles, options.useReactRouter ? 'src' : ''), options.appProjectRoot, templateVariables);
     if (options.js) {
         (0, devkit_1.toJS)(host, {
             useJsx: options.bundler === 'vite' || options.bundler === 'rspack',
@@ -194,3 +208,26 @@ function createNxRspackPluginOptions(options, rootOffset) {
             ],
     };
 }
+function generateReactRouterFiles(tree, options, templateVariables) {
+    (0, devkit_1.generateFiles)(tree, (0, path_1.join)(__dirname, '../files/react-router-ssr/common'), options.appProjectRoot, templateVariables);
+    if (options.rootProject) {
+        const gitignore = tree.read('.gitignore', 'utf-8');
+        tree.write('.gitignore', `${gitignore}\n.cache\nbuild\npublic/build\n.env\n\.react-router\n`);
+    }
+    else {
+        (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, '../files/react-router-ssr/non-root'), options.appProjectRoot, templateVariables);
+    }
+    if (options.isUsingTsSolutionConfig) {
+        (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, '../files/react-router-ssr/ts-solution'), options.appProjectRoot, templateVariables);
+        (0, devkit_1.updateJson)(tree, (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'package.json'), (json) => {
+            if (options.projectName !== options.importPath) {
+                json.nx = { name: options.projectName };
+            }
+            if (options.parsedTags?.length) {
+                json.nx ??= {};
+                json.nx.tags = options.parsedTags;
+            }
+            return json;
+        });
+    }
+}

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

@@ -11,13 +11,24 @@ async function installCommonDependencies(host, options) {
     const reactDeps = await (0, version_utils_1.getReactDependenciesVersionsToInstall)(host);
     const dependencies = {};
     const devDependencies = {
-        '@types/node': versions_1.typesNodeVersion,
         '@types/react': reactDeps['@types/react'],
         '@types/react-dom': reactDeps['@types/react-dom'],
+        '@types/node': versions_1.typesNodeVersion,
+        ...(options.useReactRouter
+            ? {
+                '@react-router/dev': versions_1.reactRouterVersion,
+            }
+            : {}),
     };
     if (options.bundler !== 'vite') {
         dependencies['tslib'] = versions_1.tsLibVersion;
     }
+    if (options.useReactRouter) {
+        dependencies['react-router'] = versions_1.reactRouterVersion;
+        dependencies['@react-router/node'] = versions_1.reactRouterVersion;
+        dependencies['@react-router/serve'] = versions_1.reactRouterVersion;
+        dependencies['isbot'] = versions_1.reactRouterIsBotVersion;
+    }
     // Vite requires style preprocessors to be installed manually.
     // `@nx/webpack` installs them automatically for now.
     if (options.bundler === 'vite' || options.unitTestRunner === 'vitest') {
@@ -45,5 +56,5 @@ async function installCommonDependencies(host, options) {
         devDependencies['@testing-library/react'] = versions_1.testingLibraryReactVersion;
         devDependencies['@testing-library/dom'] = versions_1.testingLibraryDomVersion;
     }
-    return (0, devkit_1.addDependenciesToPackageJson)(host, {}, devDependencies);
+    return (0, devkit_1.addDependenciesToPackageJson)(host, dependencies, devDependencies);
 }

package/src/generators/application/lib/normalize-options.d.ts

@@ -1,5 +1,3 @@
 import { Tree } from '@nx/devkit';
 import { NormalizedSchema, Schema } from '../schema';
-export declare function normalizeDirectory(options: Schema): string;
-export declare function normalizeProjectName(options: Schema): string;
 export declare function normalizeOptions<T extends Schema = Schema>(host: Tree, options: Schema): Promise<NormalizedSchema<T>>;

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

@@ -1,27 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.normalizeDirectory = normalizeDirectory;
-exports.normalizeProjectName = normalizeProjectName;
 exports.normalizeOptions = normalizeOptions;
 const devkit_1 = require("@nx/devkit");
 const project_name_and_root_utils_1 = require("@nx/devkit/src/generators/project-name-and-root-utils");
 const assertion_1 = require("../../../utils/assertion");
 const find_free_port_1 = require("./find-free-port");
 const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
-const get_import_path_1 = require("@nx/js/src/utils/get-import-path");
-function normalizeDirectory(options) {
-    options.directory = options.directory?.replace(/\\{1,2}/g, '/');
-    const { projectDirectory } = (0, devkit_1.extractLayoutDirectory)(options.directory);
-    return projectDirectory
-        ? `${(0, devkit_1.names)(projectDirectory).fileName}/${(0, devkit_1.names)(options.name).fileName}`
-        : (0, devkit_1.names)(options.name).fileName;
-}
-function normalizeProjectName(options) {
-    return normalizeDirectory(options).replace(new RegExp('/', 'g'), '-');
-}
 async function normalizeOptions(host, options) {
-    await (0, project_name_and_root_utils_1.ensureProjectName)(host, options, 'application');
-    const { projectName: appProjectName, projectRoot: appProjectRoot } = await (0, project_name_and_root_utils_1.determineProjectNameAndRootOptions)(host, {
+    await (0, project_name_and_root_utils_1.ensureRootProjectName)(options, 'application');
+    const { projectName, names: projectNames, projectRoot: appProjectRoot, importPath, } = await (0, project_name_and_root_utils_1.determineProjectNameAndRootOptions)(host, {
         name: options.name,
         projectType: 'application',
         directory: options.directory,
@@ -32,6 +19,8 @@ async function normalizeOptions(host, options) {
         nxJson.useInferencePlugins !== false;
     options.addPlugin ??= addPlugin;
     options.rootProject = appProjectRoot === '.';
+    const isUsingTsSolutionConfig = (0, ts_solution_setup_1.isUsingTsSolutionSetup)(host);
+    const appProjectName = !isUsingTsSolutionConfig || options.name ? projectName : importPath;
     const e2eProjectName = options.rootProject ? 'e2e' : `${appProjectName}-e2e`;
     const e2eProjectRoot = options.rootProject ? 'e2e' : `${appProjectRoot}-e2e`;
     const parsedTags = options.tags
@@ -42,23 +31,25 @@ async function normalizeOptions(host, options) {
         ? null
         : options.style;
     (0, assertion_1.assertValidStyle)(options.style);
-    const isUsingTsSolutionConfig = (0, ts_solution_setup_1.isUsingTsSolutionSetup)(host);
+    options.bundler = options.useReactRouter ? 'vite' : options.bundler;
+    options.useReactRouter = options.routing ? options.useReactRouter : false;
     const normalized = {
         ...options,
-        name: appProjectName,
-        projectName: isUsingTsSolutionConfig
-            ? (0, get_import_path_1.getImportPath)(host, appProjectName)
-            : appProjectName,
+        projectName: appProjectName,
         appProjectRoot,
+        importPath,
         e2eProjectName,
         e2eProjectRoot,
         parsedTags,
         fileName,
         styledModule,
         hasStyles: options.style !== 'none',
+        names: (0, devkit_1.names)(projectNames.projectSimpleName),
         isUsingTsSolutionConfig,
+        useProjectJson: options.useProjectJson ?? !isUsingTsSolutionConfig,
     };
     normalized.routing = normalized.routing ?? false;
+    normalized.useReactRouter = normalized.useReactRouter ?? false;
     normalized.strict = normalized.strict ?? true;
     normalized.classComponent = normalized.classComponent ?? false;
     normalized.compiler = normalized.compiler ?? 'babel';

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

@@ -1,3 +1,4 @@
+import type { names } from '@nx/devkit';
 import type { Linter, LinterType } from '@nx/eslint';
 import type { SupportedStyles } from '../../../typings/style';
 
@@ -13,6 +14,7 @@ export interface Schema {
   linter: Linter | LinterType;
   classComponent?: boolean;
   routing?: boolean;
+  useReactRouter?: boolean;
   skipNxJson?: boolean;
   js?: boolean;
   globalCss?: boolean;
@@ -30,7 +32,7 @@ export interface Schema {
   nxCloudToken?: string;
   useTsSolution?: boolean;
   formatter?: 'prettier' | 'none';
-  alwaysGenerateProjectJson?: boolean; // this is needed for MF currently
+  useProjectJson?: boolean;
 }
 
 export interface NormalizedSchema<T extends Schema = Schema> extends T {
@@ -38,11 +40,13 @@ export interface NormalizedSchema<T extends Schema = Schema> extends T {
   appProjectRoot: string;
   e2eProjectName: string;
   e2eProjectRoot: string;
+  importPath: string;
   parsedTags: string[];
   fileName: string;
   styledModule: null | SupportedStyles;
   hasStyles: boolean;
   unitTestRunner: 'jest' | 'vitest' | 'none';
   addPlugin?: boolean;
+  names: ReturnType<typeof names>;
   isUsingTsSolutionConfig?: boolean;
 }

package/src/generators/application/schema.json

@@ -83,7 +83,12 @@
     "routing": {
       "type": "boolean",
       "description": "Generate application with routes.",
-      "x-prompt": "Would you like to add React Router to this application?",
+      "x-prompt": "Would you like to add routing to this application?",
+      "default": false
+    },
+    "useReactRouter": {
+      "description": "Use React Router for routing.",
+      "type": "boolean",
       "default": false
     },
     "skipFormat": {
@@ -187,6 +192,10 @@
       "description": "Generate a React app with a minimal setup, no separate test files.",
       "type": "boolean",
       "default": false
+    },
+    "useProjectJson": {
+      "type": "boolean",
+      "description": "Use a `project.json` configuration file instead of inlining the Nx configuration in the `package.json` file."
     }
   },
   "required": ["directory"],

package/src/generators/host/host.js

@@ -19,7 +19,10 @@ const update_module_federation_tsconfig_1 = require("./lib/update-module-federat
 async function hostGenerator(host, schema) {
     const tasks = [];
     const options = {
-        ...(await (0, normalize_options_1.normalizeOptions)(host, schema)),
+        ...(await (0, normalize_options_1.normalizeOptions)(host, {
+            ...schema,
+            useProjectJson: true,
+        })),
         js: schema.js ?? false,
         typescriptConfiguration: schema.js
             ? false
@@ -39,7 +42,7 @@ async function hostGenerator(host, schema) {
             }
         });
     }
-    await (0, project_name_and_root_utils_1.ensureProjectName)(host, options, 'application');
+    await (0, project_name_and_root_utils_1.ensureRootProjectName)(options, 'application');
     const initTask = await (0, application_1.default)(host, {
         ...options,
         directory: options.appProjectRoot,
@@ -47,7 +50,7 @@ async function hostGenerator(host, schema) {
         // The target use-case is loading remotes as child routes, thus always enable routing.
         routing: true,
         skipFormat: true,
-        alwaysGenerateProjectJson: true,
+        useProjectJson: true,
     });
     tasks.push(initTask);
     const remotesWithPorts = [];

package/src/generators/init/init.js

@@ -4,6 +4,8 @@ exports.reactInitGenerator = reactInitGenerator;
 const devkit_1 = require("@nx/devkit");
 const versions_1 = require("../../utils/versions");
 const version_utils_1 = require("../../utils/version-utils");
+const add_plugin_1 = require("@nx/devkit/src/utils/add-plugin");
+const router_plugin_1 = require("../../plugins/router-plugin");
 async function reactInitGenerator(tree, schema) {
     const tasks = [];
     if (!schema.skipPackageJson) {
@@ -16,6 +18,27 @@ async function reactInitGenerator(tree, schema) {
             '@nx/react': versions_1.nxVersion,
         }, undefined, schema.keepExistingVersions));
     }
+    const nxJson = (0, devkit_1.readNxJson)(tree);
+    schema.addPlugin ??=
+        process.env.NX_ADD_PLUGINS !== 'false' &&
+            nxJson.useInferencePlugins !== false;
+    if (schema.addPlugin) {
+        await (0, add_plugin_1.addPlugin)(tree, await (0, devkit_1.createProjectGraphAsync)(), '@nx/react/router-plugin', router_plugin_1.createNodesV2, {
+            buildTargetName: ['build', 'react-router:build', 'react-router-build'],
+            devTargetName: ['dev', 'react-router:dev', 'react-router-dev'],
+            startTargetName: ['start', 'react-router-serve', 'react-router-start'],
+            watchDepsTargetName: [
+                'watch-deps',
+                'react-router:watch-deps',
+                'react-router-watch-deps',
+            ],
+            buildDepsTargetName: [
+                'build-deps',
+                'react-router:build-deps',
+                'react-router-build-deps',
+            ],
+        }, schema.updatePackageScripts);
+    }
     if (!schema.skipFormat) {
         await (0, devkit_1.formatFiles)(tree);
     }

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

@@ -2,4 +2,6 @@ export interface InitSchema {
   skipFormat?: boolean;
   skipPackageJson?: boolean;
   keepExistingVersions?: boolean;
+  updatePackageScripts?: boolean;
+  addPlugin?: boolean;
 }