bugfix(react): fix react mfe with ssr

nrwl · Oct 12, 2023 · d2fbca6 · d2fbca6
1 parent bdbfd35
commit d2fbca6
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 7 deletions.
diff --git a/e2e/react-core/src/react-module-federation.test.ts b/e2e/react-core/src/react-module-federation.test.ts
@@ -123,6 +123,44 @@ 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');
+
+    runCLI(
+      `g @nx/react:host ${shell} --ssr --remotes=${remote1},${remote2},${remote3} --style=css --no-interactive`
+    );
+
+    [shell, remote1, remote2, remote3].forEach((app) => {
+      checkFilesExist(
+        `apps/${app}/module-federation.config.js`,
+        `apps/${app}/module-federation.server.config.js`
+      );
+      ['server', 'build'].forEach((target) => {
+        ['development', 'production'].forEach((configuration) => {
+          const cliOutput = runCLI(`run ${app}:${target}:${configuration}`);
+          expect(cliOutput).toContain('Successfully ran target');
+        });
+      });
+    });
+
+    expect(readPort(shell)).toEqual(4200);
+    expect(readPort(remote1)).toEqual(4201);
+    expect(readPort(remote2)).toEqual(4202);
+    expect(readPort(remote3)).toEqual(4203);
+
+    if (runE2ETests()) {
+      const e2eResults = runCLI(`e2e ${shell}-e2e --no-watch --verbose`);
+      expect(e2eResults).toContain('All specs passed!');
+      await killPorts(readPort(shell));
+      await killPorts(readPort(remote1));
+      await killPorts(readPort(remote2));
+      await killPorts(readPort(remote3));
+    }
+  }, 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/...t/src/executors/module-federation-ssr-dev-server/module-federation-ssr-dev-server.impl.ts b/...t/src/executors/module-federation-ssr-dev-server/module-federation-ssr-dev-server.impl.ts
@@ -97,7 +97,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/...ges/react/src/generators/host/files/module-federation-ssr-ts/tsconfig.server.json__tmpl__ b/...ges/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__
@@ -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
@@ -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/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
@@ -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');