Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
feat(react): update production setup for MFE host app (#9699)
  • Loading branch information
jaysoo committed Apr 6, 2022
1 parent d1278bf commit cf54cc9
Show file tree
Hide file tree
Showing 6 changed files with 50 additions and 19 deletions.
Expand Up @@ -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 %>/'],<% }); %>
],
});
Expand Up @@ -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.
Expand Down
16 changes: 10 additions & 6 deletions 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);
Expand All @@ -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,
Expand All @@ -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);
}
Expand Down
6 changes: 3 additions & 3 deletions packages/react/src/generators/mfe-remote/mfe-remote.ts
Expand Up @@ -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 = {
Expand Down
@@ -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);
Expand Down

0 comments on commit cf54cc9

Please sign in to comment.