Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
feat(react): update MFE config and routes when adding remote to host (#…
- Loading branch information
Showing
11 changed files
with
492 additions
and
20 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
41 changes: 41 additions & 0 deletions
41
packages/react/src/generators/application/lib/find-free-port.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,41 @@ | ||
import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing'; | ||
import { addProjectConfiguration, Tree } from '@nrwl/devkit'; | ||
|
||
import { findFreePort } from './find-free-port'; | ||
|
||
describe('findFreePort', () => { | ||
it('should return the largest port + 1', () => { | ||
const tree = createTreeWithEmptyWorkspace(); | ||
addProject(tree, 'app1', 4200); | ||
addProject(tree, 'app2', 4201); | ||
addProject(tree, 'no-serve'); | ||
|
||
const port = findFreePort(tree); | ||
|
||
expect(port).toEqual(4202); | ||
}); | ||
|
||
it('should default to port 4200', () => { | ||
const tree = createTreeWithEmptyWorkspace(); | ||
addProject(tree, 'no-serve'); | ||
|
||
const port = findFreePort(tree); | ||
|
||
expect(port).toEqual(4200); | ||
}); | ||
}); | ||
|
||
function addProject(tree: Tree, name: string, port?: number) { | ||
addProjectConfiguration(tree, name, { | ||
name: 'app1', | ||
root: '/app1', | ||
targets: port | ||
? { | ||
serve: { | ||
executor: '', | ||
options: { port }, | ||
}, | ||
} | ||
: {}, | ||
}); | ||
} |
14 changes: 14 additions & 0 deletions
14
packages/react/src/generators/application/lib/find-free-port.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
import { Tree } from 'nx/src/config/tree'; | ||
import { getProjects } from '@nrwl/devkit'; | ||
|
||
export function findFreePort(host: Tree) { | ||
const projects = getProjects(host); | ||
let port = -Infinity; | ||
for (const [, p] of projects.entries()) { | ||
const curr = p.targets?.serve?.options?.port; | ||
if (typeof curr === 'number') { | ||
port = Math.max(port, curr); | ||
} | ||
} | ||
return port > 0 ? port + 1 : 4200; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
13 changes: 12 additions & 1 deletion
13
packages/react/src/generators/mfe-host/files/mfe/webpack.config.prod.js__tmpl__
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1,12 @@ | ||
module.exports = require('./webpack.config'); | ||
const withModuleFederation = require('@nrwl/react/module-federation'); | ||
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/'], | ||
// ], | ||
}); |
101 changes: 95 additions & 6 deletions
101
packages/react/src/generators/mfe-host/lib/update-host-with-remote.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,8 +1,97 @@ | ||
import { Tree } from '@nrwl/devkit'; | ||
import { Schema } from '../schema'; | ||
import { | ||
applyChangesToString, | ||
joinPathFragments, | ||
logger, | ||
names, | ||
readProjectConfiguration, | ||
Tree, | ||
} from '@nrwl/devkit'; | ||
import { | ||
addRemoteDefinition, | ||
addRemoteRoute, | ||
addRemoteToMfeConfig, | ||
} from '../../../mfe/mfe-ast-utils'; | ||
import * as ts from 'typescript'; | ||
|
||
export function updateHostWithRemote(host: Tree, options: Schema) { | ||
// find the host project path | ||
// Update remotes inside ${host_path}/src/remotes.d.ts | ||
// Update remotes inside ${host_path}/mfe.config.js | ||
export function updateHostWithRemote( | ||
host: Tree, | ||
hostName: string, | ||
remoteName: string | ||
) { | ||
const hostConfig = readProjectConfiguration(host, hostName); | ||
const mfeConfigPath = joinPathFragments(hostConfig.root, 'mfe.config.js'); | ||
const remoteDefsPath = joinPathFragments( | ||
hostConfig.sourceRoot, | ||
'remotes.d.ts' | ||
); | ||
const appComponentPath = findAppComponentPath(host, hostConfig.sourceRoot); | ||
|
||
if (host.exists(mfeConfigPath)) { | ||
// find the host project path | ||
// Update remotes inside ${host_path}/src/remotes.d.ts | ||
let sourceCode = host.read(mfeConfigPath).toString(); | ||
const source = ts.createSourceFile( | ||
mfeConfigPath, | ||
sourceCode, | ||
ts.ScriptTarget.Latest, | ||
true | ||
); | ||
host.write( | ||
mfeConfigPath, | ||
applyChangesToString(sourceCode, addRemoteToMfeConfig(source, remoteName)) | ||
); | ||
} else { | ||
// TODO(jack): Point to the nx.dev guide when ready. | ||
logger.warn( | ||
`Could not find MFE configuration at ${mfeConfigPath}. Did you generate this project with "@nrwl/react:mfe-host"?` | ||
); | ||
} | ||
|
||
if (host.exists(remoteDefsPath)) { | ||
let sourceCode = host.read(remoteDefsPath).toString(); | ||
const source = ts.createSourceFile( | ||
mfeConfigPath, | ||
sourceCode, | ||
ts.ScriptTarget.Latest, | ||
true | ||
); | ||
host.write( | ||
remoteDefsPath, | ||
applyChangesToString(sourceCode, addRemoteDefinition(source, remoteName)) | ||
); | ||
} else { | ||
logger.warn( | ||
`Could not find remote definitions at ${remoteDefsPath}. Did you generate this project with "@nrwl/react:mfe-host"?` | ||
); | ||
} | ||
|
||
if (host.exists(appComponentPath)) { | ||
let sourceCode = host.read(appComponentPath).toString(); | ||
const source = ts.createSourceFile( | ||
mfeConfigPath, | ||
sourceCode, | ||
ts.ScriptTarget.Latest, | ||
true | ||
); | ||
host.write( | ||
appComponentPath, | ||
applyChangesToString( | ||
sourceCode, | ||
addRemoteRoute(source, names(remoteName)) | ||
) | ||
); | ||
} else { | ||
logger.warn( | ||
`Could not find app component at ${appComponentPath}. Did you generate this project with "@nrwl/react:mfe-host"?` | ||
); | ||
} | ||
} | ||
|
||
function findAppComponentPath(host: Tree, sourceRoot: string) { | ||
const locations = ['app/app.tsx', 'app/App.tsx', 'app.tsx', 'App.tsx']; | ||
for (const loc of locations) { | ||
if (host.exists(joinPathFragments(sourceRoot, loc))) { | ||
return joinPathFragments(sourceRoot, loc); | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.