feat(react): Add react-router to create-nx-workspace and react app generator (#30316)

This pull request introduces improvements to React Router integration
and removes the Remix preset.

## Key Changes:
- Updated `create-nx-workspace` to support React Router.
- Removed the Remix option from `create-nx-workspace`, but the package
remains to support existing users.

## SSR & React Router Support
- New users who want SSR in their React apps can enable it via the React
option and select React Router for SSR support.
- The ecosystem has shifted to migrating from Remix to React Router for
SSR needs.
- This option is only available for plain React apps and uses Vite.
Other types of React apps (Micro Frontends, Webpack, Rspack, etc.)
remain unaffected.

## Default Routing Behavior
`--routing` is now enabled by default when creating a React app using
`create-nx-workspace`, aligning with Angular’s default behaviour.

Author: ndcunningham

docs/generated/cli/create-nx-workspace.md

@@ -77,7 +77,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": {

docs/generated/packages/nx/documents/create-nx-workspace.md

@@ -25,6 +25,11 @@
         "type": "boolean",
         "default": true
       },
+      "useReactRouter": {
+        "description": "Use React Router for routing.",
+        "type": "boolean",
+        "default": false
+      },
       "standaloneApi": {
         "description": "Use Standalone Components if generating an Angular application.",
         "type": "boolean",

docs/generated/packages/react/generators/application.json

@@ -25,6 +25,11 @@
         "type": "boolean",
         "default": true
       },
