@nx/react 21.0.0-beta.1 → 21.0.0-beta.3

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

@@ -27,9 +27,15 @@ async function addE2e(tree, options) {
         const { getWebpackE2EWebServerInfo } = (0, devkit_1.ensurePackage)('@nx/webpack', versions_1.nxVersion);
         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 === 'rspack') {
+        const { getRspackE2EWebServerInfo } = (0, devkit_1.ensurePackage)('@nx/rspack', versions_1.nxVersion);
+        e2eWebServerInfo = await getRspackE2EWebServerInfo(tree, options.projectName, (0, devkit_1.joinPathFragments)(options.appProjectRoot, `rspack.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 +52,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 +72,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 +123,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 +140,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-jest.js

@@ -3,19 +3,43 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.addJest = addJest;
 const devkit_1 = require("@nx/devkit");
 const versions_1 = require("../../../utils/versions");
+const node_path_1 = require("node:path");
 async function addJest(host, options) {
     if (options.unitTestRunner === 'none') {
         return () => { };
     }
     const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/jest', versions_1.nxVersion);
-    return await configurationGenerator(host, {
+    await configurationGenerator(host, {
         ...options,
         project: options.projectName,
         supportTsx: true,
         skipSerializers: true,
-        setupFile: 'none',
+        setupFile: options.useReactRouter ? 'react-router' : 'none',
         compiler: options.compiler,
         skipFormat: true,
         runtimeTsconfigFileName: 'tsconfig.app.json',
     });
+    if (options.useReactRouter) {
+        (0, devkit_1.updateJson)(host, (0, node_path_1.join)(options.appProjectRoot, 'tsconfig.spec.json'), (json) => {
+            json.include = json.include ?? [];
+            const reactRouterTestGlob = options.js
+                ? [
+                    'test/**/*.spec.jsx',
+                    'test/**/*.spec.js',
+                    'test/**/*.test.jsx',
+                    'test/**/*.test.js',
+                ]
+                : [
+                    'test/**/*.spec.tsx',
+                    'test/**/*.spec.ts',
+                    'test/**/*.test.tsx',
+                    'test/**/*.test.ts',
+                ];
+            return {
+                ...json,
+                include: Array.from(new Set([...json.include, ...reactRouterTestGlob])),
+            };
+        });
+    }
+    return () => { };
 }

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-rspack.d.ts

@@ -1,5 +1,4 @@
 import { type Tree } from '@nx/devkit';
 import { NormalizedSchema, Schema } from '../../schema';
 export declare function initRspack(tree: Tree, options: NormalizedSchema<Schema>, tasks: any[]): Promise<void>;
-export declare function setupRspackConfiguration(tree: Tree, options: NormalizedSchema<Schema>, tasks: any[]): Promise<void>;
 export declare function handleStyledJsxForRspack(tasks: any[], tree: Tree, options: NormalizedSchema<Schema>): void;

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

@@ -1,36 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.initRspack = initRspack;
-exports.setupRspackConfiguration = setupRspackConfiguration;
 exports.handleStyledJsxForRspack = handleStyledJsxForRspack;
 const devkit_1 = require("@nx/devkit");
 const pc = require("picocolors");
 const versions_1 = require("../../../../utils/versions");
-const maybe_js_1 = require("../../../../utils/maybe-js");
 async function initRspack(tree, options, tasks) {
     const { rspackInitGenerator } = (0, devkit_1.ensurePackage)('@nx/rspack', versions_1.nxVersion);
     const rspackInitTask = await rspackInitGenerator(tree, {
         ...options,
-        addPlugin: false,
         skipFormat: true,
     });
     tasks.push(rspackInitTask);
 }
-async function setupRspackConfiguration(tree, options, tasks) {
-    const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/rspack', versions_1.nxVersion);
-    const rspackTask = await configurationGenerator(tree, {
-        project: options.projectName,
-        main: (0, devkit_1.joinPathFragments)(options.appProjectRoot, (0, maybe_js_1.maybeJs)({
-            js: options.js,
-            useJsx: true,
-        }, `src/main.tsx`)),
-        tsConfig: (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'tsconfig.app.json'),
-        target: 'web',
-        newProject: true,
-        framework: 'react',
-    });
-    tasks.push(rspackTask);
-}
 function handleStyledJsxForRspack(tasks, tree, options) {
     devkit_1.logger.warn(`${pc.bold('styled-jsx')} is not supported by ${pc.bold('Rspack')}. We've added ${pc.bold('babel-loader')} to your project, but using babel will slow down your build.`);
     tasks.push((0, devkit_1.addDependenciesToPackageJson)(tree, {}, { 'babel-loader': versions_1.babelLoaderVersion }));

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.d.ts

@@ -1,3 +1,64 @@
 import { Tree } from '@nx/devkit';
+import { WithNxOptions } from '@nx/webpack';
+import { WithReactOptions } from '../../../../plugins/with-react';
 import { NormalizedSchema } from '../schema';
+export declare function getDefaultTemplateVariables(host: Tree, options: NormalizedSchema): {
+    typesNodeVersion: string;
+    typesReactDomVersion: string;
+    reactRouterVersion: string;
+    typesReactVersion: string;
+    reactDomVersion: string;
+    reactVersion: string;
+    reactRouterIsBotVersion: string;
+    js: boolean;
+    tmpl: string;
+    offsetFromRoot: string;
+    appTests: string;
+    inSourceVitestTests: string;
+    style: "none" | "styled-components" | "@emotion/styled" | "styled-jsx" | "css" | "scss" | "less";
+    hasStyleFile: boolean;
+    isUsingTsSolutionSetup: boolean;
+    projectName: string;
+    appProjectRoot: string;
+    e2eProjectName: string;
+    e2eProjectRoot: string;
+    importPath: string;
+    parsedTags: string[];
+    fileName: string;
+    styledModule: null | import("../../../..").SupportedStyles;
+    hasStyles: boolean;
+    unitTestRunner: "jest" | "vitest" | "none";
+    addPlugin?: boolean;
+    names: ReturnType<typeof import("@nx/devkit").names>;
+    isUsingTsSolutionConfig?: boolean;
+    directory: string;
+    name: string;
+    skipFormat?: boolean;
+    tags?: string;
+    inSourceTests?: boolean;
+    e2eTestRunner: "cypress" | "playwright" | "none";
+    linter: import("@nx/eslint").Linter | import("@nx/eslint").LinterType;
+    classComponent?: boolean;
+    routing?: boolean;
+    useReactRouter?: boolean;
+    skipNxJson?: boolean;
+    globalCss?: boolean;
+    strict?: boolean;
+    setParserOptionsProject?: boolean;
+    compiler?: "babel" | "swc";
+    remotes?: string[];
+    devServerPort?: number;
+    skipPackageJson?: boolean;
+    rootProject?: boolean;
+    bundler?: "webpack" | "vite" | "rspack" | "rsbuild";
+    minimal?: boolean;
+    nxCloudToken?: string;
+    useTsSolution?: boolean;
+    formatter?: "prettier" | "none";
+    useProjectJson?: boolean;
+    className: string;
+    propertyName: string;
+    constantName: string;
+};
+export declare function createNxRspackPluginOptions(options: NormalizedSchema, rootOffset: string, tsx?: boolean): WithNxOptions & WithReactOptions;
 export declare function createApplicationFiles(host: Tree, options: NormalizedSchema): Promise<void>;

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

@@ -1,5 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDefaultTemplateVariables = getDefaultTemplateVariables;
+exports.createNxRspackPluginOptions = createNxRspackPluginOptions;
 exports.createApplicationFiles = createApplicationFiles;
 const devkit_1 = require("@nx/devkit");
 const js_1 = require("@nx/js");
@@ -12,6 +14,53 @@ 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");
+function getDefaultTemplateVariables(host, options) {
+    const hasStyleFile = ['scss', 'css', 'less'].includes(options.style);
+    const appTests = (0, get_app_tests_1.getAppTests)(options);
+    return {
+        ...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),
+        appTests,
+        inSourceVitestTests: (0, get_in_source_vitest_tests_template_1.getInSourceVitestTestsTemplate)(appTests),
+        style: options.style === 'tailwind' ? 'css' : options.style,
+        hasStyleFile,
+        isUsingTsSolutionSetup: (0, ts_solution_setup_1.isUsingTsSolutionSetup)(host),
+    };
+}
+function createNxRspackPluginOptions(options, rootOffset, tsx = true) {
+    return {
+        target: 'web',
+        outputPath: options.isUsingTsSolutionConfig
+            ? 'dist'
+            : (0, devkit_1.joinPathFragments)(rootOffset, 'dist', options.appProjectRoot != '.'
+                ? options.appProjectRoot
+                : options.projectName),
+        index: './src/index.html',
+        baseHref: '/',
+        main: (0, maybe_js_1.maybeJs)({
+            js: options.js,
+            useJsx: true,
+        }, `./src/main.${tsx ? 'tsx' : 'ts'}`),
+        tsConfig: './tsconfig.app.json',
+        assets: ['./src/favicon.ico', './src/assets'],
+        styles: options.styledModule || !options.hasStyles
+            ? []
+            : [
+                `./src/styles.${options.style !== 'tailwind' ? options.style : 'css'}`,
+            ],
+    };
+}
 async function createApplicationFiles(host, options) {
     let styleSolutionSpecificAppFiles;
     if (options.styledModule && options.style !== 'styled-jsx') {
@@ -32,27 +81,17 @@ async function createApplicationFiles(host, options) {
     else {
         styleSolutionSpecificAppFiles = '../files/style-css-module';
     }
-    const hasStyleFile = ['scss', 'css', 'less'].includes(options.style);
     const onBoardingStatus = await (0, onboarding_1.createNxCloudOnboardingURLForWelcomeApp)(host, options.nxCloudToken);
     const connectCloudUrl = onBoardingStatus === 'unclaimed' &&
         (await (0, onboarding_1.getNxCloudAppOnBoardingUrl)(options.nxCloudToken));
     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,
-        js: !!options.js, // Ensure this is defined in template
-        tmpl: '',
-        offsetFromRoot: (0, devkit_1.offsetFromRoot)(options.appProjectRoot),
-        appTests,
-        inSourceVitestTests: (0, get_in_source_vitest_tests_template_1.getInSourceVitestTestsTemplate)(appTests),
-        style: options.style === 'tailwind' ? 'css' : options.style,
-        hasStyleFile,
-        isUsingTsSolutionSetup: (0, ts_solution_setup_1.isUsingTsSolutionSetup)(host),
-    };
-    if (options.bundler === 'vite') {
+    const templateVariables = getDefaultTemplateVariables(host, options);
+    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 +176,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',
@@ -171,26 +213,26 @@ function createNxWebpackPluginOptions(options, rootOffset) {
             ],
     };
 }
-function createNxRspackPluginOptions(options, rootOffset) {
-    return {
-        target: 'web',
-        outputPath: options.isUsingTsSolutionConfig
-            ? 'dist'
-            : (0, devkit_1.joinPathFragments)(rootOffset, 'dist', options.appProjectRoot != '.'
-                ? options.appProjectRoot
-                : options.projectName),
-        index: './src/index.html',
-        baseHref: '/',
-        main: (0, maybe_js_1.maybeJs)({
-            js: options.js,
-            useJsx: true,
-        }, `./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'}`,
-            ],
-    };
+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;
+        });
+    }
 }