dinou 1.6.0 → 1.7.0

package/cli.js

@@ -18,13 +18,18 @@ const runCommand = (command, options = {}) => {
 
 program
   .command("dev")
-  .description("Starts the server")
+  .description("Starts")
   .action(() => {
-    console.log("Starting the server...");
-    runCommand(`node ${path.join(dinouPath, "ssg.js")}`);
-    runCommand(
-      `node --conditions react-server ${path.join(dinouPath, "server.js")}`
-    );
+    console.log("Starting...");
+    const startExpress = `node --conditions react-server ${path.join(
+      dinouPath,
+      "server.js"
+    )}`;
+    const startDevServer = `webpack serve --config ${path.join(
+      __dirname,
+      "webpack.config.js"
+    )}`;
+    runCommand(`npx concurrently "${startExpress}" "${startDevServer}"`);
   });
 
 program
@@ -32,7 +37,6 @@ program
   .description("Builds the app for production")
   .action(() => {
     console.log("Building the app...");
-    runCommand(`node ${path.join(dinouPath, "ssg.js")}`);
     const configPath = path.join(__dirname, "webpack.config.js");
     runCommand(
       `cross-env NODE_ENV=production npx webpack --config ${configPath}`

package/dinou/generate-static-page.js

@@ -0,0 +1,34 @@
+const path = require("path");
+const { mkdirSync, createWriteStream } = require("fs");
+const renderAppToHtml = require("./render-app-to-html.js");
+
+const OUT_DIR = path.resolve("dist2");
+
+async function generateStaticPage(reqPath) {
+  const finalReqPath = reqPath.endsWith("/") ? reqPath : reqPath + "/";
+  const htmlPath = path.join(OUT_DIR, finalReqPath, "index.html");
+  const query = {};
+  const paramsString = JSON.stringify(query);
+
+  try {
+    console.log("🔄 Rendering HTML for:", finalReqPath);
+    const htmlStream = await renderAppToHtml(finalReqPath, paramsString);
+
+    mkdirSync(path.dirname(htmlPath), { recursive: true });
+    const fileStream = createWriteStream(htmlPath);
+
+    await new Promise((resolve, reject) => {
+      htmlStream.pipe(fileStream);
+      htmlStream.on("end", resolve);
+      htmlStream.on("error", reject);
+      fileStream.on("error", reject);
+    });
+
+    console.log("✅ Generated HTML:", finalReqPath);
+  } catch (error) {
+    console.error("❌ Error rendering HTML for:", finalReqPath);
+    console.error(error.message);
+  }
+}
+
+module.exports = generateStaticPage;

package/dinou/generate-static-pages.js

@@ -0,0 +1,38 @@
+const path = require("path");
+const { mkdirSync, createWriteStream } = require("fs");
+const renderAppToHtml = require("./render-app-to-html.js");
+
+const OUT_DIR = path.resolve("dist2");
+
+async function generateStaticPages(routes) {
+  for (const route of routes) {
+    const reqPath = route.endsWith("/") ? route : route + "/";
+    const htmlPath = path.join(OUT_DIR, reqPath, "index.html");
+    const query = {};
+    const paramsString = JSON.stringify(query);
+
+    try {
+      console.log("🔄 Rendering HTML for:", reqPath);
+      const htmlStream = await renderAppToHtml(reqPath, paramsString);
+
+      mkdirSync(path.dirname(htmlPath), { recursive: true });
+      const fileStream = createWriteStream(htmlPath);
+
+      await new Promise((resolve, reject) => {
+        htmlStream.pipe(fileStream);
+        htmlStream.on("end", resolve);
+        htmlStream.on("error", reject);
+        fileStream.on("error", reject);
+      });
+
+      console.log("✅ Generated HTML:", reqPath);
+    } catch (error) {
+      console.error("❌ Error rendering:", reqPath);
+      console.error(error.message);
+    }
+  }
+
+  console.log("🟢 Static page generation complete.");
+}
+
+module.exports = generateStaticPages;

package/dinou/generate-static-rsc.js

@@ -0,0 +1,45 @@
+const fs = require("fs");
+const path = require("path");
+const { PassThrough } = require("stream");
+const getSSGJSXOrJSX = require("./get-ssg-jsx-or-jsx.js");
+const { renderToPipeableStream } = require("react-server-dom-webpack/server");
+
+const OUT_DIR = path.resolve("dist2");
+
+async function generateStaticRSC(reqPath) {
+  const finalReqPath = reqPath.endsWith("/") ? reqPath : reqPath + "/";
+  const payloadPath = path.join(OUT_DIR, finalReqPath, "rsc.rsc");
+
+  try {
+    console.log("🔄 Generating RSC payload for:", finalReqPath);
+    const jsx = await getSSGJSXOrJSX(finalReqPath, {});
+    // console.log("✅ JSX retrieved for:", finalReqPath);
+
+    const manifest = JSON.parse(
+      fs.readFileSync(
+        path.resolve("____public____/react-client-manifest.json"),
+        "utf8"
+      )
+    );
+
+    fs.mkdirSync(path.dirname(payloadPath), { recursive: true });
+
+    const fileStream = fs.createWriteStream(payloadPath);
+    const passThrough = new PassThrough();
+
+    const { pipe } = renderToPipeableStream(jsx, manifest);
+    pipe(passThrough);
+    passThrough.pipe(fileStream);
+
+    await new Promise((resolve, reject) => {
+      fileStream.on("finish", resolve);
+      fileStream.on("error", reject);
+    });
+
+    console.log("✅ Generated RSC payload:", finalReqPath);
+  } catch (error) {
+    console.error("❌ Error generating RSC payload for:", finalReqPath, error);
+  }
+}
+
+module.exports = generateStaticRSC;

package/dinou/generate-static-rscs.js

@@ -0,0 +1,48 @@
+const fs = require("fs");
+const path = require("path");
+const { PassThrough } = require("stream");
+const getSSGJSXOrJSX = require("./get-ssg-jsx-or-jsx.js");
+const { renderToPipeableStream } = require("react-server-dom-webpack/server");
+
+const OUT_DIR = path.resolve("dist2");
+
+async function generateStaticRSCs(routes) {
+  const manifest = JSON.parse(
+    fs.readFileSync(
+      path.resolve("____public____/react-client-manifest.json"),
+      "utf8"
+    )
+  );
+
+  for (const route of routes) {
+    const reqPath = route.endsWith("/") ? route : route + "/";
+    const payloadPath = path.join(OUT_DIR, reqPath, "rsc.rsc");
+
+    try {
+      console.log("🔄 Generating RSC payload for:", reqPath);
+      const jsx = await getSSGJSXOrJSX(reqPath, {});
+      // console.log("✅ JSX retrieved for:", reqPath);
+      fs.mkdirSync(path.dirname(payloadPath), { recursive: true });
+
+      const fileStream = fs.createWriteStream(payloadPath);
+      const passThrough = new PassThrough();
+
+      const { pipe } = renderToPipeableStream(jsx, manifest);
+      pipe(passThrough);
+      passThrough.pipe(fileStream);
+
+      await new Promise((resolve, reject) => {
+        fileStream.on("finish", resolve);
+        fileStream.on("error", reject);
+      });
+
+      console.log("✅ Generated RSC payload:", reqPath);
+    } catch (error) {
+      console.error("❌ Error generating RSC payload for:", reqPath, error);
+    }
+  }
+
+  console.log("🟢 Static RSC payload generation complete.");
+}
+
+module.exports = generateStaticRSCs;

package/dinou/generate-static.js

@@ -0,0 +1,23 @@
+const path = require("path");
+const { existsSync, rmSync } = require("fs");
+const generateStaticRSCs = require("./generate-static-rscs");
+const generateStaticPages = require("./generate-static-pages");
+const getStaticPaths = require("./get-static-paths");
+const { buildStaticPages } = require("./build-static-pages");
+
+async function generateStatic() {
+  const distFolder2 = path.resolve(process.cwd(), "dist2");
+
+  if (existsSync(distFolder2)) {
+    rmSync(distFolder2, { recursive: true, force: true });
+    console.log("Deleted existing dist2 folder");
+  }
+
+  await buildStaticPages();
+  const routes = await getStaticPaths();
+  console.log("Static paths:", routes);
+  await generateStaticPages(routes);
+  await generateStaticRSCs(routes);
+}
+
+module.exports = generateStatic;

package/dinou/get-jsx.js

@@ -1,10 +1,9 @@
 const path = require("path");
-const { existsSync, readFileSync } = require("fs");
+const { existsSync } = require("fs");
 const React = require("react");
 const {
   getFilePathAndDynamicParams,
 } = require("./get-file-path-and-dynamic-params");
-const { buildStaticPage } = require("./build-static-pages");
 
 async function getJSX(reqPath, query) {
   const srcFolder = path.resolve(process.cwd(), "src");
@@ -148,103 +147,4 @@ async function getJSX(reqPath, query) {
   return jsx;
 }
 
-function deserializeReactElement(
-  serialized,
-  returnUndefined = { value: false }
-) {
-  // Check if serialized is a React element object
-  if (
-    serialized &&
-    typeof serialized === "object" &&
-    "type" in serialized &&
-    "props" in serialized
-  ) {
-    const { type, modulePath, props } = serialized;
-    let Component;
-    if (modulePath) {
-      try {
-        const module = require(path.resolve(process.cwd(), modulePath));
-        Component = module.default ?? module;
-      } catch (err) {
-        console.error(`Error loading module ${modulePath}:`, err);
-        Component = type; // Fallback
-      }
-    } else if (type === "__clientComponent__") {
-      returnUndefined.value = true;
-    } else if (typeof type === "string" && type !== "Fragment") {
-      Component = type; // HTML elements (e.g., "html", "div")
-    } else if (type === "Fragment") {
-      Component = React.Fragment;
-    } else {
-      Component = type; // Fallback for unknown types
-    }
-
-    // Deserialize all props that are React elements
-    const deserializedProps = {};
-    for (const [key, value] of Object.entries(props)) {
-      if (key === "children") {
-        deserializedProps[key] = Array.isArray(value)
-          ? value.map((child) =>
-              deserializeReactElement(child, returnUndefined)
-            )
-          : value
-          ? deserializeReactElement(value, returnUndefined)
-          : null;
-      } else if (
-        value &&
-        typeof value === "object" &&
-        "type" in value &&
-        "props" in value
-      ) {
-        deserializedProps[key] = deserializeReactElement(
-          value,
-          returnUndefined
-        );
-      } else {
-        deserializedProps[key] = value;
-      }
-    }
-
-    return returnUndefined.value
-      ? undefined
-      : React.createElement(Component, deserializedProps);
-  }
-  // Pass through non-serialized values (e.g., strings, null)
-  return returnUndefined.value ? undefined : serialized;
-}
-
-const regenerating = new Set();
-
-function getSSGJSX(reqPath) {
-  const distFolder = path.resolve(process.cwd(), "dist");
-  const jsonPath = path.join(distFolder, reqPath, "index.json");
-  if (existsSync(jsonPath)) {
-    const { jsx, revalidate, generatedAt } = JSON.parse(
-      readFileSync(jsonPath, "utf8")
-    );
-    if (
-      typeof revalidate === "number" &&
-      revalidate > 0 &&
-      Date.now() > generatedAt + revalidate &&
-      !regenerating.has(reqPath)
-    ) {
-      buildStaticPage(reqPath)
-        .catch(console.error)
-        .finally(() => regenerating.delete(reqPath));
-    }
-    return deserializeReactElement(jsx);
-  }
-}
-
-async function getSSGJSXOrJSX(reqPath, query) {
-  const result = Object.keys(query).length
-    ? await getJSX(reqPath, query)
-    : getSSGJSX(reqPath) ?? (await getJSX(reqPath, query));
-  return result;
-}
-
-module.exports = {
-  getSSGJSXOrJSX,
-  getSSGJSX,
-  getJSX,
-};
+module.exports = getJSX;

package/dinou/get-ssg-jsx-or-jsx.js

@@ -0,0 +1,11 @@
+const getJSX = require("./get-jsx.js");
+const getSSGJSX = require("./get-ssg-jsx.js");
+
+async function getSSGJSXOrJSX(reqPath, query) {
+  const result = Object.keys(query).length
+    ? await getJSX(reqPath, query)
+    : getSSGJSX(reqPath) ?? (await getJSX(reqPath, query));
+  return result;
+}
+
+module.exports = getSSGJSXOrJSX;

package/dinou/get-ssg-jsx.js

@@ -0,0 +1,80 @@
+const path = require("path");
+const { existsSync, readFileSync } = require("fs");
+const React = require("react");
+
+function deserializeReactElement(
+  serialized,
+  returnUndefined = { value: false }
+) {
+  // Check if serialized is a React element object
+  if (
+    serialized &&
+    typeof serialized === "object" &&
+    "type" in serialized &&
+    "props" in serialized
+  ) {
+    const { type, modulePath, props } = serialized;
+    let Component;
+    if (modulePath) {
+      try {
+        const module = require(path.resolve(process.cwd(), modulePath));
+        Component = module.default ?? module;
+      } catch (err) {
+        console.error(`Error loading module ${modulePath}:`, err);
+        Component = type; // Fallback
+      }
+    } else if (type === "__clientComponent__") {
+      returnUndefined.value = true;
+    } else if (typeof type === "string" && type !== "Fragment") {
+      Component = type; // HTML elements (e.g., "html", "div")
+    } else if (type === "Fragment") {
+      Component = React.Fragment;
+    } else {
+      Component = type; // Fallback for unknown types
+    }
+
+    // Deserialize all props that are React elements
+    const deserializedProps = {};
+    for (const [key, value] of Object.entries(props)) {
+      if (key === "children") {
+        deserializedProps[key] = Array.isArray(value)
+          ? value.map((child) =>
+              deserializeReactElement(child, returnUndefined)
+            )
+          : value
+          ? deserializeReactElement(value, returnUndefined)
+          : null;
+      } else if (
+        value &&
+        typeof value === "object" &&
+        "type" in value &&
+        "props" in value
+      ) {
+        deserializedProps[key] = deserializeReactElement(
+          value,
+          returnUndefined
+        );
+      } else {
+        deserializedProps[key] = value;
+      }
+    }
+
+    return returnUndefined.value
+      ? undefined
+      : React.createElement(Component, deserializedProps);
+  }
+  // Pass through non-serialized values (e.g., strings, null)
+  return returnUndefined.value ? undefined : serialized;
+}
+
+function getSSGJSX(reqPath) {
+  const distFolder = path.resolve(process.cwd(), "dist");
+  const jsonPath = path.join(distFolder, reqPath, "index.json");
+  if (existsSync(jsonPath)) {
+    const { jsx } = JSON.parse(readFileSync(jsonPath, "utf8"));
+    const deserializedJSX = deserializeReactElement(jsx);
+    return deserializedJSX;
+  }
+}
+
+module.exports = getSSGJSX;

package/dinou/get-static-paths.js

@@ -0,0 +1,32 @@
+const { readdirSync } = require("fs");
+const path = require("path");
+
+const DIST_DIR = path.resolve("dist");
+
+async function getStaticPaths() {
+  const paths = [];
+
+  function walk(dir) {
+    const entries = readdirSync(dir, { withFileTypes: true });
+
+    for (const entry of entries) {
+      const fullPath = path.join(dir, entry.name);
+
+      if (entry.isDirectory()) {
+        walk(fullPath);
+      } else if (entry.isFile() && entry.name === "index.json") {
+        const relativeDir = path.relative(DIST_DIR, path.dirname(fullPath));
+        const route =
+          "/" +
+          (relativeDir === "" ? "" : relativeDir + "/").replace(/\\/g, "/");
+        paths.push(route);
+      }
+    }
+  }
+
+  walk(DIST_DIR);
+
+  return paths;
+}
+
+module.exports = getStaticPaths;

package/dinou/render-app-to-html.js

@@ -0,0 +1,42 @@
+const path = require("path");
+const { spawn } = require("child_process");
+
+function renderAppToHtml(reqPath, paramsString) {
+  return new Promise((resolve, reject) => {
+    const child = spawn(
+      "node",
+      [path.resolve(__dirname, "render-html.js"), reqPath, paramsString],
+      {
+        env: {
+          ...process.env,
+        },
+      }
+    );
+
+    let errorOutput = "";
+    child.stderr.on("data", (data) => {
+      errorOutput += data.toString();
+    });
+
+    child.on("error", (error) => {
+      reject(new Error(`Failed to start child process: ${error.message}`));
+    });
+
+    child.on("spawn", () => {
+      resolve(child.stdout);
+    });
+
+    child.on("close", (code) => {
+      if (code !== 0) {
+        try {
+          const errorResult = JSON.parse(errorOutput);
+          reject(new Error(errorResult.error || errorOutput));
+        } catch {
+          reject(new Error(`Child process failed: ${errorOutput}`));
+        }
+      }
+    });
+  });
+}
+
+module.exports = renderAppToHtml;

package/dinou/render-html.js

@@ -24,7 +24,8 @@ addHook({
 });
 
 const { renderToPipeableStream } = require("react-dom/server");
-const { getJSX, getSSGJSX } = require("./get-jsx");
+const getJSX = require("./get-jsx");
+const getSSGJSX = require("./get-ssg-jsx.js");
 const { getErrorJSX } = require("./get-error-jsx");
 const { renderJSXToClientJSX } = require("./render-jsx-to-client-jsx");
 

package/dinou/revalidating.js

@@ -0,0 +1,32 @@
+const path = require("path");
+const { existsSync, readFileSync } = require("fs");
+const generateStaticPage = require("./generate-static-page");
+const { buildStaticPage } = require("./build-static-pages");
+const generateStaticRSC = require("./generate-static-rsc");
+
+const regenerating = new Set();
+
+function revalidating(reqPath) {
+  const distFolder = path.resolve(process.cwd(), "dist");
+  const jsonPath = path.join(distFolder, reqPath, "index.json");
+  if (existsSync(jsonPath)) {
+    const { revalidate, generatedAt } = JSON.parse(
+      readFileSync(jsonPath, "utf8")
+    );
+    if (
+      typeof revalidate === "number" &&
+      revalidate > 0 &&
+      Date.now() > generatedAt + revalidate &&
+      !regenerating.has(reqPath)
+    ) {
+      buildStaticPage(reqPath)
+        .then(() =>
+          generateStaticPage(reqPath).then(() => generateStaticRSC(reqPath))
+        )
+        .catch(console.error)
+        .finally(() => regenerating.delete(reqPath));
+    }
+  }
+}
+
+module.exports = revalidating;

package/dinou/server.js

@@ -2,15 +2,16 @@ require("dotenv/config");
 require("./register-paths");
 const webpackRegister = require("react-server-dom-webpack/node-register");
 const path = require("path");
-const { readFileSync } = require("fs");
+const {
+  readFileSync,
+  existsSync,
+  // mkdirSync,
+  // createWriteStream,
+  createReadStream,
+} = require("fs");
 const { renderToPipeableStream } = require("react-server-dom-webpack/server");
 const express = require("express");
-const { spawn } = require("child_process");
-const webpack = require("webpack");
-const webpackDevMiddleware = require("webpack-dev-middleware");
-const webpackHotMiddleware = require("webpack-hot-middleware");
-const webpackConfig = require(path.resolve(__dirname, "../webpack.config.js"));
-const { getSSGJSXOrJSX } = require("./get-jsx.js");
+const getSSGJSXOrJSX = require("./get-ssg-jsx-or-jsx.js");
 const { getErrorJSX } = require("./get-error-jsx.js");
 const addHook = require("./asset-require-hook.js");
 webpackRegister();
@@ -36,37 +37,69 @@ addHook({
   },
   publicPath: "images/",
 });
-
-const app = express();
-app.use(express.json());
+// const { PassThrough } = require("stream");
+const generateStatic = require("./generate-static.js");
+const renderAppToHtml = require("./render-app-to-html.js");
+const revalidating = require("./revalidating.js");
 const isDevelopment = process.env.NODE_ENV !== "production";
+const app = express();
 
-if (isDevelopment) {
-  const compiler = webpack(webpackConfig);
-  app.use(
-    webpackDevMiddleware(compiler, {
-      publicPath: webpackConfig.output.publicPath,
-      writeToDisk: true,
-    })
-  );
-  app.use(webpackHotMiddleware(compiler));
-}
+app.use(express.json());
 
 app.use(express.static(path.resolve(process.cwd(), "____public____")));
 
+app.get("/.well-known/appspecific/com.chrome.devtools.json", (req, res) => {
+  res.setHeader("Content-Type", "application/json");
+  res.json({
+    name: "Dinou DevTools",
+    description: "Dinou DevTools for Chrome",
+    version: "1.0.0",
+    devtools_page: "/____public____/devtools.html",
+  });
+});
+
 app.get(/^\/____rsc_payload____\/.*\/?$/, async (req, res) => {
   try {
     const reqPath = (
       req.path.endsWith("/") ? req.path : req.path + "/"
     ).replace("/____rsc_payload____", "");
+
+    if (!isDevelopment) {
+      const payloadPath = path.join("dist2", reqPath, "rsc.rsc");
+      if (existsSync(payloadPath)) {
+        // console.log(`[RSC] Serving existing payload for ${reqPath}`);
+        res.setHeader("Content-Type", "application/octet-stream");
+        const readStream = createReadStream(payloadPath);
+        readStream.on("error", (err) => {
+          console.error("Error reading RSC file:", err);
+          res.status(500).end();
+        });
+        return readStream.pipe(res);
+      }
+    }
+
+    // console.log(`[RSC] Payload not found, generating new one for ${reqPath}`);
+
     const jsx = await getSSGJSXOrJSX(reqPath, { ...req.query });
-    const manifest = readFileSync(
-      path.resolve(process.cwd(), "____public____/react-client-manifest.json"),
-      "utf8"
+
+    const manifest = JSON.parse(
+      readFileSync(
+        path.resolve("____public____/react-client-manifest.json"),
+        "utf8"
+      )
     );
-    const moduleMap = JSON.parse(manifest);
-    const { pipe } = renderToPipeableStream(jsx, moduleMap);
+
+    // mkdirSync(path.dirname(payloadPath), { recursive: true });
+    // const fileWriteStream = createWriteStream(payloadPath);
+
+    const { pipe } = renderToPipeableStream(jsx, manifest);
     pipe(res);
+
+    // Pipe both to response and file
+    // const passThrough = new PassThrough();
+    // pipe(passThrough);
+    // passThrough.pipe(res);
+    // passThrough.pipe(fileWriteStream);
   } catch (error) {
     console.error("Error rendering RSC:", error);
     res.status(500).send("Internal Server Error");
@@ -92,62 +125,41 @@ app.post(/^\/____rsc_payload_error____\/.*\/?$/, async (req, res) => {
   }
 });
 
-// Render HTML via child process, returning a stream
-function renderAppToHtml(reqPath, paramsString) {
-  return new Promise((resolve, reject) => {
-    const child = spawn(
-      "node",
-      [path.resolve(__dirname, "render-html.js"), reqPath, paramsString],
-      {
-        env: {
-          ...process.env,
-        },
-      }
-    );
-
-    let errorOutput = "";
-    child.stderr.on("data", (data) => {
-      errorOutput += data.toString();
-    });
-
-    child.on("error", (error) => {
-      reject(new Error(`Failed to start child process: ${error.message}`));
-    });
+app.get(/^\/.*\/?$/, async (req, res) => {
+  try {
+    const reqPath = req.path.endsWith("/") ? req.path : req.path + "/";
+    const htmlPath = path.join("dist2", reqPath, "index.html");
 
-    child.on("spawn", () => {
-      resolve(child.stdout);
-    });
+    if (!isDevelopment) {
+      revalidating(reqPath);
 
-    child.on("close", (code) => {
-      if (code !== 0) {
-        try {
-          const errorResult = JSON.parse(errorOutput);
-          reject(new Error(errorResult.error || errorOutput));
-        } catch {
-          reject(new Error(`Child process failed: ${errorOutput}`));
-        }
+      if (existsSync(htmlPath)) {
+        // console.log("Serving cached HTML:", htmlPath);
+        res.setHeader("Content-Type", "text/html");
+        return createReadStream(htmlPath).pipe(res);
       }
-    });
-  });
-}
+    }
 
-app.get(/^\/.*\/?$/, async (req, res) => {
-  try {
-    const reqPath = req.path.endsWith("/") ? req.path : req.path + "/";
-    // Get the stream from the child process
     const appHtmlStream = await renderAppToHtml(
       reqPath,
       JSON.stringify({ ...req.query })
     );
-    // Set headers for the response
-    res.setHeader("Content-Type", "text/html");
 
+    // mkdirSync(path.dirname(htmlPath), { recursive: true });
+
+    // const fileStream = createWriteStream(htmlPath);
+    res.setHeader("Content-Type", "text/html");
     appHtmlStream.pipe(res);
+    // appHtmlStream.pipe(fileStream);
 
     appHtmlStream.on("error", (error) => {
       console.error("Stream error:", error);
       res.status(500).send("Internal Server Error");
     });
+
+    // fileStream.on("error", (error) => {
+    //   console.error("File write error:", error);
+    // });
   } catch (error) {
     console.error("Error rendering React app:", error);
     res.status(500).send("Internal Server Error");
@@ -156,6 +168,11 @@ app.get(/^\/.*\/?$/, async (req, res) => {
 
 const port = process.env.PORT || 3000;
 
-app.listen(port, () => {
+app.listen(port, async () => {
+  if (!isDevelopment) {
+    await generateStatic();
+  } else {
+    console.log("⚙️ Rendering dynamically in dev mode");
+  }
   console.log(`Listening on port ${port}`);
 });

package/eject.js

@@ -23,17 +23,12 @@ if (fs.existsSync(path.join(modulePath, "postcss.config.js"))) {
   );
 }
 
-// don't copy the LICENSE.md file, as it is not needed in the project root
-// fs.copyFileSync(
-//   path.join(modulePath, "LICENSE.md"),
-//   path.join(projectRoot, "dinou/LICENSE.md")
-// );
-
 const pkg = require(path.join(projectRoot, "package.json"));
+pkg.scripts["start:express"] = "node --conditions react-server dinou/server.js";
+pkg.scripts["start:dev-server"] = "webpack serve --config webpack.config.js";
 pkg.scripts.dev =
-  "node dinou/ssg.js && node --conditions react-server dinou/server.js";
-pkg.scripts.build =
-  "node dinou/ssg.js && cross-env NODE_ENV=production webpack";
+  'concurrently "npm run start:express" "npm run start:dev-server"';
+pkg.scripts.build = "cross-env NODE_ENV=production webpack";
 pkg.scripts.start =
   "cross-env NODE_ENV=production node --conditions react-server dinou/server.js";
 delete pkg.scripts.eject;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dinou",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "Minimal React 19 Framework",
   "main": "index.js",
   "bin": {
@@ -30,6 +30,7 @@
     "autoprefixer": "^10.4.21",
     "babel-loader": "^10.0.0",
     "commander": "^14.0.0",
+    "concurrently": "^9.2.0",
     "copy-webpack-plugin": "^13.0.0",
     "cross-env": "^7.0.3",
     "css-loader": "^7.1.2",
@@ -47,8 +48,7 @@
     "tsconfig-paths-webpack-plugin": "^4.2.0",
     "webpack": "^5.99.8",
     "webpack-cli": "^6.0.1",
-    "webpack-dev-middleware": "^7.4.2",
-    "webpack-hot-middleware": "^2.26.1"
+    "webpack-dev-server": "^5.2.2"
   },
   "peerDependencies": {
     "react": "^19.1.0",

package/webpack.config.js

@@ -2,7 +2,6 @@ require("dotenv/config");
 const path = require("path");
 const fs = require("fs");
 const ReactServerWebpackPlugin = require("react-server-dom-webpack/plugin");
-const webpack = require("webpack");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const createScopedName = require("./dinou/createScopedName");
@@ -25,14 +24,10 @@ const configFile = getConfigFileIfExists();
 module.exports = {
   mode: isDevelopment ? "development" : "production",
   entry: {
-    main: [
-      isDevelopment && "webpack-hot-middleware/client?reload=true",
-      path.resolve(__dirname, "./dinou/client.jsx"),
-    ].filter(Boolean),
-    error: [
-      isDevelopment && "webpack-hot-middleware/client?reload=true",
-      path.resolve(__dirname, "./dinou/client-error.jsx"),
-    ].filter(Boolean),
+    main: [path.resolve(__dirname, "./dinou/client.jsx")].filter(Boolean),
+    error: [path.resolve(__dirname, "./dinou/client-error.jsx")].filter(
+      Boolean
+    ),
   },
   output: {
     path: path.resolve(process.cwd(), "./____public____"),
@@ -121,7 +116,6 @@ module.exports = {
     ],
   },
   plugins: [
-    isDevelopment && new webpack.HotModuleReplacementPlugin(),
     new ReactServerWebpackPlugin({ isServer: false }),
     new CopyWebpackPlugin({
       patterns: [
@@ -162,4 +156,23 @@ module.exports = {
   watchOptions: {
     ignored: /____public____/,
   },
+  ...(isDevelopment
+    ? {
+        devServer: {
+          port: 3001,
+          hot: true,
+          devMiddleware: {
+            index: false,
+            writeToDisk: true,
+          },
+          proxy: [
+            {
+              context: () => true,
+              target: "http://localhost:3000",
+              changeOrigin: true,
+            },
+          ],
+        },
+      }
+    : {}),
 };

package/dinou/ssg.js

@@ -1,27 +0,0 @@
-require("./register-paths");
-const babelRegister = require("@babel/register");
-babelRegister({
-  ignore: [/[\\\/](build|server|node_modules)[\\\/]/],
-  presets: [
-    ["@babel/preset-react", { runtime: "automatic" }],
-    "@babel/preset-typescript",
-  ],
-  plugins: ["@babel/transform-modules-commonjs"],
-  extensions: [".js", ".jsx", ".ts", ".tsx"],
-});
-const { buildStaticPages } = require("./build-static-pages");
-const addHook = require("./asset-require-hook.js");
-const createScopedName = require("./createScopedName");
-require("css-modules-require-hook")({
-  generateScopedName: createScopedName,
-});
-addHook({
-  extensions: ["png", "jpg", "jpeg", "gif", "svg", "webp"],
-  name: function (localName, filepath) {
-    const result = createScopedName(localName, filepath);
-    return result + ".[ext]";
-  },
-  publicPath: "images/",
-});
-
-(async () => await buildStaticPages())();