chore(templates/express): integrate v2_dev

templates/express/package.json

@@ -1,11 +1,10 @@
 {
   "private": true,
   "sideEffects": false,
+  "type": "module",
   "scripts": {
     "build": "remix build",
-    "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",
+    "dev": "remix dev --no-restart -c \"node server.js\"",
     "start": "cross-env NODE_ENV=production node ./server.js",
     "typecheck": "tsc"
   },
@@ -30,10 +29,8 @@
     "@types/morgan": "^1.9.4",
     "@types/react": "^18.0.35",
     "@types/react-dom": "^18.0.11",
-    "dotenv": "^16.0.3",
+    "chokidar": "^3.5.3",
     "eslint": "^8.38.0",
-    "nodemon": "^2.0.22",
-    "npm-run-all": "^4.1.5",
     "typescript": "^5.0.4"
   },
   "engines": {

templates/express/remix.config.js

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

templates/express/server.js

@@ -1,14 +1,19 @@
-const path = require("path");
+import * as fs from "node:fs";
 
-const { createRequestHandler } = require("@remix-run/express");
-const { installGlobals } = require("@remix-run/node");
-const compression = require("compression");
-const express = require("express");
-const morgan = require("morgan");
+import { createRequestHandler } from "@remix-run/express";
+import { broadcastDevReady, installGlobals } from "@remix-run/node";
+import chokidar from "chokidar";
+import compression from "compression";
+import express from "express";
+import morgan from "morgan";
 
 installGlobals();
 
-const BUILD_DIR = path.join(process.cwd(), "build");
+const BUILD_PATH = "./build/index.js";
+/**
+ * @type { import('@remix-run/node').ServerBuild | Promise<import('@remix-run/node').ServerBuild> }
+ */
+let build = await import(BUILD_PATH);
 
 const app = express();
 
@@ -32,34 +37,42 @@ app.use(morgan("tiny"));
 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);
-      }
+    ? createDevRequestHandler()
     : createRequestHandler({
-        build: require(BUILD_DIR),
+        build,
         mode: process.env.NODE_ENV,
       })
 );
-const port = process.env.PORT || 3000;
 
-app.listen(port, () => {
+const port = process.env.PORT || 3000;
+app.listen(port, async () => {
   console.log(`Express server listening on port ${port}`);
+
+  if (process.env.NODE_ENV === "development") {
+    broadcastDevReady(build);
+  }
 });
 
-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];
+function createDevRequestHandler() {
+  const watcher = chokidar.watch(BUILD_PATH, { ignoreInitial: true });
+
+  watcher.on("all", async () => {
+    // 1. purge require cache && load updated server build
+    const stat = fs.statSync(BUILD_PATH);
+    build = import(BUILD_PATH + "?t=" + stat.mtimeMs);
+    // 2. tell dev server that this app server is now ready
+    broadcastDevReady(await build);
+  });
+
+  return async (req, res, next) => {
+    try {
+      //
+      return createRequestHandler({
+        build: await build,
+        mode: "development",
+      })(req, res, next);
+    } catch (error) {
+      next(error);
     }
-  }
+  };
 }