feat(web): allow additional http-server options to be passed from @nx…

…/web:file-server (#26391)

This PR allows additional args such as `-d` (directory listing) and
`--mimetypes` to be passed from `serve` to the underlying `http-server`
module.

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

## Expected Behavior
<!-- This is the behavior we should expect with the changes in this PR
-->

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

Fixes #22138

docs/generated/packages/web/executors/file-server.json

@@ -5,7 +5,7 @@
     "version": 2,
     "outputCapture": "direct-nodejs",
     "title": "File Server",
-    "description": "Serve a web application from a folder.",
+    "description": "Serve a web application from a folder. This executor is a wrapper around the [http-server](https://www.npmjs.com/package/http-server) package.",
     "type": "object",
     "cli": "nx",
     "properties": {
@@ -92,7 +92,8 @@
         "default": -1
       }
     },
-    "additionalProperties": false,
+    "additionalProperties": true,
+    "examplesFile": "---\ntitle: Examples for the Web file-server executor\ndescription: This page contains examples for the Vite @nx/web:file-server executor.\n---\n\n`project.json`:\n\n```json5\n\"myapp\": {\n  \"targets\": {\n    \"serve\": {\n      \"executor\": \"@nx/web:file-server\",\n      \"options\": {\n        \"buildTarget\": \"build\",\n        \"port\": 3000,\n      },\n    },\n    \"build\": {\n      \"outputs\": [\"{workspaceRoot}/dist/myapp\"],\n      \"command\": \"echo 'Generating index.html' && mkdir -p dist && echo '<h1>Works</h1>' > dist/myapp/index.html\"\n    },\n  }\n}\n```\n\n```shell\nnx serve myapp\n```\n\n## Examples\n\n{% tabs %}\n{% tab label=\"Additional http-server options\" %}\n\nThere are additional options from `http-server` that can be passed as CLI args. For example, to enable directory listing, pass `-d` as follows:\n\n```shell\nnx serve myapp -d\n```\n\nRefer to the [`http-server`](https://www.npmjs.com/package/http-server) package for all available options.\n\n{% /tab %}\n{% /tabs %}\n",
     "presets": []
   },
   "description": "Serve a web application from a folder.",

packages/web/docs/file-server-examples.md

@@ -0,0 +1,44 @@
+---
+title: Examples for the Web file-server executor
+description: This page contains examples for the Vite @nx/web:file-server executor.
+---
+
+`project.json`:
+
+```json5
+"myapp": {
+  "targets": {
+    "serve": {
+      "executor": "@nx/web:file-server",
+      "options": {
+        "buildTarget": "build",
+        "port": 3000,
+      },
+    },
+    "build": {
+      "outputs": ["{workspaceRoot}/dist/myapp"],
+      "command": "echo 'Generating index.html' && mkdir -p dist && echo '<h1>Works</h1>' > dist/myapp/index.html"
+    },
+  }
+}
+```
+
+```shell
+nx serve myapp
+```
+
+## Examples
+
+{% tabs %}
+{% tab label="Additional http-server options" %}
+
+There are additional options from `http-server` that can be passed as CLI args. For example, to enable directory listing, pass `-d` as follows:
+
+```shell
+nx serve myapp -d
+```
+
+Refer to the [`http-server`](https://www.npmjs.com/package/http-server) package for all available options.
+
+{% /tab %}
+{% /tabs %}

packages/web/src/executors/file-server/file-server.impl.ts

@@ -18,38 +18,49 @@ import { interpolate } from 'nx/src/tasks-runner/utils';
 const pmCmd = platform() === 'win32' ? `npx.cmd` : 'npx';
 
 function getHttpServerArgs(options: Schema) {
+  const {
+    buildTarget,
+    parallel,
+    host,
+    proxyUrl,
+    ssl,
+    sslCert,
+    sslKey,
+    proxyOptions,
+    watch,
+    spa,
+    cacheSeconds,
+    ...rest
+  } = options;
   const args = [`-c${options.cacheSeconds}`];
-
-  if (options.cors) {
-    args.push(`--cors`);
+  for (const [key, value] of Object.entries(rest)) {
+    if (typeof value === 'boolean' && value) {
+      args.push(`--${key}`);
+    } else if (typeof value === 'string') {
+      args.push(`--${key}=${value}`);
+    }
   }
-  if (options.host) {
-    args.push(`-a=${options.host}`);
+  if (host) {
+    args.push(`-a=${host}`);
   }
-  if (options.ssl) {
+  if (ssl) {
     args.push(`-S`);
   }
-  if (options.sslCert) {
-    args.push(`-C=${options.sslCert}`);
-  }
-  if (options.sslKey) {
-    args.push(`-K=${options.sslKey}`);
+  if (sslCert) {
+    args.push(`-C=${sslCert}`);
   }
-  if (options.proxyUrl) {
-    args.push(`-P=${options.proxyUrl}`);
+  if (sslKey) {
+    args.push(`-K=${sslKey}`);
   }
-  if (options.gzip) {
-    args.push('-g');
+  if (proxyUrl) {
+    args.push(`-P=${proxyUrl}`);
   }
-  if (options.brotli) {
-    args.push('-b');
-  }
-
-  if (options.proxyOptions) {
+  if (proxyOptions) {
     Object.keys(options.proxyOptions).forEach((key) => {
       args.push(`--proxy-options.${key}=${options.proxyOptions[key]}`);
     });
   }
+
   return args;
 }
 

packages/web/src/executors/file-server/schema.json

@@ -2,7 +2,7 @@
   "version": 2,
   "outputCapture": "direct-nodejs",
   "title": "File Server",
-  "description": "Serve a web application from a folder.",
+  "description": "Serve a web application from a folder. This executor is a wrapper around the [http-server](https://www.npmjs.com/package/http-server) package.",
   "type": "object",
   "cli": "nx",
   "properties": {
@@ -94,5 +94,6 @@
       "default": -1
     }
   },
-  "additionalProperties": false
+  "additionalProperties": true,
+  "examplesFile": "../../../docs/file-server-examples.md"
 }