v3.0.3 - Dev server improvements

Author: AlemTuzlak

src/dev-server/init.ts

@@ -1,7 +1,7 @@
 import { ServerBuild } from "@remix-run/server-runtime";
 import { singleton } from "./singleton.js";
 import { WebSocketServer } from "ws";
-import { successLog } from "./logger.js";
+import { errorLog, successLog } from "./logger.js";
 import { augmentLoader } from "./loader.js";
 import { augmentAction } from "./action.js";
 import { setConfig, type DevToolsServerConfig } from "./config.js";
@@ -19,15 +19,22 @@ export const augmentIfExists = (property: string, object: Record<string, any>, a
 const installDevToolsGlobals = (config?: DevToolsServerConfig) => {
   const ws = singleton("ws", () => {
     if (config?.withWebsocket === false) return;
+
     const port = config?.wsPort || 8080;
     const ws = new WebSocketServer({ port });
+    ws.on("listening", () => {
+      successLog(`🌍  DevTools Websocket Server started on port ${chalk.green(port)}`);
+    });
+    ws.on("error", () => {
+      errorLog(`🌍  DevTools Websocket Server failed to start, port ${port} already in use!`);
+    });
+
     ["SIGINT", "SIGTERM"].forEach((event) => {
       process.on(event, () => {
         ws.close();
       });
     });
 
-    successLog(`🌍  DevTools Websocket Server started on port ${chalk.green(port)}`);
     return ws;
   });
 

src/dev-server/server.ts

@@ -1,4 +1,4 @@
-import fs from "node:fs";
+import fs, { existsSync } from "node:fs";
 import os from "node:os";
 import path from "node:path";
 import url from "node:url";
@@ -12,6 +12,7 @@ import sourceMapSupport from "source-map-support";
 import getPort from "get-port";
 import { withServerDevTools } from "./init.js";
 import chalk from "chalk";
+
 if (process.env.NODE_ENV === "production") {
   throw new Error("You can't use Remix Dev Tools server in production mode!");
 }
@@ -39,7 +40,11 @@ export async function run() {
   }
 
   const buildPath = path.resolve(buildPathArg);
-  const versionPath = path.resolve(buildPathArg, "..", "version.txt");
+  let versionPath: string | undefined = path.resolve(buildPathArg, "..", "version.txt");
+
+  if (!existsSync(versionPath)) {
+    versionPath = undefined;
+  }
   async function reimportServer() {
     // Kill ESM cache
     const stat = fs.statSync(buildPath);
@@ -66,7 +71,10 @@ export async function run() {
       broadcastDevReady(build);
     }
 
-    chokidar.watch(versionPath, { ignoreInitial: true }).on("add", handleServerUpdate).on("change", handleServerUpdate);
+    chokidar
+      .watch(versionPath ?? buildPath, { ignoreInitial: true })
+      .on("add", handleServerUpdate)
+      .on("change", handleServerUpdate);
 
     // wrap request handler to make sure its recreated with the latest build for every request
     return async (req, res, next) => {

src/test-apps/cjs-app/remix.config.js

@@ -7,7 +7,7 @@ module.exports = {
   // assetsBuildDirectory: "public/build",
   // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
-  watchPaths: ["../../dist"],
+  watchPaths: ["../../../dist"],
   serverModuleFormat: "cjs",
   tailwind: true,
   /* routes(defineRoutes) {