Allow full-stack API calling

Author: Shellishack

express.ts

@@ -50,38 +50,45 @@ app.use((req, res, next) => {
   return next();
 });
 
+app.use("/.server-function", express.static("dist/server"));
+app.all(/^\/server-function\/(.*)/, async (req, res) => {
+  const func = req.params[0];
+
+  const url = `${req.protocol}://${req.get("host")}${req.originalUrl}`;
+
+  // Convert Express req -> Fetch Request
+  const request = new Request(url, {
+    method: req.method,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    headers: req.headers as any,
+    body: ["GET", "HEAD"].includes(req.method)
+      ? null
+      : JSON.stringify(req.body),
+  });
+
+  const { loadAndCall } = await import("./preview/backend/load-remote.cjs");
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const response = await loadAndCall(
+    func,
+    request,
+    pulseConfig.id,
+    "http://localhost:3030",
+    pulseConfig.version
+  );
+
+  // If loadAndCall returns a Response (Fetch API Response)
+  if (response instanceof Response) {
+    res.status(response.status);
+    response.headers.forEach((v, k) => res.setHeader(k, v));
+    res.send(await response.text());
+  } else {
+    res.json(response);
+  }
+});
+
 if (isPreview) {
   /* Preview mode */
   app.use(express.static("dist/client"));
-  app.use("/.server-function", express.static("dist/server"));
-  app.all(/^\/server-function\/(.*)/, async (req, res) => {
-    const func = req.params[0];
-
-    const url = `${req.protocol}://${req.get("host")}${req.originalUrl}`;
-
-    // Convert Express req -> Fetch Request
-    const request = new Request(url, {
-      method: req.method,
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      headers: req.headers as any,
-      body: ["GET", "HEAD"].includes(req.method)
-        ? null
-        : JSON.stringify(req.body),
-    });
-
-    const { loadAndCall } = await import("./dist/preview/backend/index.cjs");
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const response = await loadAndCall(func, request);
-
-    // If loadAndCall returns a Response (Fetch API Response)
-    if (response instanceof Response) {
-      res.status(response.status);
-      response.headers.forEach((v, k) => res.setHeader(k, v));
-      res.send(await response.text());
-    } else {
-      res.json(response);
-    }
-  });
 
   app.listen(3030, "0.0.0.0");
 } else if (isDev) {

package-lock.json

@@ -30,6 +30,7 @@
     "@module-federation/node": "2.7.17",
     "@module-federation/runtime": "0.19.1",
     "@tailwindcss/postcss": "^4.1.14",
+    "@types/cors": "^2.8.19",
     "@types/react": "19.2.2",
     "@types/react-dom": "19.2.2",
     "concurrently": "^9.2.1",

package.json

@@ -0,0 +1,23 @@
+const { createInstance } = require("@module-federation/runtime");
+
+async function loadAndCall(func, req, appId, origin, version) {
+  // here we assign the return value of the init() function, which can be used to do some more complex
+  // things with the module federation runtime
+  const instance = createInstance({
+    name: "server_function_runner",
+    remotes: [
+      {
+        name: appId + "_server",
+        entry: `${origin}/${appId}/${version}/server/remoteEntry.js`,
+      },
+    ],
+  });
+
+  const loadedFunc = (await instance.loadRemote(`${appId}_server/${func}`))
+    .default;
+
+  const res = await loadedFunc(req);
+  return res;
+}
+
+module.exports = { loadAndCall };

preview/backend/load-remote.cjs

@@ -5,6 +5,8 @@ import { useLoading } from "@pulse-editor/react-api";
 export default function Main() {
   const [count, setCount] = useState<number>(0);
   const { isReady, toggleLoading } = useLoading();
+  const [inputValue, setInputValue] = useState<string>("");
+  const [apiResult, setApiResult] = useState<string>("");
 
   useEffect(() => {
     if (isReady) {
@@ -38,10 +40,35 @@ export default function Main() {
           className="bg-gray-800 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded-sm"
           onClick={() => setCount(count + 1)}
         >
-          Click me
+          Click me to increase count
         </button>
       </div>
       <p className="text-blue-400">{count}</p>
+
+      <div>
+        <input
+          className="border-2 border-gray-300 rounded-sm p-2"
+          type="text"
+          value={inputValue}
+          onChange={(e) => setInputValue(e.target.value)}
+        />
+        <button
+          className="bg-gray-800 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded-sm"
+          onClick={() => {
+            fetch("/server-function/echo", {
+              method: "POST",
+              headers: { "Content-Type": "application/json" },
+              body: JSON.stringify({ message: inputValue }),
+            }).then(async (response) => {
+              const data = await response.json();
+              setApiResult(data.message);
+            });
+          }}
+        >
+          Click me to call server function that echoes a message
+        </button>
+        <p className="text-blue-400">{apiResult}</p>
+      </div>
     </div>
   );
 }

src/main.tsx

@@ -7,10 +7,13 @@ export default async function helloWorld(req: Request) {
     return new Response("Method Not Allowed", { status: 405 });
   }
 
+  const params = new URL(req.url).searchParams;
+  const name = params.get("name") ?? "world";
+
   // Process the data and return a response
   return new Response(
     JSON.stringify({
-      message: "Hello, world!",
+      message: `Hello, ${name}!`,
     }),
     { status: 200 }
   );