fix(federated-css-react-ssr): prewarm server remotes before starting shells to avoid Node Federation remote init race (3001–3007).

Author: ScriptedAlchemy

federated-css-react-ssr/shell-apps/css-jss/server/index.js

@@ -1,10 +1,34 @@
 const express = require('express');
 const initMiddleware = require('./middleware');
+const fetch = require('node-fetch');
 
 const app = express();
 const PORT = 4000;
 
-const done = () => {
+async function waitUrl(url, timeout = 120000) {
+  const start = Date.now();
+  // Retry until the remoteEntry.js is available over HTTP
+  /* eslint-disable no-await-in-loop */
+  while (true) {
+    try {
+      const res = await fetch(url);
+      if (res.ok) return;
+    } catch (_) {}
+
+    if (Date.now() - start > timeout) {
+      throw new Error(`prewarm timeout for ${url}`);
+    }
+    await new Promise(r => setTimeout(r, 1000));
+  }
+}
+
+const done = async () => {
+  // Ensure remotes are reachable before the first SSR render
+  await Promise.all([
+    waitUrl('http://localhost:3001/server/remoteEntry.js'),
+    waitUrl('http://localhost:3002/server/remoteEntry.js'),
+  ]);
+
   app.listen(PORT, () => {
     console.info(
       `[${new Date().toISOString()}]`,

federated-css-react-ssr/shell-apps/css-scss/server/index.js

@@ -1,10 +1,27 @@
 const express = require('express');
 const initMiddleware = require('./middleware');
+const fetch = require('node-fetch');
 
 const app = express();
 const PORT = 4001;
 
-const done = () => {
+async function waitUrl(url, timeout = 120000) {
+  const start = Date.now();
+  while (true) {
+    try {
+      const res = await fetch(url);
+      if (res.ok) return;
+    } catch (_) {}
+    if (Date.now() - start > timeout) throw new Error(`prewarm timeout for ${url}`);
+    await new Promise(r => setTimeout(r, 1000));
+  }
+}
+
+const done = async () => {
+  await Promise.all([
+    waitUrl('http://localhost:3001/server/remoteEntry.js'),
+    waitUrl('http://localhost:3004/server/remoteEntry.js'),
+  ]);
   app.listen(PORT, () => {
     console.info(
       `[${new Date().toISOString()}]`,

federated-css-react-ssr/shell-apps/jss-styled-components-css-module/server/index.js

@@ -1,10 +1,28 @@
 const express = require('express');
 const initMiddleware = require('./middleware');
+const fetch = require('node-fetch');
 
 const app = express();
 const PORT = 4003;
 
-const done = () => {
+async function waitUrl(url, timeout = 120000) {
+  const start = Date.now();
+  while (true) {
+    try {
+      const res = await fetch(url);
+      if (res.ok) return;
+    } catch (_) {}
+    if (Date.now() - start > timeout) throw new Error(`prewarm timeout for ${url}`);
+    await new Promise(r => setTimeout(r, 1000));
+  }
+}
+
+const done = async () => {
+  await Promise.all([
+    waitUrl('http://localhost:3005/server/remoteEntry.js'),
+    waitUrl('http://localhost:3002/server/remoteEntry.js'),
+    waitUrl('http://localhost:3006/server/remoteEntry.js'),
+  ]);
   app.listen(PORT, () => {
     console.info(
       `[${new Date().toISOString()}]`,

federated-css-react-ssr/shell-apps/jss-styled-components/server/index.js

@@ -1,10 +1,27 @@
 const express = require('express');
 const initMiddleware = require('./middleware');
+const fetch = require('node-fetch');
 
 const app = express();
 const PORT = 4002;
 
-const done = () => {
+async function waitUrl(url, timeout = 120000) {
+  const start = Date.now();
+  while (true) {
+    try {
+      const res = await fetch(url);
+      if (res.ok) return;
+    } catch (_) {}
+    if (Date.now() - start > timeout) throw new Error(`prewarm timeout for ${url}`);
+    await new Promise(r => setTimeout(r, 1000));
+  }
+}
+
+const done = async () => {
+  await Promise.all([
+    waitUrl('http://localhost:3005/server/remoteEntry.js'),
+    waitUrl('http://localhost:3002/server/remoteEntry.js'),
+  ]);
   app.listen(PORT, () => {
     console.info(
       `[${new Date().toISOString()}]`,

federated-css-react-ssr/shell-apps/less-scss/server/index.js

@@ -1,10 +1,27 @@
 const express = require('express');
 const initMiddleware = require('./middleware');
+const fetch = require('node-fetch');
 
 const app = express();
 const PORT = 4004;
 
-const done = () => {
+async function waitUrl(url, timeout = 120000) {
+  const start = Date.now();
+  while (true) {
+    try {
+      const res = await fetch(url);
+      if (res.ok) return;
+    } catch (_) {}
+    if (Date.now() - start > timeout) throw new Error(`prewarm timeout for ${url}`);
+    await new Promise(r => setTimeout(r, 1000));
+  }
+}
+
+const done = async () => {
+  await Promise.all([
+    waitUrl('http://localhost:3007/server/remoteEntry.js'),
+    waitUrl('http://localhost:3004/server/remoteEntry.js'),
+  ]);
   app.listen(PORT, () => {
     console.info(
       `[${new Date().toISOString()}]`,

federated-css-react-ssr/shell-apps/scss-tailwind-css/server/index.js

@@ -1,10 +1,27 @@
 const express = require('express');
 const initMiddleware = require('./middleware');
+const fetch = require('node-fetch');
 
 const app = express();
 const PORT = 4005;
 
-const done = () => {
+async function waitUrl(url, timeout = 120000) {
+  const start = Date.now();
+  while (true) {
+    try {
+      const res = await fetch(url);
+      if (res.ok) return;
+    } catch (_) {}
+    if (Date.now() - start > timeout) throw new Error(`prewarm timeout for ${url}`);
+    await new Promise(r => setTimeout(r, 1000));
+  }
+}
+
+const done = async () => {
+  await Promise.all([
+    waitUrl('http://localhost:3003/server/remoteEntry.js'),
+    waitUrl('http://localhost:3004/server/remoteEntry.js'),
+  ]);
   app.listen(PORT, () => {
     console.info(
       `[${new Date().toISOString()}]`,