diff --git a/e2e/react-core/src/react-module-federation.test.ts b/e2e/react-core/src/react-module-federation.test.ts index 0264b0e2d9..63c97f8a63 100644 --- a/e2e/react-core/src/react-module-federation.test.ts +++ b/e2e/react-core/src/react-module-federation.test.ts @@ -132,6 +132,35 @@ describe('React Module Federation', () => { } }, 500_000); + it('should generate host and remote apps with ssr', async () => { + const shell = uniq('shell'); + const remote1 = uniq('remote1'); + const remote2 = uniq('remote2'); + const remote3 = uniq('remote3'); + + await runCLIAsync( + `generate @nx/react:host ${shell} --ssr --remotes=${remote1},${remote2},${remote3} --style=css --no-interactive --projectNameAndRootFormat=derived` + ); + + expect(readPort(shell)).toEqual(4200); + expect(readPort(remote1)).toEqual(4201); + expect(readPort(remote2)).toEqual(4202); + expect(readPort(remote3)).toEqual(4203); + + [shell, remote1, remote2, remote3].forEach((app) => { + checkFilesExist( + `apps/${app}/module-federation.config.ts`, + `apps/${app}/module-federation.server.config.ts` + ); + ['build', 'server'].forEach((target) => { + ['development', 'production'].forEach((configuration) => { + const cliOutput = runCLI(`run ${app}:${target}:${configuration}`); + expect(cliOutput).toContain('Successfully ran target'); + }); + }); + }); + }, 500_000); + it('should should support generating host and remote apps with the new name and root format', async () => { const shell = uniq('shell'); const remote = uniq('remote'); diff --git a/packages/react/src/executors/module-federation-ssr-dev-server/module-federation-ssr-dev-server.impl.ts b/packages/react/src/executors/module-federation-ssr-dev-server/module-federation-ssr-dev-server.impl.ts index 3e7f35cf0f..e637287551 100644 --- a/packages/react/src/executors/module-federation-ssr-dev-server/module-federation-ssr-dev-server.impl.ts +++ b/packages/react/src/executors/module-federation-ssr-dev-server/module-federation-ssr-dev-server.impl.ts @@ -142,7 +142,7 @@ export default async function* moduleFederationSsrDevServer( const remoteServerOutput = join( workspaceRoot, remoteProject.targets.server.options.outputPath, - 'main.js' + remoteProject.targets.server.options.outputFileName ); const pm = getPackageManagerCommand(); execSync( diff --git a/packages/react/src/generators/host/files/module-federation-ssr-ts/tsconfig.server.json__tmpl__ b/packages/react/src/generators/host/files/module-federation-ssr-ts/tsconfig.server.json__tmpl__ index 1f18bfb683..db225b7a99 100644 --- a/packages/react/src/generators/host/files/module-federation-ssr-ts/tsconfig.server.json__tmpl__ +++ b/packages/react/src/generators/host/files/module-federation-ssr-ts/tsconfig.server.json__tmpl__ @@ -4,7 +4,9 @@ "outDir": "../../out-tsc/server", "target": "es2019", "types": [ - "node" + "node", + "@nx/react/typings/cssmodule.d.ts", + "@nx/react/typings/image.d.ts" ] }, "include": [ diff --git a/packages/react/src/generators/host/files/module-federation-ssr/tsconfig.server.json__tmpl__ b/packages/react/src/generators/host/files/module-federation-ssr/tsconfig.server.json__tmpl__ index 1f18bfb683..db225b7a99 100644 --- a/packages/react/src/generators/host/files/module-federation-ssr/tsconfig.server.json__tmpl__ +++ b/packages/react/src/generators/host/files/module-federation-ssr/tsconfig.server.json__tmpl__ @@ -4,7 +4,9 @@ "outDir": "../../out-tsc/server", "target": "es2019", "types": [ - "node" + "node", + "@nx/react/typings/cssmodule.d.ts", + "@nx/react/typings/image.d.ts" ] }, "include": [ diff --git a/packages/react/src/generators/host/host.spec.ts b/packages/react/src/generators/host/host.spec.ts index e1298de59e..9c6aa8bb70 100644 --- a/packages/react/src/generators/host/host.spec.ts +++ b/packages/react/src/generators/host/host.spec.ts @@ -98,7 +98,11 @@ describe('hostGenerator', () => { compilerOptions: { outDir: '../../out-tsc/server', target: 'es2019', - types: ['node'], + types: [ + 'node', + '@nx/react/typings/cssmodule.d.ts', + '@nx/react/typings/image.d.ts', + ], }, extends: './tsconfig.app.json', include: ['src/remotes.d.ts', 'src/main.server.tsx', 'server.ts'], @@ -138,7 +142,11 @@ describe('hostGenerator', () => { compilerOptions: { outDir: '../../out-tsc/server', target: 'es2019', - types: ['node'], + types: [ + 'node', + '@nx/react/typings/cssmodule.d.ts', + '@nx/react/typings/image.d.ts', + ], }, extends: './tsconfig.app.json', include: ['src/remotes.d.ts', 'src/main.server.tsx', 'server.ts'], diff --git a/packages/react/src/generators/host/host.ts b/packages/react/src/generators/host/host.ts index 49b76e7723..ecabc4859e 100644 --- a/packages/react/src/generators/host/host.ts +++ b/packages/react/src/generators/host/host.ts @@ -21,14 +21,20 @@ import { setupSsrForHost } from './lib/setup-ssr-for-host'; import { updateModuleFederationE2eProject } from './lib/update-module-federation-e2e-project'; import { NormalizedSchema, Schema } from './schema'; -export async function hostGenerator(host: Tree, schema: Schema) { +export async function hostGenerator( + host: Tree, + schema: Schema +): Promise { return hostGeneratorInternal(host, { projectNameAndRootFormat: 'derived', ...schema, }); } -export async function hostGeneratorInternal(host: Tree, schema: Schema) { +export async function hostGeneratorInternal( + host: Tree, + schema: Schema +): Promise { const tasks: GeneratorCallback[] = []; const options: NormalizedSchema = { ...(await normalizeOptions(host, schema, '@nx/react:host')), @@ -53,7 +59,7 @@ export async function hostGeneratorInternal(host: Tree, schema: Schema) { const remoteName = await normalizeRemoteName(host, remote, options); remotesWithPorts.push({ name: remoteName, port: remotePort }); - await remoteGenerator(host, { + const remoteTask = await remoteGenerator(host, { name: remote, directory: normalizeRemoteDirectory(remote, options), style: options.style, @@ -66,6 +72,7 @@ export async function hostGeneratorInternal(host: Tree, schema: Schema) { projectNameAndRootFormat: options.projectNameAndRootFormat, typescriptConfiguration: options.typescriptConfiguration, }); + tasks.push(remoteTask); remotePort++; } } diff --git a/packages/react/src/generators/setup-ssr/files/tsconfig.server.json__tmpl__ b/packages/react/src/generators/setup-ssr/files/tsconfig.server.json__tmpl__ index 75c75d2c0c..89c59b83bf 100644 --- a/packages/react/src/generators/setup-ssr/files/tsconfig.server.json__tmpl__ +++ b/packages/react/src/generators/setup-ssr/files/tsconfig.server.json__tmpl__ @@ -4,7 +4,9 @@ "outDir": "../../out-tsc/server", "target": "es2019", "types": [ - "node" + "node", + "@nx/react/typings/cssmodule.d.ts", + "@nx/react/typings/image.d.ts" ] }, "include": [ diff --git a/packages/webpack/src/executors/ssr-dev-server/ssr-dev-server.impl.ts b/packages/webpack/src/executors/ssr-dev-server/ssr-dev-server.impl.ts index 324767d0e1..286705fec6 100644 --- a/packages/webpack/src/executors/ssr-dev-server/ssr-dev-server.impl.ts +++ b/packages/webpack/src/executors/ssr-dev-server/ssr-dev-server.impl.ts @@ -51,7 +51,7 @@ export async function* ssrDevServerExecutor( let nodeStarted = false; const combined = combineAsyncIterables(runBrowser, runServer); - process.env['port'] = `${options.port}`; + process.env['PORT'] = `${options.port}`; for await (const output of combined) { if (!output.success) throw new Error('Could not build application');