feat(react): Add react router framework to create-nx-workspace and react generator

This also removes Remix from create-nx-workspace (React->Remix)

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 --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 --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 --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 --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

@@ -346,18 +346,30 @@ export default App;
       cleanupProject();
     });
 
-    it('should build app from libs source', () => {
-      const results = runCLI(`build ${app} --buildLibsFromSource=true`);
-      expect(results).toContain('Successfully ran target build for project');
-      // this should be more modules than build from dist
-      expect(results).toContain('38 modules transformed');
-    });
+    it('should build app from libs source and dist', () => {
+      const getModulesTransformed = (output: string) => {
+        const match = output.match(/(\d+) modules transformed/);
+        return match ? parseInt(match[1], 10) : null;
+      };
+
+      const modulesFromSourceResult = runCLI(
+        `build ${app} --buildLibsFromSource=true`
+      );
+      const modulesFromDistResult = runCLI(
+        `build ${app} --buildLibsFromSource=false`
+      );
 
-    it('should build app from libs dist', () => {
-      const results = runCLI(`build ${app} --buildLibsFromSource=false`);
-      expect(results).toContain('Successfully ran target build for project');
-      // this should be less modules than building from source
-      expect(results).toContain('36 modules transformed');
+      const modulesFromSource = getModulesTransformed(modulesFromSourceResult);
+      const modulesFromDist = getModulesTransformed(modulesFromDistResult);
+
+      expect(modulesFromSourceResult).toContain(
+        'Successfully ran target build for project'
+      );
+      expect(modulesFromDistResult).toContain(
+        'Successfully ran target build for project'
+      );
+      // this should be more modules than build from dist
+      expect(modulesFromSource).toBeGreaterThan(modulesFromDist);
     });
 
     it('should build app from libs without package.json in lib', () => {

e2e/utils/create-project-utils.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/vite/src/vite-legacy.test.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',
@@ -376,8 +382,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';
@@ -590,6 +594,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';
@@ -601,8 +607,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 {
@@ -628,17 +633,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 {
@@ -648,7 +648,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',
     });
@@ -660,14 +660,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',
@@ -747,6 +739,8 @@ async function determineReactOptions(
     nextSrcDir,
     unitTestRunner,
     e2eTestRunner,
+    useReactRouter,
+    routing,
     linter,
     formatter,
     workspaces,
@@ -1220,9 +1214,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',
@@ -1232,23 +1226,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,
@@ -1493,3 +1483,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';
+}