feat(dev): unstable dev server improvements (#6133)

Author: pcattori

integration/hmr-test.ts

@@ -7,15 +7,21 @@ import getPort, { makeRange } from "get-port";
 
 import { createFixtureProject, css, js, json } from "./helpers/create-fixture";
 
-let fixture = (options: { port: number; appServerPort: number }) => ({
+test.setTimeout(120_000);
+
+let fixture = (options: {
+  appServerPort: number;
+  httpPort: number;
+  webSocketPort: number;
+}) => ({
   files: {
     "remix.config.js": js`
       module.exports = {
         tailwind: true,
         future: {
           unstable_dev: {
-            port: ${options.port},
-            appServerPort: ${options.appServerPort},
+            httpPort: ${options.httpPort},
+            webSocketPort: ${options.webSocketPort},
           },
           v2_routeConvention: true,
           v2_errorBoundary: true,
@@ -28,8 +34,7 @@ let fixture = (options: { port: number; appServerPort: number }) => ({
       private: true,
       sideEffects: false,
       scripts: {
-        "dev:remix": `cross-env NODE_ENV=development node ./node_modules/@remix-run/dev/dist/cli.js dev`,
-        "dev:app": `cross-env NODE_ENV=development nodemon --watch build/ ./server.js`,
+        dev: `cross-env NODE_ENV=development node ./node_modules/@remix-run/dev/dist/cli.js dev -c "node ./server.js"`,
       },
       dependencies: {
         "@remix-run/css-bundle": "0.0.0-local-version",
@@ -38,7 +43,6 @@ let fixture = (options: { port: number; appServerPort: number }) => ({
         "cross-env": "0.0.0-local-version",
         express: "0.0.0-local-version",
         isbot: "0.0.0-local-version",
-        nodemon: "0.0.0-local-version",
         react: "0.0.0-local-version",
         "react-dom": "0.0.0-local-version",
         tailwindcss: "0.0.0-local-version",
@@ -58,6 +62,7 @@ let fixture = (options: { port: number; appServerPort: number }) => ({
       let path = require("path");
       let express = require("express");
       let { createRequestHandler } = require("@remix-run/express");
+      let { ping } = require("@remix-run/dev");
 
       const app = express();
       app.use(express.static("public", { immutable: true, maxAge: "1y" }));
@@ -75,8 +80,11 @@ let fixture = (options: { port: number; appServerPort: number }) => ({
 
       let port = ${options.appServerPort};
       app.listen(port, () => {
-        require(BUILD_DIR);
+        let build = require(BUILD_DIR);
         console.log('✅ app ready: http://localhost:' + port);
+        if (process.env.NODE_ENV === 'development') {
+          ping(build);
+        }
       });
     `,
 
@@ -204,43 +212,34 @@ let bufferize = (stream: Readable): (() => string) => {
   return () => buffer;
 };
 
+let HMR_TIMEOUT_MS = 10_000;
+
 test("HMR", async ({ page }) => {
   // uncomment for debugging
   // page.on("console", (msg) => console.log(msg.text()));
   page.on("pageerror", (err) => console.log(err.message));
 
-  let appServerPort = await getPort({ port: makeRange(3080, 3089) });
-  let port = await getPort({ port: makeRange(3090, 3099) });
-  let projectDir = await createFixtureProject(fixture({ port, appServerPort }));
+  let portRange = makeRange(3080, 3099);
+  let appServerPort = await getPort({ port: portRange });
+  let httpPort = await getPort({ port: portRange });
+  let webSocketPort = await getPort({ port: portRange });
+  let projectDir = await createFixtureProject(
+    fixture({ appServerPort, httpPort, webSocketPort })
+  );
 
   // spin up dev server
-  let dev = execa("npm", ["run", "dev:remix"], { cwd: projectDir });
+  let dev = execa("npm", ["run", "dev"], { cwd: projectDir });
   let devStdout = bufferize(dev.stdout!);
   let devStderr = bufferize(dev.stderr!);
   await wait(
     () => {
       let stderr = devStderr();
       if (stderr.length > 0) throw Error(stderr);
-      return /💿 Built in /.test(devStdout());
+      return /✅ app ready: /.test(devStdout());
     },
     { timeoutMs: 10_000 }
   );
 
-  // spin up app server
-  let app = execa("npm", ["run", "dev:app"], { cwd: projectDir });
-  let appStdout = bufferize(app.stdout!);
-  let appStderr = bufferize(app.stderr!);
-  await wait(
-    () => {
-      let stderr = appStderr();
-      if (stderr.length > 0) throw Error(stderr);
-      return /✅ app ready: /.test(appStdout());
-    },
-    {
-      timeoutMs: 10_000,
-    }
-  );
-
   try {
     await page.goto(`http://localhost:${appServerPort}`, {
       waitUntil: "networkidle",
@@ -290,7 +289,7 @@ test("HMR", async ({ page }) => {
     // detect HMR'd content and style changes
     await page.waitForLoadState("networkidle");
     let h1 = page.getByText("Changed");
-    await h1.waitFor({ timeout: 2000 });
+    await h1.waitFor({ timeout: HMR_TIMEOUT_MS });
     expect(h1).toHaveCSS("color", "rgb(255, 255, 255)");
     expect(h1).toHaveCSS("background-color", "rgb(0, 0, 0)");
 
@@ -301,7 +300,7 @@ test("HMR", async ({ page }) => {
     // undo change
     fs.writeFileSync(indexPath, originalIndex);
     fs.writeFileSync(cssModulePath, originalCssModule);
-    await page.getByText("Index Title").waitFor({ timeout: 2000 });
+    await page.getByText("Index Title").waitFor({ timeout: HMR_TIMEOUT_MS });
     expect(await page.getByLabel("Root Input").inputValue()).toBe("asdfasdf");
     await page.waitForSelector(`#root-counter:has-text("inc 1")`);
 
@@ -322,7 +321,7 @@ test("HMR", async ({ page }) => {
       }
     `;
     fs.writeFileSync(indexPath, withLoader1);
-    await page.getByText("Hello, world").waitFor({ timeout: 2000 });
+    await page.getByText("Hello, world").waitFor({ timeout: HMR_TIMEOUT_MS });
     expect(await page.getByLabel("Root Input").inputValue()).toBe("asdfasdf");
     await page.waitForSelector(`#root-counter:has-text("inc 1")`);
 
@@ -344,7 +343,7 @@ test("HMR", async ({ page }) => {
       }
     `;
     fs.writeFileSync(indexPath, withLoader2);
-    await page.getByText("Hello, planet").waitFor({ timeout: 2000 });
+    await page.getByText("Hello, planet").waitFor({ timeout: HMR_TIMEOUT_MS });
     expect(await page.getByLabel("Root Input").inputValue()).toBe("asdfasdf");
     await page.waitForSelector(`#root-counter:has-text("inc 1")`);
 
@@ -388,10 +387,16 @@ test("HMR", async ({ page }) => {
     aboutCounter = await page.waitForSelector(
       `#about-counter:has-text("inc 0")`
     );
+  } catch (e) {
+    console.log("stdout begin -----------------------");
+    console.log(devStdout());
+    console.log("stdout end -------------------------");
+
+    console.log("stderr begin -----------------------");
+    console.log(devStderr());
+    console.log("stderr end -------------------------");
+    throw e;
   } finally {
     dev.kill();
-    app.kill();
-    console.log(devStderr());
-    console.log(appStderr());
   }
 });

packages/remix-dev/channel.ts

@@ -1,8 +1,8 @@
+import type { Result } from "./result";
+
 type Resolve<V> = (value: V | PromiseLike<V>) => void;
 type Reject = (reason?: any) => void;
 
-type Result<V, E = unknown> = { ok: true; value: V } | { ok: false; error: E };
-
 export type Type<V, E = unknown> = {
   ok: (value: V) => void;
   err: (reason?: any) => void;

packages/remix-dev/cli/commands.ts

@@ -1,6 +1,8 @@
 import * as path from "path";
 import { execSync } from "child_process";
+import inspector from "inspector";
 import * as fse from "fs-extra";
+import getPort, { makeRange } from "get-port";
 import ora from "ora";
 import prettyMs from "pretty-ms";
 import * as esbuild from "esbuild";
@@ -206,17 +208,52 @@ export async function watch(
 
 export async function dev(
   remixRoot: string,
-  flags: { port?: number; appServerPort?: number } = {}
+  flags: {
+    debug?: boolean;
+    port?: number; // TODO: remove for v2
+    command?: string;
+    httpPort?: number;
+    restart?: boolean;
+    websocketPort?: number;
+  } = {}
 ) {
+  if (process.env.NODE_ENV && process.env.NODE_ENV !== "development") {
+    console.warn(
+      `Expected NODE_ENV to be 'development' but got ${process.env.NODE_ENV}`
+    );
+  }
+  if (flags.debug) inspector.open();
+
   let config = await readConfig(remixRoot);
 
-  if (config.future.unstable_dev !== false) {
-    await devServer_unstable.serve(config, flags);
+  if (config.future.unstable_dev === false) {
+    await devServer.serve(config, flags.port);
     return await new Promise(() => {});
   }
 
-  await devServer.serve(config, flags.port);
-  return await new Promise(() => {});
+  let { unstable_dev } = config.future;
+
+  let command =
+    flags.command ?? (unstable_dev === true ? undefined : unstable_dev.command);
+  let httpPort =
+    flags.httpPort ??
+    (unstable_dev === true ? undefined : unstable_dev.httpPort) ??
+    (await findPort());
+  let websocketPort =
+    flags.websocketPort ??
+    (unstable_dev === true ? undefined : unstable_dev.websocketPort) ??
+    (await findPort());
+  let restart =
+    flags.restart ??
+    (unstable_dev === true ? undefined : unstable_dev.restart) ??
+    true;
+
+  await devServer_unstable.serve(config, {
+    command,
+    httpPort,
+    websocketPort,
+    restart,
+  });
 }
 
 export async function codemod(
@@ -442,3 +479,5 @@ let parseMode = (
   console.error(`Unrecognized mode: ${mode}`);
   process.exit(1);
 };
+
+let findPort = async () => getPort({ port: makeRange(3001, 3100) });

packages/remix-dev/cli/run.ts

@@ -1,7 +1,6 @@
 import * as path from "path";
 import os from "os";
 import arg from "arg";
-import inspector from "inspector";
 import inquirer from "inquirer";
 import semver from "semver";
 import fse from "fs-extra";
@@ -137,20 +136,6 @@ const npxInterop = {
   pnpm: "pnpm exec",
 };
 
-async function dev(
-  projectDir: string,
-  flags: { debug?: boolean; port?: number; appServerPort?: number }
-) {
-  if (process.env.NODE_ENV && process.env.NODE_ENV !== "development") {
-    console.warn(
-      `NODE_ENV=${process.env.NODE_ENV} overwritten to 'development'`
-    );
-  }
-
-  if (flags.debug) inspector.open();
-  await commands.dev(projectDir, flags);
-}
-
 /**
  * Programmatic interface for running the Remix CLI with the given command line
  * arguments.
@@ -166,12 +151,14 @@ export async function run(argv: string[] = process.argv.slice(2)) {
 
   let args = arg(
     {
-      "--app-server-port": Number,
+      "--command": String,
+      "-c": "--command",
       "--debug": Boolean,
       "--no-delete": Boolean,
       "--dry": Boolean,
       "--force": Boolean,
       "--help": Boolean,
+      "--http-port": Number,
       "-h": "--help",
       "--install": Boolean,
       "--no-install": Boolean,
@@ -181,13 +168,16 @@ export async function run(argv: string[] = process.argv.slice(2)) {
       "--port": Number,
       "-p": "--port",
       "--remix-version": String,
+      "--restart": Boolean,
+      "--no-restart": Boolean,
       "--sourcemap": Boolean,
       "--template": String,
       "--token": String,
       "--typescript": Boolean,
       "--no-typescript": Boolean,
       "--version": Boolean,
       "-v": "--version",
+      "--websocket-port": Number,
     },
     {
       argv,
@@ -212,6 +202,15 @@ export async function run(argv: string[] = process.argv.slice(2)) {
     return;
   }
 
+  if (flags["http-port"]) {
+    flags.httpPort = flags["http-port"];
+    delete flags["http-port"];
+  }
+  if (flags["websocket-port"]) {
+    flags.websocketPort = flags["websocket-port"];
+    delete flags["websocket-port"];
+  }
+
   if (args["--no-delete"]) {
     flags.delete = false;
   }
@@ -222,6 +221,10 @@ export async function run(argv: string[] = process.argv.slice(2)) {
     flags.interactive = false;
   }
   flags.interactive = flags.interactive ?? require.main === module;
+  if (args["--no-restart"]) {
+    flags.restart = false;
+    delete flags["no-restart"];
+  }
   if (args["--no-typescript"]) {
     flags.typescript = false;
   }
@@ -498,10 +501,10 @@ export async function run(argv: string[] = process.argv.slice(2)) {
       break;
     }
     case "dev":
-      await dev(input[1], flags);
+      await commands.dev(input[1], flags);
       break;
     default:
       // `remix ./my-project` is shorthand for `remix dev ./my-project`
-      await dev(input[0], flags);
+      await commands.dev(input[0], flags);
   }
 }