docs(react): add documentation for react mfe configurations

docs/generated/packages/react/executors/module-federation-dev-server.json

@@ -11,7 +11,20 @@
     "properties": {
       "devRemotes": {
         "type": "array",
-        "items": { "type": "string" },
+        "items": {
+          "oneOf": [
+            { "type": "string" },
+            {
+              "type": "object",
+              "properties": {
+                "remoteName": { "type": "string" },
+                "configuration": { "type": "string" }
+              },
+              "required": ["remoteName"],
+              "additionalProperties": false
+            }
+          ]
+        },
         "description": "List of remote applications to run in development mode (i.e. using serve target).",
         "x-priority": "important"
       },
@@ -114,6 +127,7 @@
         "description": "Path to a Module Federation manifest file (e.g. `my/path/to/module-federation.manifest.json`) containing the dynamic remote applications relative to the workspace root."
       }
     },
+    "examplesFile": "## Examples\n\n{% tabs %}\n\n{% tab label=\"Basic Usage\" %}\nThe Module Federation Dev Server will serve a host application and find the remote applications associated with the host and serve them statically also.  \nSee an example set up of it below:\n\n```json\n{\n  \"serve\": {\n    \"executor\": \"@nx/react:module-federation-dev-server\",\n    \"configurations\": {\n      \"production\": {\n        \"buildTarget\": \"host:build:production\"\n      },\n      \"development\": {\n        \"buildTarget\": \"host:build:development\"\n      }\n    },\n    \"defaultConfiguration\": \"development\",\n    \"options\": {\n      \"port\": 4200,\n      \"publicHost\": \"http://localhost:4200\"\n    }\n  }\n}\n```\n\n{% /tab %}\n\n{% tab label=\"Serve host with remotes that can be live reloaded\" %}\nThe Module Federation Dev Server will serve a host application and find the remote applications associated with the host and serve a set selection with live reloading enabled also.  \nSee an example set up of it below:\n\n```json\n{\n  \"serve-with-hmr-remotes\": {\n    \"executor\": \"@nx/react:module-federation-dev-server\",\n    \"configurations\": {\n      \"production\": {\n        \"buildTarget\": \"host:build:production\"\n      },\n      \"development\": {\n        \"buildTarget\": \"host:build:development\"\n      }\n    },\n    \"defaultConfiguration\": \"development\",\n    \"options\": {\n      \"port\": 4200,\n      \"publicHost\": \"http://localhost:4200\",\n      \"devRemotes\": [\n        \"remote1\",\n        {\n          \"remoteName\": \"remote2\",\n          \"configuration\": \"development\"\n        }\n      ]\n    }\n  }\n}\n```\n\n{% /tab %}\n\n{% /tabs %}\n",
     "presets": []
   },
   "description": "Serve a host or remote application.",

packages/react/docs/module-federation-dev-server-examples.md

@@ -0,0 +1,66 @@
+## Examples
+
+{% tabs %}
+
+{% tab label="Basic Usage" %}
+The Module Federation Dev Server will serve a host application and find the remote applications associated with the host and serve them statically also.  
+See an example set up of it below:
+
+```json
+{
+  "serve": {
+    "executor": "@nx/react:module-federation-dev-server",
+    "configurations": {
+      "production": {
+        "buildTarget": "host:build:production"
+      },
+      "development": {
+        "buildTarget": "host:build:development"
+      }
+    },
+    "defaultConfiguration": "development",
+    "options": {
+      "port": 4200,
+      "publicHost": "http://localhost:4200"
+    }
+  }
+}
+```
+
+{% /tab %}
+
+{% tab label="Serve host with remotes that can be live reloaded" %}
+The Module Federation Dev Server will serve a host application and find the remote applications associated with the host and serve a set selection with live reloading enabled also.  
+See an example set up of it below:
+
+```json
+{
+  "serve-with-hmr-remotes": {
+    "executor": "@nx/react:module-federation-dev-server",
+    "configurations": {
+      "production": {
+        "buildTarget": "host:build:production"
+      },
+      "development": {
+        "buildTarget": "host:build:development"
+      }
+    },
+    "defaultConfiguration": "development",
+    "options": {
+      "port": 4200,
+      "publicHost": "http://localhost:4200",
+      "devRemotes": [
+        "remote1",
+        {
+          "remoteName": "remote2",
+          "configuration": "development"
+        }
+      ]
+    }
+  }
+}
+```
+
+{% /tab %}
+
+{% /tabs %}

packages/react/src/executors/module-federation-dev-server/module-federation-dev-server.impl.ts

@@ -118,7 +118,7 @@ async function startRemotes(
         'module-federation-dev-server'
       );
 
-    const configurationOverride = options.devRemotes.find(
+    const configurationOverride = options.devRemotes?.find(
       (
         r
       ): r is {

packages/react/src/executors/module-federation-dev-server/schema.json

@@ -131,5 +131,6 @@
       "type": "string",
       "description": "Path to a Module Federation manifest file (e.g. `my/path/to/module-federation.manifest.json`) containing the dynamic remote applications relative to the workspace root."
     }
-  }
+  },
+  "examplesFile": "../../../docs/module-federation-dev-server-examples.md"
 }