[wrangler] make sure that the ready-on message is printed after the local runtime is ready

Author: dario-piotrowicz

.changeset/fluffy-seals-arrive.md

@@ -0,0 +1,7 @@
+---
+"wrangler": patch
+---
+
+make sure that the ready-on message is printed after the local runtime is ready
+
+fix the fact that when starting a local dev session the log saying `Ready on http://localhost:xxxx` could be displayed before the local runtime is actually ready to handle requests (this is quite noticeable when running dev sessions with containers, where the ready message currently gets displayed before the container images building/pulling process)

packages/wrangler/e2e/containers.dev.test.ts

@@ -189,12 +189,29 @@ describe
 			}
 			// from miniflare output:
 			await worker.readUntil(/Container image\(s\) ready/);
+			await worker.stop();
+		});
+
+		it("will display the ready-on message after the container(s) have been built/pulled", async () => {
+			const worker = helper.runLongLived("wrangler dev");
+			await worker.readUntil(/Container image\(s\) ready/);
+
+			await worker.stop();
+
+			const fullOutput = await worker.output;
+			const indexOfContainersReadyMessage = fullOutput.indexOf(
+				"Container image(s) ready"
+			);
+			const indexOfReadyOnMessage = fullOutput.indexOf("Ready on http://");
+			expect(indexOfReadyOnMessage).toBeGreaterThan(
+				indexOfContainersReadyMessage
+			);
 		});
 
 		it(`will be able to interact with the container`, async () => {
 			const worker = helper.runLongLived("wrangler dev");
-			const ready = await worker.waitForReady();
 			await worker.readUntil(/Container image\(s\) ready/);
+			const ready = await worker.waitForReady();
 
 			let response = await fetch(`${ready.url}/status`);
 			expect(response.status).toBe(200);

packages/wrangler/src/api/startDevWorker/DevEnv.ts

@@ -77,6 +77,8 @@ export class DevEnv extends EventEmitter {
 			});
 		});
 
+		this.resolveProxyLocalServerReady().catch(() => {});
+
 		runtimes.forEach((runtime) => {
 			runtime.on("reloadStart", (event) => {
 				proxy.onReloadStart(event);
@@ -93,6 +95,25 @@ export class DevEnv extends EventEmitter {
 		});
 	}
 
+	/**
+	 * Awaits for all the local runtime controllers to be ready, and when they are
+	 * it resolves a promise on the proxy controller to let it know that the
+	 * local server is now ready to handle requests
+	 */
+	private async resolveProxyLocalServerReady(): Promise<void> {
+		await Promise.all(
+			this.runtimes
+				.filter((runtime) => runtime instanceof LocalRuntimeController)
+				.map((runtime) => {
+					return new Promise<void>((resolve) => {
+						runtime.once("reloadComplete", () => resolve());
+					});
+				})
+		);
+
+		this.proxy.localServerReady.resolve();
+	}
+
 	// *********************
 	//   Event Dispatchers
 	// *********************

packages/wrangler/src/api/startDevWorker/ProxyController.ts

@@ -41,7 +41,7 @@ import type {
 } from "./events";
 import type { StartDevWorkerOptions } from "./types";
 import type { DeferredPromise } from "./utils";
-import type { MiniflareOptions } from "miniflare";
+import type { LogOptions, MiniflareOptions } from "miniflare";
 
 type ProxyControllerEventMap = ControllerEventMap & {
 	ready: [ReadyEvent];
@@ -50,6 +50,8 @@ type ProxyControllerEventMap = ControllerEventMap & {
 export class ProxyController extends Controller<ProxyControllerEventMap> {
 	public ready = createDeferred<ReadyEvent>();
 
+	public localServerReady = createDeferred<void>();
+
 	public proxyWorker?: Miniflare;
 	proxyWorkerOptions?: MiniflareOptions;
 	private inspectorProxyWorkerWebSocket?: DeferredPromise<WebSocket>;
@@ -126,11 +128,17 @@ export class ProxyController extends Controller<ProxyControllerEventMap> {
 			verbose: logger.loggerLevel === "debug",
 
 			// log requests into the ProxyWorker (for local + remote mode)
-			log: new ProxyControllerLogger(castLogLevel(logger.loggerLevel), {
-				prefix:
-					// if debugging, log requests with specic ProxyWorker prefix
-					logger.loggerLevel === "debug" ? "wrangler-ProxyWorker" : "wrangler",
-			}),
+			log: new ProxyControllerLogger(
+				castLogLevel(logger.loggerLevel),
+				{
+					prefix:
+						// if debugging, log requests with specic ProxyWorker prefix
+						logger.loggerLevel === "debug"
+							? "wrangler-ProxyWorker"
+							: "wrangler",
+				},
+				this.localServerReady.promise
+			),
 			handleRuntimeStdio,
 			liveReload: false,
 		};
@@ -606,6 +614,18 @@ export class ProxyController extends Controller<ProxyControllerEventMap> {
 }
 
 class ProxyControllerLogger extends WranglerLog {
+	constructor(
+		level: LogLevel,
+		opts: LogOptions,
+		private localServerReady: Promise<void>
+	) {
+		super(level, opts);
+	}
+
+	logReady(message: string): void {
+		this.localServerReady.then(() => super.logReady(message)).catch(() => {});
+	}
+
 	log(message: string) {
 		// filter out request logs being handled by the ProxyWorker
 		// the requests log remaining are handled by the UserWorker