fix(remix): generate correct e2e config if Crystal is used (#22558)

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

@@ -47,7 +47,8 @@
         "type": "string",
         "enum": ["cypress", "playwright", "none"],
         "default": "cypress",
-        "description": "Test runner to use for e2e tests"
+        "description": "Test runner to use for e2e tests",
+        "x-prompt": "Which E2E test runner would you like to use?"
       },
       "tags": {
         "type": "string",

packages/remix/src/generators/application/__snapshots__/application.impl.spec.ts.snap

@@ -153,9 +153,9 @@ export default defineConfig({
   e2e: {
     ...nxE2EPreset(__filename, {
       cypressDir: 'src',
-      webServerCommands: { default: 'nx run test:serve:development' },
+      webServerCommands: { default: 'nx run test:dev:development' },
     }),
-    baseUrl: 'http://localhost:4200',
+    baseUrl: 'http://localhost:3000',
   },
 });
 "
@@ -168,7 +168,7 @@ import { nxE2EPreset } from '@nx/playwright/preset';
 import { workspaceRoot } from '@nx/devkit';
 
 // For CI, you may want to set BASE_URL to the deployed application.
-const baseURL = process.env['BASE_URL'] || 'http://localhost:4200';
+const baseURL = process.env['BASE_URL'] || 'http://localhost:3000';
 
 /**
  * Read environment variables from file.
@@ -189,8 +189,8 @@ export default defineConfig({
   },
   /* Run your local dev server before starting the tests */
   webServer: {
-    command: 'pnpm exec nx serve test',
-    url: 'http://localhost:4200',
+    command: 'pnpm exec nx dev test',
+    url: 'http://localhost:3000',
     reuseExistingServer: !process.env.CI,
     cwd: workspaceRoot,
   },
@@ -666,9 +666,9 @@ export default defineConfig({
   e2e: {
     ...nxE2EPreset(__filename, {
       cypressDir: 'src',
-      webServerCommands: { default: 'nx run test:serve:development' },
+      webServerCommands: { default: 'nx run test:dev:development' },
     }),
-    baseUrl: 'http://localhost:4200',
+    baseUrl: 'http://localhost:3000',
   },
 });
 "
@@ -681,7 +681,7 @@ import { nxE2EPreset } from '@nx/playwright/preset';
 import { workspaceRoot } from '@nx/devkit';
 
 // For CI, you may want to set BASE_URL to the deployed application.
-const baseURL = process.env['BASE_URL'] || 'http://localhost:4200';
+const baseURL = process.env['BASE_URL'] || 'http://localhost:3000';
 
 /**
  * Read environment variables from file.
@@ -702,8 +702,8 @@ export default defineConfig({
   },
   /* Run your local dev server before starting the tests */
   webServer: {
-    command: 'pnpm exec nx serve test',
-    url: 'http://localhost:4200',
+    command: 'pnpm exec nx dev test',
+    url: 'http://localhost:3000',
     reuseExistingServer: !process.env.CI,
     cwd: workspaceRoot,
   },
@@ -1035,9 +1035,9 @@ export default defineConfig({
   e2e: {
     ...nxE2EPreset(__filename, {
       cypressDir: 'src',
-      webServerCommands: { default: 'nx run test:serve:development' },
+      webServerCommands: { default: 'nx run test:dev:development' },
     }),
-    baseUrl: 'http://localhost:4200',
+    baseUrl: 'http://localhost:3000',
   },
 });
 "
@@ -1416,7 +1416,7 @@ import { nxE2EPreset } from '@nx/playwright/preset';
 import { workspaceRoot } from '@nx/devkit';
 
 // For CI, you may want to set BASE_URL to the deployed application.
-const baseURL = process.env['BASE_URL'] || 'http://localhost:4200';
+const baseURL = process.env['BASE_URL'] || 'http://localhost:3000';
 
 /**
  * Read environment variables from file.
@@ -1437,8 +1437,8 @@ export default defineConfig({
   },
   /* Run your local dev server before starting the tests */
   webServer: {
-    command: 'pnpm exec nx serve test',
-    url: 'http://localhost:4200',
+    command: 'pnpm exec nx dev test',
+    url: 'http://localhost:3000',
     reuseExistingServer: !process.env.CI,
     cwd: workspaceRoot,
   },

packages/remix/src/generators/application/lib/add-e2e.ts

@@ -33,8 +33,8 @@ export async function addE2E(tree: Tree, options: NormalizedSchema) {
       project: options.e2eProjectName,
       directory: 'src',
       skipFormat: true,
-      devServerTarget: `${options.projectName}:serve:development`,
-      baseUrl: 'http://localhost:4200',
+      devServerTarget: `${options.projectName}:${options.e2eWebServerTarget}:development`,
+      baseUrl: options.e2eWebServerAddress,
       addPlugin: options.addPlugin,
     });
   } else if (options.e2eTestRunner === 'playwright') {
@@ -59,10 +59,10 @@ export async function addE2E(tree: Tree, options: NormalizedSchema) {
       js: false,
       linter: options.linter,
       setParserOptionsProject: false,
-      webServerCommand: `${getPackageManagerCommand().exec} nx serve ${
-        options.name
-      }`,
-      webServerAddress: 'http://localhost:4200',
+      webServerCommand: `${getPackageManagerCommand().exec} nx ${
+        options.e2eWebServerTarget
+      } ${options.name}`,
+      webServerAddress: options.e2eWebServerAddress,
       rootProject: options.rootProject,
       addPlugin: options.addPlugin,
     });
