try out proxy possibility

commands/reshowcase

@@ -4,6 +4,7 @@ const fs = require("fs");
 const path = require("path");
 const os = require("os");
 const esbuild = require("esbuild");
+const http = require("http");
 const { htmlPlugin } = require("@craftamap/esbuild-plugin-html");
 
 const toAbsolutePath = (filepath) => {
@@ -174,7 +175,7 @@ const defaultConfig = {
 };
 
 const getPort = () => {
-  const defaultPort = 8000;
+  const defaultPort = 9000;
   const prefix = "--port=";
   const arg = process.argv.find((item) => item.startsWith(prefix));
   if (arg === undefined) {
@@ -190,9 +191,11 @@ const getPort = () => {
   }
 };
 
+const {pathRewrites, ...esCustomConfig} = customConfig;
+
 const config = {
   ...defaultConfig,
-  ...customConfig,
+  ...esCustomConfig,
   define: { ...defaultConfig.define, ...(customConfig.define || {}) },
   plugins: [...defaultConfig.plugins, ...(customConfig.plugins || [])],
 };
@@ -211,9 +214,7 @@ if (isBuild) {
       process.exit(1);
     });
 } else {
-  const port = getPort();
-  const durationLabel = "[Reshowcase] Watch and serve started. Duration";
-  console.time(durationLabel);
+  const clientPort = 3030 || getPort();
 
   esbuild
     .context(config)
@@ -225,11 +226,53 @@ if (isBuild) {
       process.exit(1);
     })
     .then((ctx) => {
-      return ctx.serve({ port: port, servedir: outputPath });
+      return ctx.serve({ servedir: outputPath })
     })
-    .then((_serveResult) => {
-      console.timeEnd(durationLabel);
-      console.error("[Reshowcase] Watch mode started on port:", port);
+    .then((s) => {
+      const server = http.createServer((req, res) => {
+        let changeOrigin = false;
+        let host = s.host;
+        let port = s.port;
+
+        pathRewrites?.forEach(rewrite => {
+          if (req.url.startsWith(rewrite.context)) {
+            const url = new URL(rewrite.target);
+            host = url.hostname;
+            port = url.port;
+            changeOrigin = rewrite.changeOrigin;
+          }
+        });
+
+        const proxyReq = http.request({
+          hostname: host,
+          port: port,
+          path: req.url,
+          method: req.method,
+          headers: {
+            ...req.headers,
+            ...(changeOrigin ? { host: `${host}:${port}` } : {})
+          },
+        }, proxyRes => {
+          res.writeHead(proxyRes.statusCode, proxyRes.headers)
+          proxyRes.pipe(res, { end: true })
+        })
+
+        proxyReq.on("error", err => {
+          console.error("Proxy request error:", err);
+          res.writeHead(500, { "Content-Type": "text/plain" });
+          res.end("Internal Server Error");
+        });
+
+        req.pipe(proxyReq, { end: true })
+      })
+
+      server.listen(clientPort, error => {
+        if (error) {
+          return console.error(error)
+        }
+
+        console.log(`[Reshowcase] Server listening on port ${clientPort}`)
+      })
     })
     .catch((error) => {
       console.error("[Reshowcase] Esbuild serve start failed:", error);

dune

@@ -23,7 +23,7 @@
    start
    --entry=%{project_root}/example/example/example/Demo.js
    --output=%{project_root}/build
-   --port=8000)))
+   --port=9000)))
 
 (rule
  (alias build-example)

example/.reshowcase/config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  pathRewrites: [
+    { context: "/v4/", target: "http://localhost:3333" }
+  ]
+}

example/Demo.re

@@ -58,11 +58,26 @@ module Css = {
   ];
 };
 
+module Test = {
+  [@react.component]
+  let make = () => {
+    React.useEffect1(
+      () => {
+        Fetch.fetch("/v4/tkGetAppearance")->ignore;
+        None;
+      },
+      [||],
+    );
+
+    "I am making request"->React.string;
+  };
+};
+
 demo(({addDemo: _, addCategory}) =>
   addCategory("Buttons", ({addDemo, addCategory: _}) => {
     addDemo("Normal", ({string, bool, _}) => {
-      let disabled = bool("Disabled", false);
-      let color =
+      let _disabled = bool("Disabled", false);
+      let _color =
         string(
           "Color",
           ~options=[|
@@ -72,15 +87,7 @@ demo(({addDemo: _, addCategory}) =>
           |],
           "0091FF",
         );
-      <button
-        disabled
-        className={
-          Css.button
-          +++ Css.buttonDisabled->Cn.ifTrue(disabled)
-          +++ Css.buttonColor(color)
-        }>
-        {string("Text", "hello")->React.string}
-      </button>;
+      <Test />;
     });
     addDemo("Huge", ({string, bool, _}) => {
       let disabled = bool("Disabled", false);

example/dune

@@ -1,7 +1,7 @@
 (melange.emit
  (target example)
  (alias example)
- (libraries reshowcase reason-react styled-ppx.melange)
+ (libraries melange-fetch reshowcase reason-react styled-ppx.melange)
  (module_systems es6)
  (preprocess
   (pps melange.ppx reason-react-ppx styled-ppx)))

reshowcase.opam

@@ -13,6 +13,7 @@ depends: [
   "dune" {>= "3.8"}
   "ocaml"
   "melange" {>= "3.0.0"}
+  "melange-fetch"
   "reason" {>= "3.10.0"}
   "reason-react" {>= "0.14.0"}
   "reason-react-ppx" {>= "0.14.0"}