WIP

server/index.js

@@ -0,0 +1,35 @@
+import express from "express";
+import vite from "vite";
+import ssr from "./ssr.js";
+
+(async () => {
+  const app = express();
+  const port = process.env.PORT || 3000;
+
+  // create vite dev server in middleware mode
+  // so vite creates the hmr websocket server on its own.
+  // the ws server will be listening at port 24678 by default, and can be
+  // configured via server.hmr.port
+  const viteServer = await vite.createServer({
+    server: {
+      middlewareMode: true,
+    },
+  });
+  // use vite's connect instance as middleware
+  app.use(viteServer.middlewares);
+
+  app.get("*", (req, res, next) => {
+    console.log(`Hello World! ${process.env.NODE_ENV}`);
+    next();
+  });
+
+  app.use("*", ssr(viteServer.transformRequest("/src/App.jsx")));
+  // app.use(express.static("template"));
+  // app.use(express.static("public"));
+
+  app.listen(port, () => {
+    console.log(
+      `Example app listening at http://localhost:${port} (${process.env.NODE_ENV})`
+    );
+  });
+})();

server/ssr.js

@@ -0,0 +1,31 @@
+import fs from "fs";
+import ReactDOMServer from "react-dom/server.js";
+// import App from "/src/App";
+
+const APP_PLACEHOLDER = "<!-- __REACT_SSR_APP__ -->";
+
+export default (App) => {
+  console.log(App);
+  return async function ssr(req, res, next) {
+    // ToDo
+    console.log("ssr");
+
+    const template = fs.readFileSync(process.cwd() + "/template/index.html", {
+      encoding: "utf-8",
+    });
+    console.log("template", template);
+
+    const [pageBeforeApp, pageAfterApp] = template.split(APP_PLACEHOLDER);
+
+    console.log("start", pageBeforeApp);
+    res.write(pageBeforeApp);
+    const stream = ReactDOMServer.renderToNodeStream((await App).code);
+    stream.pipe(res, { end: false });
+    stream.on("end", () => res.end(pageAfterApp));
+    // const stream = ReactDOMServer.renderToString(App);
+    // console.log("content", stream);
+    // res.write(stream);
+
+    // res.end(pageAfterApp);
+  };
+};