From cf54cc99ef2184f271afeda8e3f17692347f6bca Mon Sep 17 00:00:00 2001 From: Jack Hsu Date: Tue, 5 Apr 2022 21:21:40 -0400 Subject: [PATCH] feat(react): update production setup for MFE host app (#9699) --- .../files/mfe/webpack.config.prod.js__tmpl__ | 26 ++++++++++++++----- .../lib/{add-mfe.ts => add-mfe-files.ts} | 11 ++++++-- .../react/src/generators/mfe-host/mfe-host.ts | 16 +++++++----- .../lib/update-host-with-remote.ts | 0 .../src/generators/mfe-remote/mfe-remote.ts | 6 ++--- .../lib => rules}/update-mfe-project.ts | 10 +++++-- 6 files changed, 50 insertions(+), 19 deletions(-) rename packages/react/src/generators/mfe-host/lib/{add-mfe.ts => add-mfe-files.ts} (77%) rename packages/react/src/generators/{mfe-host => mfe-remote}/lib/update-host-with-remote.ts (100%) rename packages/react/src/{generators/mfe-host/lib => rules}/update-mfe-project.ts (65%) diff --git a/packages/react/src/generators/mfe-host/files/mfe/webpack.config.prod.js__tmpl__ b/packages/react/src/generators/mfe-host/files/mfe/webpack.config.prod.js__tmpl__ index 037ace53e6d96..41a738428aeed 100644 --- a/packages/react/src/generators/mfe-host/files/mfe/webpack.config.prod.js__tmpl__ +++ b/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 %>/'],<% }); %> + ], }); diff --git a/packages/react/src/generators/mfe-host/lib/add-mfe.ts b/packages/react/src/generators/mfe-host/lib/add-mfe-files.ts similarity index 77% rename from packages/react/src/generators/mfe-host/lib/add-mfe.ts rename to packages/react/src/generators/mfe-host/lib/add-mfe-files.ts index 0d60d51432f4c..54546f1e3be28 100644 --- a/packages/react/src/generators/mfe-host/lib/add-mfe.ts +++ b/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. diff --git a/packages/react/src/generators/mfe-host/mfe-host.ts b/packages/react/src/generators/mfe-host/mfe-host.ts index b904362c8086d..1f64e037fb3a9 100644 --- a/packages/react/src/generators/mfe-host/mfe-host.ts +++ b/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); } diff --git a/packages/react/src/generators/mfe-host/lib/update-host-with-remote.ts b/packages/react/src/generators/mfe-remote/lib/update-host-with-remote.ts similarity index 100% rename from packages/react/src/generators/mfe-host/lib/update-host-with-remote.ts rename to packages/react/src/generators/mfe-remote/lib/update-host-with-remote.ts diff --git a/packages/react/src/generators/mfe-remote/mfe-remote.ts b/packages/react/src/generators/mfe-remote/mfe-remote.ts index 8606049eabf78..478976795d5fd 100644 --- a/packages/react/src/generators/mfe-remote/mfe-remote.ts +++ b/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 = { diff --git a/packages/react/src/generators/mfe-host/lib/update-mfe-project.ts b/packages/react/src/rules/update-mfe-project.ts similarity index 65% rename from packages/react/src/generators/mfe-host/lib/update-mfe-project.ts rename to packages/react/src/rules/update-mfe-project.ts index a87180086fb4c..8286c3f1b6c93 100644 --- a/packages/react/src/generators/mfe-host/lib/update-mfe-project.ts +++ b/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);