fix(react): use correct setup for React SSR with module federation (#…

…13822)
nrwl · Dec 14, 2022 · 2392b91 · 2392b91
1 parent 08aacba
commit 2392b91
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 10 deletions.
diff --git a/packages/react/src/generators/host/files/module-federation/webpack.config.prod.js__tmpl__ b/packages/react/src/generators/host/files/module-federation/webpack.config.prod.js__tmpl__
@@ -14,19 +14,19 @@ const prodConfig = {
      *
      * e.g.
      * remotes: [
-     *   ['app1', '//app1.example.com'],
-     *   ['app2', '//app2.example.com'],
+     *   ['app1', 'http://app1.example.com'],
+     *   ['app2', 'http://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'],
+     *   ['app1', 'http://example.com/path/to/app1/remoteEntry.js'],
+     *   ['app2', 'http://example.com/path/to/app2/remoteEntry.js'],
      * ]
      */
     remotes: [
-      <% remotes.forEach(function(r) {%>['<%= r.fileName %>', '//localhost:<%= r.port %>/'],<% }); %>
+      <% remotes.forEach(function(r) {%>['<%= r.fileName %>', 'http://localhost:<%= r.port %>/'],<% }); %>
     ],
 };
 

diff --git a/packages/react/src/generators/remote/files/module-federation-ssr/server.ts__tmpl__ b/packages/react/src/generators/remote/files/module-federation-ssr/server.ts__tmpl__
@@ -8,17 +8,26 @@ const port = process.env['PORT'] || 4200;
 const app = express();
 
 const browserDist = path.join(process.cwd(), '<%= browserBuildOutputPath %>');
+const serverDist = path.join(process.cwd(), '<%= serverBuildOutputPath %>');
 const indexPath = path.join(browserDist, 'index.html');
 
 app.use(cors());
 
+// Client-side static bundles
 app.get(
   '*.*',
   express.static(browserDist, {
     maxAge: '1y',
   })
 );
 
+// Static bundles for server-side module federation
+app.use('/server',
+  express.static(serverDist, {
+    maxAge: '1y'
+  })
+);
+
 app.use('*', handleRequest(indexPath));
 
 const server = app.listen(port, () => {

diff --git a/packages/react/src/generators/remote/lib/setup-ssr-for-remote.ts b/packages/react/src/generators/remote/lib/setup-ssr-for-remote.ts
@@ -29,6 +29,7 @@ export async function setupSsrForRemote(
       appName,
       tmpl: '',
       browserBuildOutputPath: project.targets.build.options.outputPath,
+      serverBuildOutputPath: project.targets.server.options.outputPath,
     }
   );
 

diff --git a/packages/react/src/module-federation/with-module-federation-ssr.ts b/packages/react/src/module-federation/with-module-federation-ssr.ts
@@ -9,11 +9,11 @@ function determineRemoteUrl(remote: string) {
   if (!serveTarget) {
     throw new Error(
       `Cannot automatically determine URL of remote (${remote}). Looked for property "host" in the project's "serve-server" target.\n
-      You can also use the tuple syntax in your webpack config to configure your remotes. e.g. \`remotes: [['remote1', '//localhost:4201']]\``
+      You can also use the tuple syntax in your webpack config to configure your remotes. e.g. \`remotes: [['remote1', 'http://localhost:4201']]\``
     );
   }
 
-  const host = serveTarget.options?.host ?? '//localhost';
+  const host = serveTarget.options?.host ?? 'http://localhost';
   const port = serveTarget.options?.port ?? 4201;
   return `${
     host.endsWith('/') ? host.slice(0, -1) : host

diff --git a/packages/react/src/module-federation/with-module-federation.ts b/packages/react/src/module-federation/with-module-federation.ts
@@ -10,11 +10,11 @@ function determineRemoteUrl(remote: string) {
   if (!serveTarget) {
     throw new Error(
       `Cannot automatically determine URL of remote (${remote}). Looked for property "host" in the project's "serve" target.\n
-      You can also use the tuple syntax in your webpack config to configure your remotes. e.g. \`remotes: [['remote1', '//localhost:4201']]\``
+      You can also use the tuple syntax in your webpack config to configure your remotes. e.g. \`remotes: [['remote1', 'http://localhost:4201']]\``
     );
   }
 
-  const host = serveTarget.options?.host ?? '//localhost';
+  const host = serveTarget.options?.host ?? 'http://localhost';
   const port = serveTarget.options?.port ?? 4201;
   return `${
     host.endsWith('/') ? host.slice(0, -1) : host

diff --git a/packages/react/src/utils/ast-utils.ts b/packages/react/src/utils/ast-utils.ts
@@ -466,7 +466,7 @@ export function addStaticRouter(
       {
         type: ChangeType.Insert,
         index: app.getStart(),
-        text: `<StaticRouter location={req.url}>`,
+        text: `<StaticRouter location={req.originalUrl}>`,
       },
       {
         type: ChangeType.Insert,