feat(react): update production setup for MFE host app

packages/react/src/generators/mfe-host/files/mfe/webpack.config.prod.js__tmpl__

@@ -3,10 +3,24 @@ const mfeConfig = require('./mfe.config');
 
 module.exports = withModuleFederation({
     ...mfeConfig,
-    // Override remote location for production build.
-    // Each entry is a pair of an unique name and the URL where it is deployed.
-    // remotes: [
-    //   ['app1', 'http://app1.example.com/'],
-    //   ['app2', 'http://app2.example.com/'],
-    // ],
+    /*
+     * Remote overrides for production.
+     * Each entry is a pair of an unique name and the URL where it is deployed.
+     *
+     * e.g.
+     * remotes: [
+     *   ['app1', '//app1.example.com'],
+     *   ['app2', '//app2.example.com'],
+     * ]
+     *
+     * You can also use a full path to the remoteEntry.js file if desired.
+     *
+     * remotes: [
+     *   ['app1', '//example.com/path/to/app1/remoteEntry.js'],
+     *   ['app2', '//example.com/path/to/app2/remoteEntry.js'],
+     * ]
+     */
+    remotes: [
+      <% remotes.forEach(function(r) {%>['<%= r.fileName %>', '//localhost:<%= r.port %>/'],<% }); %>
+    ],
 });

packages/react/src/generators/mfe-host/lib/add-mfe.ts → packages/react/src/generators/mfe-host/lib/add-mfe-files.ts

@@ -2,12 +2,19 @@ import { NormalizedSchema } from '../schema';
 import { generateFiles, names } from '@nrwl/devkit';
 import { join } from 'path';
 
-export function addMFEFiles(host, options: NormalizedSchema) {
+export function addMfeFiles(
+  host,
+  options: NormalizedSchema,
+  defaultRemoteManifest: { name: string; port: number }[]
+) {
   const templateVariables = {
     ...names(options.name),
     ...options,
     tmpl: '',
-    remotes: options.remotes.map((r) => names(r)),
+    remotes: defaultRemoteManifest.map(({ name, port }) => ({
+      ...names(name),
+      port,
+    })),
   };
 
   // Module federation requires bootstrap code to be dynamically imported.

packages/react/src/generators/mfe-host/mfe-host.ts

@@ -1,11 +1,12 @@
 import { formatFiles, Tree } from '@nrwl/devkit';
-import { Schema } from './schema';
+
 import applicationGenerator from '../application/application';
 import { normalizeOptions } from '../application/lib/normalize-options';
-import { addMFEFiles } from './lib/add-mfe';
-import { updateMfeProject } from './lib/update-mfe-project';
 import { mfeRemoteGenerator } from '../mfe-remote/mfe-remote';
+import { updateMfeProject } from '../../rules/update-mfe-project';
+import { addMfeFiles } from './lib/add-mfe-files';
 import { updateMfeE2eProject } from './lib/update-mfe-e2e-project';
+import { Schema } from './schema';
 
 export async function mfeHostGenerator(host: Tree, schema: Schema) {
   const options = normalizeOptions(host, schema);
@@ -16,13 +17,12 @@ export async function mfeHostGenerator(host: Tree, schema: Schema) {
     routing: true,
   });
 
-  addMFEFiles(host, options);
-  updateMfeProject(host, options);
-  updateMfeE2eProject(host, options);
+  const remotesWithPorts: { name: string; port: number }[] = [];
 
   if (schema.remotes) {
     let remotePort = options.devServerPort + 1;
     for (const remote of schema.remotes) {
+      remotesWithPorts.push({ name: remote, port: remotePort });
       await mfeRemoteGenerator(host, {
         name: remote,
         style: options.style,
@@ -36,6 +36,10 @@ export async function mfeHostGenerator(host: Tree, schema: Schema) {
     }
   }
 
+  addMfeFiles(host, options, remotesWithPorts);
+  updateMfeProject(host, options);
+  updateMfeE2eProject(host, options);
+
   if (!options.skipFormat) {
     await formatFiles(host);
   }

packages/react/src/generators/mfe-remote/mfe-remote.ts

@@ -2,12 +2,12 @@ import { join } from 'path';
 import { formatFiles, generateFiles, names, Tree } from '@nrwl/devkit';
 import { runTasksInSerial } from '@nrwl/workspace/src/utilities/run-tasks-in-serial';
 
-import { Schema } from './schema';
 import { normalizeOptions } from '../application/lib/normalize-options';
 import applicationGenerator from '../application/application';
-import { updateMfeProject } from '../mfe-host/lib/update-mfe-project';
 import { NormalizedSchema } from '../application/schema';
-import { updateHostWithRemote } from '../mfe-host/lib/update-host-with-remote';
+import { updateHostWithRemote } from './lib/update-host-with-remote';
+import { updateMfeProject } from '../../rules/update-mfe-project';
+import { Schema } from './schema';
 
 export function addMfeFiles(host: Tree, options: NormalizedSchema) {
   const templateVariables = {

packages/react/src/generators/mfe-host/lib/update-mfe-project.ts → packages/react/src/rules/update-mfe-project.ts

@@ -1,17 +1,23 @@
 import { Tree } from 'nx/src/shared/tree';
-import { NormalizedSchema } from '../schema';
 import {
   readProjectConfiguration,
   updateProjectConfiguration,
 } from '@nrwl/devkit';
 
-export function updateMfeProject(host: Tree, options: NormalizedSchema) {
+export function updateMfeProject(
+  host: Tree,
+  options: { name: string; appProjectRoot: string; devServerPort?: number }
+) {
   let projectConfig = readProjectConfiguration(host, options.name);
   projectConfig.targets.build.options = {
     ...projectConfig.targets.build.options,
     main: `${options.appProjectRoot}/src/main.ts`,
     webpackConfig: `${options.appProjectRoot}/webpack.config.js`,
   };
+  projectConfig.targets.build.configurations.production = {
+    ...projectConfig.targets.build.configurations.production,
+    webpackConfig: `${options.appProjectRoot}/webpack.config.prod.js`,
+  };
   projectConfig.targets.serve.executor = '@nrwl/react:mfe-dev-server';
   projectConfig.targets.serve.options.port = options.devServerPort;
   updateProjectConfiguration(host, options.name, projectConfig);