chore: revert templates using unstable_dev (remix-run#6218)

templates/express/package.json

@@ -1,10 +1,11 @@
 {
   "private": true,
   "sideEffects": false,
-  "type": "module",
   "scripts": {
     "build": "remix build",
-    "dev": "remix dev -c \"node ./server.js\"",
+    "dev": "npm-run-all build --parallel \"dev:*\"",
+    "dev:node": "cross-env NODE_ENV=development nodemon --require dotenv/config ./server.js --watch ./server.js",
+    "dev:remix": "remix watch",
     "start": "cross-env NODE_ENV=production node ./server.js",
     "typecheck": "tsc"
   },

templates/express/remix.config.js

@@ -1,13 +1,12 @@
 /** @type {import('@remix-run/dev').AppConfig} */
-export default {
+module.exports = {
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
   // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
-  serverModuleFormat: "esm",
+  serverModuleFormat: "cjs",
   future: {
-    unstable_dev: true,
     v2_errorBoundary: true,
     v2_meta: true,
     v2_normalizeFormMethod: true,

templates/express/server.js

@@ -1,13 +1,14 @@
-import express from "express";
-import compression from "compression";
-import morgan from "morgan";
-import { createRequestHandler } from "@remix-run/express";
-import { installGlobals } from "@remix-run/node";
-
-import * as build from "./build/index.js";
+const path = require("path");
+const express = require("express");
+const compression = require("compression");
+const morgan = require("morgan");
+const { createRequestHandler } = require("@remix-run/express");
+const { installGlobals } = require("@remix-run/node");
 
 installGlobals();
 
+const BUILD_DIR = path.join(process.cwd(), "build");
+
 const app = express();
 
 app.use(compression());
@@ -27,15 +28,37 @@ app.use(express.static("public", { maxAge: "1h" }));
 
 app.use(morgan("tiny"));
 
-const MODE = process.env.NODE_ENV;
-app.all("*", createRequestHandler({ build, mode: MODE }));
+app.all(
+  "*",
+  process.env.NODE_ENV === "development"
+    ? (req, res, next) => {
+        purgeRequireCache();
 
+        return createRequestHandler({
+          build: require(BUILD_DIR),
+          mode: process.env.NODE_ENV,
+        })(req, res, next);
+      }
+    : createRequestHandler({
+        build: require(BUILD_DIR),
+        mode: process.env.NODE_ENV,
+      })
+);
 const port = process.env.PORT || 3000;
-app.listen(port, async () => {
-  console.log(`✅ Express server listening on port ${port}`);
 
-  if (process.env.NODE_ENV === "development") {
-    const { broadcastDevReady } = await import("@remix-run/node");
-    broadcastDevReady(build);
-  }
+app.listen(port, () => {
+  console.log(`Express server listening on port ${port}`);
 });
+
+function purgeRequireCache() {
+  // purge require cache on requests for "server side HMR" this won't let
+  // you have in-memory objects between requests in development,
+  // alternatively you can set up nodemon/pm2-dev to restart the server on
+  // file changes, but then you'll have to reconnect to databases/etc on each
+  // change. We prefer the DX of this, so we've included it for you by default
+  for (const key in require.cache) {
+    if (key.startsWith(BUILD_DIR)) {
+      delete require.cache[key];
+    }
+  }
+}

templates/remix/remix.config.js

@@ -7,7 +7,6 @@ module.exports = {
   // publicPath: "/build/",
   serverModuleFormat: "cjs",
   future: {
-    unstable_dev: true,
     v2_errorBoundary: true,
     v2_meta: true,
     v2_normalizeFormMethod: true,