feat: refactor dev.js for improved port handling, enhance error reporting in waitForServerReady, and restructure exercises for worker functionality with new tools and resources

Author: kentcdodds

epicshop/mcp-dev/dev.js

@@ -13,17 +13,17 @@ const { createProxyServer } = httpProxy
 const [, , ...args] = process.argv
 const [transport = 'streamable-http'] = args
 
-const proxyPort = process.env.PORT || 3000
+const proxyPort = Number(process.env.PORT || 3000)
 const inspectorServerPort = await getPort({
-	port: Array.from({ length: 1000 }, (_, i) => i + 10000),
+	port: Array.from({ length: 100 }, (_, i) => proxyPort + i + 50000),
 	exclude: [process.env.PORT].filter(Boolean).map(Number),
 })
 const inspectorClientPort = await getPort({
-	port: Array.from({ length: 1000 }, (_, i) => i + 9000),
+	port: Array.from({ length: 100 }, (_, i) => proxyPort + i + 51000),
 	exclude: [process.env.PORT, inspectorServerPort].filter(Boolean).map(Number),
 })
 const mcpServerPort = await getPort({
-	port: Array.from({ length: 1000 }, (_, i) => i + 11000),
+	port: Array.from({ length: 100 }, (_, i) => proxyPort + i + 52000),
 	exclude: [process.env.PORT, inspectorServerPort, inspectorClientPort]
 		.filter(Boolean)
 		.map(Number),
@@ -112,9 +112,28 @@ async function waitForServerReady({ process: childProcess, textMatch, name }) {
 	if (!childProcess) return
 
 	return new Promise((resolve, reject) => {
+		const outputBuffer = []
+
+		function addToBuffer(channel, data) {
+			outputBuffer.push({ channel, data })
+		}
+
+		function printAndReject(reason) {
+			// Print all buffered output in sequence
+			for (const { channel, data } of outputBuffer) {
+				const str = data.toString()
+				if (channel === 'stdout') {
+					process.stdout.write(styleText('blue', `${name} `) + str)
+				} else if (channel === 'stderr') {
+					process.stderr.write(styleText('red', `${name} `) + str)
+				}
+			}
+			reject(reason)
+		}
+
 		const timeout = setTimeout(() => {
 			process.kill()
-			reject(new Error(`${name} failed to start within 10 seconds`))
+			printAndReject(new Error(`${name} failed to start within 10 seconds`))
 		}, 10_000)
 
 		function searchForMatch(data) {
@@ -124,21 +143,34 @@ async function waitForServerReady({ process: childProcess, textMatch, name }) {
 				// Remove the listeners after finding the match
 				childProcess.stdout.removeListener('data', searchForMatch)
 				childProcess.stderr.removeListener('data', searchForMatch)
+				childProcess.stdout.removeListener('data', bufferStdout)
+				childProcess.stderr.removeListener('data', bufferStderr)
 				resolve()
 			}
 		}
-		childProcess.stdout.on('data', searchForMatch)
-		childProcess.stderr.on('data', searchForMatch)
+
+		function bufferStdout(data) {
+			addToBuffer('stdout', data)
+			searchForMatch(data)
+		}
+
+		function bufferStderr(data) {
+			addToBuffer('stderr', data)
+			searchForMatch(data)
+		}
+
+		childProcess.stdout.on('data', bufferStdout)
+		childProcess.stderr.on('data', bufferStderr)
 
 		childProcess.on('error', (err) => {
 			clearTimeout(timeout)
-			reject(err)
+			printAndReject(err)
 		})
 
 		childProcess.on('exit', (code) => {
 			if (code !== 0) {
 				clearTimeout(timeout)
-				reject(new Error(`${name} exited with code ${code}`))
+				printAndReject(new Error(`${name} exited with code ${code}`))
 			}
 		})
 	})

exercises/01.start/01.problem/README.mdx

@@ -1 +1 @@
-# Final
+# Start

exercises/01.start/01.problem/tsconfig.json

@@ -2,7 +2,7 @@
 	"extends": ["@epic-web/config/typescript"],
 	"include": [
 		"types/**/*.d.ts",
-		"src/**/*.ts",
+		"worker/**/*.ts",
 		"test/**/*.ts",
 		"vitest.config.ts"
 	]

exercises/01.start/01.problem/src/client.ts renamed to exercises/01.start/01.problem/worker/client.ts

@@ -2,6 +2,4 @@ import { DBClient } from '@epic-web/epicme-db-client'
 
 const EPIC_ME_SERVER_URL = 'http://localhost:7787'
 
-export function getClient() {
-	return new DBClient(EPIC_ME_SERVER_URL)
-}
+export const db = new DBClient(EPIC_ME_SERVER_URL)

exercises/01.start/01.problem/src/index.ts renamed to exercises/01.start/01.problem/worker/index.ts

@@ -5,7 +5,7 @@ import {
 	type LoggingLevel,
 } from '@modelcontextprotocol/sdk/types.js'
 import { McpAgent } from 'agents/mcp'
-import { getClient } from './client.ts'
+import { db } from './client.ts'
 import { initializePrompts } from './prompts.ts'
 import { initializeResources } from './resources.ts'
 import { initializeTools } from './tools.ts'
@@ -39,7 +39,7 @@ You can also help users add tags to their entries and get all tags for an entry.
 	)
 
 	async init() {
-		this.db = getClient()
+		this.db = db
 		this.server.server.setRequestHandler(
 			SetLevelRequestSchema,
 			async (request) => {

exercises/01.start/01.problem/src/prompts.ts renamed to exercises/01.start/01.problem/worker/prompts.ts

@@ -5,7 +5,7 @@
 {
 	"$schema": "../../../node_modules/wrangler/config-schema.json",
 	"name": "epic-me-mcp",
-	"main": "src/index.ts",
+	"main": "worker/index.ts",
 	"compatibility_date": "2025-04-17",
 	"compatibility_flags": ["nodejs_compat"],
 	"migrations": [