@@ -81,7 +81,7 @@ function addFileServerTarget(
     executor: '@nx/web:file-server',
     options: {
       buildTarget: `${options.projectName}:build`,
-      port: 4200,
+      port: options.e2ePort,
     },
   };
   updateProjectConfiguration(tree, options.projectName, projectConfig);

packages/remix/src/generators/application/lib/normalize-options.ts

@@ -2,12 +2,16 @@ import { readNxJson, type Tree } from '@nx/devkit';
 import { determineProjectNameAndRootOptions } from '@nx/devkit/src/generators/project-name-and-root-utils';
 import { type NxRemixGeneratorSchema } from '../schema';
 import { Linter } from '@nx/eslint';
+import { RemixPluginOptions } from '../../../plugins/plugin';
 
 export interface NormalizedSchema extends NxRemixGeneratorSchema {
   projectName: string;
   projectRoot: string;
   e2eProjectName: string;
   e2eProjectRoot: string;
+  e2eWebServerAddress: string;
+  e2eWebServerTarget: string;
+  e2ePort: number;
   parsedTags: string[];
 }
 
@@ -32,8 +36,36 @@ export async function normalizeOptions(
     nxJson.useInferencePlugins !== false;
   options.addPlugin ??= addPluginDefault;
 
+  let e2eWebServerTarget = options.addPlugin ? 'dev' : 'serve';
+  if (options.addPlugin) {
+    const nxJson = readNxJson(tree);
+    if (nxJson.plugins) {
+      for (const plugin of nxJson.plugins) {
+        if (
+          typeof plugin === 'object' &&
+          plugin.plugin === '@nx/remix/plugin' &&
+          (plugin.options as RemixPluginOptions).devTargetName
+        ) {
+          e2eWebServerTarget = (plugin.options as RemixPluginOptions)
+            .devTargetName;
+        }
+      }
+    }
+  }
+
+  let e2ePort = options.addPlugin ? 3000 : 4200;
+  if (
+    nxJson.targetDefaults?.[e2eWebServerTarget] &&
+    (nxJson.targetDefaults?.[e2eWebServerTarget].options?.port ||
+      nxJson.targetDefaults?.[e2eWebServerTarget].options?.env?.PORT)
+  ) {
+    e2ePort =
+      nxJson.targetDefaults?.[e2eWebServerTarget].options?.port ||
+      nxJson.targetDefaults?.[e2eWebServerTarget].options?.env?.PORT;
+  }
   const e2eProjectName = options.rootProject ? 'e2e' : `${projectName}-e2e`;
   const e2eProjectRoot = options.rootProject ? 'e2e' : `${projectRoot}-e2e`;
+  const e2eWebServerAddress = `http://localhost:${e2ePort}`;
 
   const parsedTags = options.tags
     ? options.tags.split(',').map((s) => s.trim())
@@ -46,6 +78,9 @@ export async function normalizeOptions(
     projectRoot,
     e2eProjectName,
     e2eProjectRoot,
+    e2eWebServerAddress,
+    e2eWebServerTarget,
+    e2ePort,
     parsedTags,
   };
 }

packages/remix/src/generators/application/schema.json

@@ -47,7 +47,8 @@
       "type": "string",
       "enum": ["cypress", "playwright", "none"],
       "default": "cypress",
-      "description": "Test runner to use for e2e tests"
+      "description": "Test runner to use for e2e tests",
+      "x-prompt": "Which E2E test runner would you like to use?"
     },
     "tags": {
       "type": "string",