fix(remix): use remix-serve for static-serve (#23164)

<!-- Please make sure you have read the submission guidelines before
posting an PR -->
<!--
https://github.com/nrwl/nx/blob/master/CONTRIBUTING.md#-submitting-a-pr
-->

<!-- Please make sure that your commit message follows our format -->
<!-- Example: `fix(nx): must begin with lowercase` -->

## Current Behavior
<!-- This is the behavior we have today -->
For `e2e-ci` with Remix projects, we needed a `static-serve` target that
would work for Remix.
We didn't have one as it cannot be served via a basic file server.


## Expected Behavior
<!-- This is the behavior we should expect with the changes in this PR
-->
For non-plugin usage, create a target in project.json using
`remix-serve`.
For plugin usage, create a target via `@nx/remix/plugin` for
`remix-serve`.


## Related Issue(s)
<!-- Please link the issue being fixed so it gets closed when this is
merged. -->

Fixes #

packages/remix/src/generators/application/application.impl.ts

@@ -93,6 +93,13 @@ export async function remixApplicationGeneratorInternal(
               cwd: options.projectRoot,
             },
           },
+          ['static-serve']: {
+            dependsOn: ['build'],
+            command: `remix-serve build/index.js`,
+            options: {
+              cwd: options.projectRoot,
+            },
+          },
           typecheck: {
             command: `tsc --project tsconfig.app.json`,
             options: {

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

@@ -16,10 +16,6 @@ export async function addE2E(tree: Tree, options: NormalizedSchema) {
       typeof import('@nx/cypress')
     >('@nx/cypress', getPackageVersion(tree, 'nx'));
 
-    // TODO(colum): Remix needs a different approach to serve-static
-    // Likely via remix start
-    // addFileServerTarget(tree, options, 'serve-static');
-
     addProjectConfiguration(tree, options.e2eProjectName, {
       projectType: 'application',
       root: options.e2eProjectRoot,
@@ -70,19 +66,3 @@ export async function addE2E(tree: Tree, options: NormalizedSchema) {
     return () => {};
   }
 }
-
-function addFileServerTarget(
-  tree: Tree,
-  options: NormalizedSchema,
-  targetName: string
-) {
-  const projectConfig = readProjectConfiguration(tree, options.projectName);
-  projectConfig.targets[targetName] = {
-    executor: '@nx/web:file-server',
-    options: {
-      buildTarget: `${options.projectName}:build`,
-      port: options.e2ePort,
-    },
-  };
-  updateProjectConfiguration(tree, options.projectName, projectConfig);
-}

packages/remix/src/plugins/__snapshots__/plugin.spec.ts.snap

@@ -39,6 +39,15 @@ exports[`@nx/remix/plugin non-root project should create nodes 1`] = `
             "cwd": "my-app",
           },
         },
+        "static-serve": {
+          "command": "remix-serve build/index.js",
+          "dependsOn": [
+            "build",
+          ],
+          "options": {
+            "cwd": "my-app",
+          },
+        },
         "tsc": {
           "cache": true,
           "command": "tsc",
@@ -95,6 +104,15 @@ exports[`@nx/remix/plugin root project should create nodes 1`] = `
             "cwd": ".",
           },
         },
+        "static-serve": {
+          "command": "remix-serve build/index.js",
+          "dependsOn": [
+            "build",
+          ],
+          "options": {
+            "cwd": ".",
+          },
+        },
         "typecheck": {
           "cache": true,
           "command": "tsc",

packages/remix/src/plugins/plugin.spec.ts

@@ -69,6 +69,7 @@ module.exports = {
           devTargetName: 'dev',
           startTargetName: 'start',
           typecheckTargetName: 'typecheck',
+          staticServeTargetName: 'static-serve',
         },
         context
       );
@@ -128,6 +129,7 @@ module.exports = {
           devTargetName: 'dev',
           startTargetName: 'start',
           typecheckTargetName: 'tsc',
+          staticServeTargetName: 'static-serve',
         },
         context
       );

packages/remix/src/plugins/plugin.ts

@@ -47,6 +47,7 @@ export interface RemixPluginOptions {
   devTargetName?: string;
   startTargetName?: string;
   typecheckTargetName?: string;
+  staticServeTargetName?: string;
 }
 
 export const createNodes: CreateNodes<RemixPluginOptions> = [
@@ -118,6 +119,11 @@ async function buildRemixTargets(
     serverBuildPath,
     options.buildTargetName
   );
+  targets[options.staticServeTargetName] = startTarget(
+    projectRoot,
+    serverBuildPath,
+    options.buildTargetName
+  );
   targets[options.typecheckTargetName] = typecheckTarget(
     projectRoot,
     namedInputs,
@@ -228,6 +234,7 @@ function normalizeOptions(options: RemixPluginOptions) {
   options.devTargetName ??= 'dev';
   options.startTargetName ??= 'start';
   options.typecheckTargetName ??= 'typecheck';
+  options.staticServeTargetName ??= 'static-serve';
 
   return options;
 }