feat(dev): dev command defaults to remix-serve (#6177)

Author: pcattori

integration/hmr-test.ts

@@ -35,7 +35,7 @@ let fixture = (options: {
       private: true,
       sideEffects: false,
       scripts: {
-        dev: `cross-env NODE_ENV=development node ./node_modules/@remix-run/dev/dist/cli.js dev -c "node ./server.js"`,
+        dev: `node ./node_modules/@remix-run/dev/dist/cli.js dev -c "node ./server.js"`,
       },
       dependencies: {
         "@remix-run/css-bundle": "0.0.0-local-version",
@@ -245,8 +245,7 @@ test("HMR", async ({ page }) => {
   try {
     await wait(
       () => {
-        let stderr = devStderr();
-        if (stderr.length > 0) throw Error(stderr);
+        if (dev.exitCode) throw Error("Dev server exited early");
         return /✅ app ready: /.test(devStdout());
       },
       { timeoutMs: 10_000 }

packages/remix-dev/cli/commands.ts

@@ -25,6 +25,7 @@ import { TaskError } from "../codemod/utils/task";
 import { transpile as convertFileToJS } from "./useJavascript";
 import { warnOnce } from "../warnOnce";
 import type { Options } from "../compiler/options";
+import { getAppDependencies } from "../dependencies";
 
 export async function create({
   appTemplate,
@@ -175,9 +176,13 @@ export async function build(
     sourcemap,
     onWarning: warnOnce,
   };
-  if (config.future.unstable_dev) {
-    let dev = await resolveDev(config.future.unstable_dev);
-    options.devHttpOrigin = dev.httpOrigin;
+  if (mode === "development" && config.future.unstable_dev) {
+    let dev = await resolveDevBuild(config);
+    options.devHttpOrigin = {
+      scheme: dev.httpScheme,
+      host: dev.httpHost,
+      port: dev.httpPort,
+    };
     options.devWebsocketPort = dev.websocketPort;
   }
 
@@ -237,8 +242,7 @@ export async function dev(
     return await new Promise(() => {});
   }
 
-  let { unstable_dev } = config.future;
-  await devServer_unstable.serve(config, await resolveDev(unstable_dev, flags));
+  await devServer_unstable.serve(config, await resolveDevServe(config, flags));
 }
 
 export async function codemod(
@@ -467,49 +471,95 @@ let parseMode = (
 
 let findPort = async () => getPort({ port: makeRange(3001, 3100) });
 
-let resolveDev = async (
-  dev: Exclude<RemixConfig["future"]["unstable_dev"], false>,
-  flags: {
-    command?: string;
-    httpScheme?: string;
-    httpHost?: string;
-    httpPort?: number;
-    restart?: boolean;
-    websocketPort?: number;
-  } = {}
-): Promise<{
-  command?: string;
-  httpOrigin: {
-    scheme: string;
-    host: string;
-    port: number;
-  };
-  restart: boolean;
+type DevBuildFlags = {
+  httpScheme: string;
+  httpHost: string;
+  httpPort: number;
   websocketPort: number;
-}> => {
-  let command = flags.command ?? (dev === true ? undefined : dev.command);
+};
+let resolveDevBuild = async (
+  config: RemixConfig,
+  flags: Partial<DevBuildFlags> = {}
+): Promise<DevBuildFlags> => {
+  let dev = config.future.unstable_dev;
+  if (dev === false) throw Error("This should never happen");
+
+  // prettier-ignore
   let httpScheme =
-    flags.httpScheme ?? (dev === true ? undefined : dev.httpScheme) ?? "http";
+    flags.httpScheme ??
+    (dev === true ? undefined : dev.httpScheme) ??
+    "http";
+  // prettier-ignore
   let httpHost =
-    flags.httpHost ?? (dev === true ? undefined : dev.httpHost) ?? "localhost";
+    flags.httpHost ??
+    (dev === true ? undefined : dev.httpHost) ??
+    "localhost";
+  // prettier-ignore
   let httpPort =
     flags.httpPort ??
     (dev === true ? undefined : dev.httpPort) ??
     (await findPort());
+  // prettier-ignore
   let websocketPort =
     flags.websocketPort ??
     (dev === true ? undefined : dev.websocketPort) ??
     (await findPort());
+
+  return {
+    httpScheme,
+    httpHost,
+    httpPort,
+    websocketPort,
+  };
+};
+
+type DevServeFlags = DevBuildFlags & {
+  command: string;
+  restart: boolean;
+};
+let resolveDevServe = async (
+  config: RemixConfig,
+  flags: Partial<DevServeFlags> = {}
+): Promise<DevServeFlags> => {
+  let dev = config.future.unstable_dev;
+  if (dev === false) throw Error("Cannot resolve dev options");
+
+  let { httpScheme, httpHost, httpPort, websocketPort } = await resolveDevBuild(
+    config,
+    flags
+  );
+
+  // prettier-ignore
+  let command =
+    flags.command ??
+    (dev === true ? undefined : dev.command)
+  if (!command) {
+    command = `remix-serve ${path.relative(
+      process.cwd(),
+      config.serverBuildPath
+    )}`;
+
+    let usingRemixAppServer =
+      getAppDependencies(config)["@remix-run/serve"] !== undefined;
+    if (!usingRemixAppServer) {
+      console.error(
+        [
+          `Remix dev server command defaulted to '${command}', but @remix-run/serve is not installed.`,
+          "If you are using another server, specify how to run it with `-c` or `--command` flag.",
+          "For example, `remix dev -c 'node ./server.js'`",
+        ].join("\n")
+      );
+      process.exit(1);
+    }
+  }
   let restart =
     flags.restart ?? (dev === true ? undefined : dev.restart) ?? true;
 
   return {
     command,
-    httpOrigin: {
-      scheme: httpScheme,
-      host: httpHost,
-      port: httpPort,
-    },
+    httpScheme,
+    httpHost,
+    httpPort,
     websocketPort,
     restart,
   };

packages/remix-dev/devServer_unstable/index.ts

@@ -49,18 +49,21 @@ let detectBin = async (): Promise<string> => {
 export let serve = async (
   initialConfig: RemixConfig,
   options: {
-    command?: string;
-    httpOrigin: {
-      scheme: string;
-      host: string;
-      port: number;
-    };
+    command: string;
+    httpScheme: string;
+    httpHost: string;
+    httpPort: number;
     websocketPort: number;
     restart: boolean;
   }
 ) => {
   await loadEnv(initialConfig.rootDirectory);
   let websocket = Socket.serve({ port: options.websocketPort });
+  let httpOrigin: Origin = {
+    scheme: options.httpScheme,
+    host: options.httpHost,
+    port: options.httpPort,
+  };
 
   let state: {
     latestBuildHash?: string;
@@ -77,26 +80,26 @@ export let serve = async (
       env: {
         NODE_ENV: "development",
         PATH: `${bin}:${process.env.PATH}`,
-        REMIX_DEV_HTTP_ORIGIN: stringifyOrigin(options.httpOrigin),
+        REMIX_DEV_HTTP_ORIGIN: stringifyOrigin(httpOrigin),
       },
     });
   };
 
   let dispose = await Compiler.watch(
     {
-      config: patchPublicPath(initialConfig, options.httpOrigin),
+      config: patchPublicPath(initialConfig, httpOrigin),
       options: {
         mode: "development",
         sourcemap: true,
         onWarning: warnOnce,
-        devHttpOrigin: options.httpOrigin,
+        devHttpOrigin: httpOrigin,
         devWebsocketPort: options.websocketPort,
       },
     },
     {
       reloadConfig: async (root) => {
         let config = await readConfig(root);
-        return patchPublicPath(config, options.httpOrigin);
+        return patchPublicPath(config, httpOrigin);
       },
       onBuildStart: (ctx) => {
         state.buildHashChannel?.err();
@@ -175,7 +178,7 @@ export let serve = async (
       }
       res.sendStatus(200);
     })
-    .listen(options.httpOrigin.port, () => {
+    .listen(httpOrigin.port, () => {
       console.log("Remix dev server ready");
     });