+      "useReactRouter": {
+        "description": "Use React Router for routing.",
+        "type": "boolean",
+        "default": false
+      },
       "style": {
         "description": "The file extension to be used for style files.",
         "type": "string",

docs/generated/packages/workspace/generators/new.json

@@ -0,0 +1,68 @@
+import {
+  checkFilesExist,
+  cleanupProject,
+  ensureCypressInstallation,
+  newProject,
+  readFile,
+  runCLI,
+  uniq,
+} from '@nx/e2e/utils';
+
+describe('React Router Applications', () => {
+  beforeAll(() => {
+    newProject({ packages: ['@nx/react'] });
+    ensureCypressInstallation();
+  });
+
+  afterAll(() => cleanupProject());
+
+  it('should generate a react-router application', async () => {
+    const appName = uniq('app');
+    runCLI(
+      `generate @nx/react:app ${appName} --use-react-router --routing --no-interactive`
+    );
+
+    const packageJson = JSON.parse(readFile('package.json'));
+    expect(packageJson.dependencies['react-router']).toBeDefined();
+    expect(packageJson.dependencies['@react-router/node']).toBeDefined();
+    expect(packageJson.dependencies['@react-router/serve']).toBeDefined();
+    expect(packageJson.dependencies['isbot']).toBeDefined();
+
+    checkFilesExist(`${appName}/app/app.tsx`);
+    checkFilesExist(`${appName}/app/entry.client.tsx`);
+    checkFilesExist(`${appName}/app/entry.server.tsx`);
+    checkFilesExist(`${appName}/app/routes.tsx`);
+    checkFilesExist(`${appName}/react-router.config.ts`);
+    checkFilesExist(`${appName}/vite.config.ts`);
+  });
+
+  it('should be able to build a react-router application', async () => {
+    const appName = uniq('app');
+    runCLI(
+      `generate @nx/react:app ${appName} --use-react-router --routing --no-interactive`
+    );
+
+    const buildResult = runCLI(`build ${appName}`);
+    expect(buildResult).toContain('Successfully ran target build');
+  });
+
+  it('should be able to lint a react-router application', async () => {
+    const appName = uniq('app');
+    runCLI(
+      `generate @nx/react:app ${appName} --use-react-router --routing --linter=eslint --no-interactive`
+    );
+
+    const buildResult = runCLI(`lint ${appName}`);
+    expect(buildResult).toContain('Successfully ran target lint');
+  });
+
+  it('should be able to test a react-router application', async () => {
+    const appName = uniq('app');
+    runCLI(
+      `generate @nx/react:app ${appName} --use-react-router --routing --unit-test-runner=vitest --no-interactive`
+    );
+
+    const buildResult = runCLI(`test ${appName}`);
+    expect(buildResult).toContain('Successfully ran target test');
+  });
+});

docs/generated/packages/workspace/generators/preset.json

@@ -222,6 +222,7 @@ export function runCreateWorkspace(
     cwd = e2eCwd,
     bundler,
     routing,
+    useReactRouter,
     standaloneApi,
     docker,
     nextAppDir,
@@ -244,6 +245,7 @@ export function runCreateWorkspace(
     bundler?: 'webpack' | 'vite';
     standaloneApi?: boolean;
     routing?: boolean;
+    useReactRouter?: boolean;
     docker?: boolean;
     nextAppDir?: boolean;
     nextSrcDir?: boolean;
@@ -295,6 +297,10 @@ export function runCreateWorkspace(
     command += ` --routing=${routing}`;
   }
 
+  if (useReactRouter !== undefined) {
+    command += ` --useReactRouter=${useReactRouter}`;
+  }
+
   if (base) {
     command += ` --defaultBase="${base}"`;
   }

e2e/react/src/react-router.test.ts

@@ -495,7 +495,7 @@ export default defineConfig(() => ({
     watch: false,
     globals: true,
     environment: 'jsdom',
-    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    include: ['{src,tests}/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
     setupFiles: ['src/test-setup.ts'],
     reporters: ['default'],
     coverage: {

e2e/utils/create-project-utils.ts

@@ -48,11 +48,13 @@ interface ReactArguments extends BaseArguments {
   stack: 'react';
   workspaceType: 'standalone' | 'integrated';
   appName: string;
-  framework: 'none' | 'next' | 'remix';
+  framework: 'none' | 'next';
   style: string;
   bundler: 'webpack' | 'vite' | 'rspack';
   nextAppDir: boolean;
   nextSrcDir: boolean;
+  useReactRouter: boolean;
+  routing: boolean;
   unitTestRunner: 'none' | 'jest' | 'vitest';
   e2eTestRunner: 'none' | 'cypress' | 'playwright';
 }
@@ -156,10 +158,14 @@ export const commandsObject: yargs.Argv<Arguments> = yargs
             default: true,
           })
           .option('routing', {
-            describe: chalk.dim`Add a routing setup for an Angular app.`,
+            describe: chalk.dim`Add a routing setup for an Angular or React app.`,
             type: 'boolean',
             default: true,
           })
+          .option('useReactRouter', {
+            describe: chalk.dim`Generate a Server-Side Rendered (SSR) React app using React Router.`,
+            type: 'boolean',
+          })
           .option('bundler', {
             describe: chalk.dim`Bundler to be used to build the app.`,
             type: 'string',
@@ -378,8 +384,6 @@ async function determineStack(
       case Preset.ReactMonorepo:
       case Preset.NextJs:
       case Preset.NextJsStandalone:
-      case Preset.RemixStandalone:
-      case Preset.RemixMonorepo:
       case Preset.ReactNative:
       case Preset.Expo:
         return 'react';
@@ -591,6 +595,8 @@ async function determineReactOptions(
   let bundler: undefined | 'webpack' | 'vite' | 'rspack' = undefined;
   let unitTestRunner: undefined | 'none' | 'jest' | 'vitest' = undefined;
   let e2eTestRunner: undefined | 'none' | 'cypress' | 'playwright' = undefined;
+  let useReactRouter = false;
+  let routing = true;
   let nextAppDir = false;
   let nextSrcDir = false;
   let linter: undefined | 'none' | 'eslint';
@@ -602,8 +608,7 @@ async function determineReactOptions(
     preset = parsedArgs.preset;
     if (
       preset === Preset.ReactStandalone ||
-      preset === Preset.NextJsStandalone ||
-      preset === Preset.RemixStandalone
+      preset === Preset.NextJsStandalone
     ) {
       appName = parsedArgs.appName ?? parsedArgs.name;
     } else {
@@ -629,17 +634,12 @@ async function determineReactOptions(
       } else {
         preset = Preset.NextJs;
       }
-    } else if (framework === 'remix') {
-      if (isStandalone) {
-        preset = Preset.RemixStandalone;
-      } else {
-        preset = Preset.RemixMonorepo;
-      }
     } else if (framework === 'react-native') {
       preset = Preset.ReactNative;
     } else if (framework === 'expo') {
       preset = Preset.Expo;
     } else {
+      useReactRouter = await determineReactRouter(parsedArgs);
       if (isStandalone) {
         preset = Preset.ReactStandalone;
       } else {
@@ -649,7 +649,7 @@ async function determineReactOptions(
   }
 
   if (preset === Preset.ReactStandalone || preset === Preset.ReactMonorepo) {
-    bundler = await determineReactBundler(parsedArgs);
+    bundler = useReactRouter ? 'vite' : await determineReactBundler(parsedArgs);
     unitTestRunner = await determineUnitTestRunner(parsedArgs, {
       preferVitest: bundler === 'vite',
     });
@@ -661,14 +661,6 @@ async function determineReactOptions(
       exclude: 'vitest',
     });
     e2eTestRunner = await determineE2eTestRunner(parsedArgs);
-  } else if (
-    preset === Preset.RemixMonorepo ||
-    preset === Preset.RemixStandalone
-  ) {
-    unitTestRunner = await determineUnitTestRunner(parsedArgs, {
-      preferVitest: true,
-    });
-    e2eTestRunner = await determineE2eTestRunner(parsedArgs);
   } else if (preset === Preset.ReactNative || preset === Preset.Expo) {
     unitTestRunner = await determineUnitTestRunner(parsedArgs, {
       exclude: 'vitest',
@@ -748,6 +740,8 @@ async function determineReactOptions(
     nextSrcDir,
     unitTestRunner,
     e2eTestRunner,
+    useReactRouter,
+    routing,
     linter,
     formatter,
     workspaces,
@@ -1221,9 +1215,9 @@ async function determineAppName(
 
 async function determineReactFramework(
   parsedArgs: yargs.Arguments<ReactArguments>
-): Promise<'none' | 'nextjs' | 'remix' | 'expo' | 'react-native'> {
+): Promise<'none' | 'nextjs' | 'expo' | 'react-native'> {
   const reply = await enquirer.prompt<{
-    framework: 'none' | 'nextjs' | 'remix' | 'expo' | 'react-native';
+    framework: 'none' | 'nextjs' | 'expo' | 'react-native';
   }>([
     {
       name: 'framework',
@@ -1233,23 +1227,19 @@ async function determineReactFramework(
         {
           name: 'none',
           message: 'None',
-          hint: '         I only want react and react-dom',
+          hint: '         I only want react, react-dom or react-router',
         },
         {
           name: 'nextjs',
-          message: 'Next.js       [ https://nextjs.org/      ]',
-        },
-        {
-          name: 'remix',
-          message: 'Remix         [ https://remix.run/       ]',
+          message: 'Next.js       [ https://nextjs.org/       ]',
         },
         {
           name: 'expo',
-          message: 'Expo          [ https://expo.io/         ]',
+          message: 'Expo          [ https://expo.io/          ]',
         },
         {
           name: 'react-native',
-          message: 'React Native  [ https://reactnative.dev/ ]',
+          message: 'React Native  [ https://reactnative.dev/  ]',
         },
       ],
       initial: 0,
@@ -1494,3 +1484,35 @@ async function determineE2eTestRunner(
   ]);
   return reply.e2eTestRunner;
 }
+
+async function determineReactRouter(
+  parsedArgs: yargs.Arguments<{
+    useReactRouter?: boolean;
+  }>
+): Promise<boolean> {
+  if (parsedArgs.routing !== undefined && parsedArgs.routing === false)
+    return false;
+  if (parsedArgs.useReactRouter !== undefined) return parsedArgs.useReactRouter;
+  const reply = await enquirer.prompt<{
+    response: 'Yes' | 'No';
+  }>([
+    {
+      message:
+        'Would you like to use React Router for server-side rendering [https://reactrouter.com/]?',
+      type: 'autocomplete',
+      name: 'response',
+      skip: !parsedArgs.interactive || isCI(),
+      choices: [
+        {
+          name: 'Yes',
+          hint: 'I want to use React Router',
+        },
+        {
+          name: 'No',
+        },
+      ],
+      initial: 0,
+    },
+  ]);
+  return reply.response === 'Yes';
+}

packages/angular/src/generators/application/__snapshots__/application.spec.ts.snap

@@ -112,7 +112,6 @@ function getWorkspaceGlobsFromPreset(preset: string): string[] {
     case Preset.Nuxt:
     case Preset.ReactNative:
     case Preset.ReactMonorepo:
-    case Preset.RemixMonorepo:
     case Preset.VueMonorepo:
     case Preset.WebComponents:
       return ['apps/*'];

packages/create-nx-workspace/bin/create-nx-workspace.ts

@@ -13,8 +13,6 @@ export enum Preset {
   NuxtStandalone = 'nuxt-standalone',
   NextJs = 'next',
   NextJsStandalone = 'nextjs-standalone',
-  RemixMonorepo = 'remix-monorepo',
-  RemixStandalone = 'remix-standalone',
   ReactNative = 'react-native',
   Expo = 'expo',
   Nest = 'nest',

packages/create-nx-workspace/src/create-workspace.ts

@@ -184,7 +184,7 @@ export default defineConfig(() => ({
     watch: false,
     globals: true,
     environment: 'jsdom',
-    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    include: ['{src,tests}/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
     reporters: ['default'],
     coverage: {
       reportsDirectory: '../coverage/my-app',
@@ -585,7 +585,7 @@ export default defineConfig(() => ({
     watch: false,
     globals: true,
     environment: 'jsdom',
-    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    include: ['{src,tests}/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
     reporters: ['default'],
     coverage: {
       reportsDirectory: '../coverage/myApp',

packages/create-nx-workspace/src/utils/preset/preset.ts

@@ -448,7 +448,7 @@ export default defineConfig(() => ({
     watch: false,
     globals: true,
     environment: 'jsdom',
-    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    include: ['{src,tests}/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
     reporters: ['default'],
     coverage: {
       reportsDirectory: '../coverage/my-app',
@@ -511,7 +511,7 @@ export default defineConfig(() => ({
     watch: false,
     globals: true,
     environment: 'jsdom',
-    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    include: ['{src,tests}/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
     reporters: ['default'],
     coverage: {
       reportsDirectory: '../coverage/my-app',