dev: dynamic Vite port detection for webview development (#2339)

Implements a solution for the Vite port collision issue that allows easier development of Roo across multiple instances of VSCode in different Roo repository directories.

This may also fix crashes and strange behavior between multiple running instances that would otherwise create port conflicts. This is solved using the following automated process:
- When Vite automatically selects an alternative port, a custom plugin automatically writes the port to a '.vite-port' file in the repository root
- ClineProvider automatically reads the port from this file, falling back gracefully to port 5173 if the file doesn't exist
- No user intervention is necessary as the entire process is handled automatically
- Added detailed logging for debugging
- Added .vite-port to .gitignore

The extension now connects to the correct Vite development server port automatically, even when the default port (5173) is already in use.

Signed-off-by: Eric Wheeler <[email protected]>
Co-authored-by: Eric Wheeler <[email protected]>

.gitignore

@@ -32,3 +32,6 @@ docs/_site/
 
 #Logging
 logs
+
+# Vite development
+.vite-port

src/core/webview/ClineProvider.ts

@@ -579,7 +579,26 @@ export class ClineProvider extends EventEmitter<ClineProviderEvents> implements
 	}
 
 	private async getHMRHtmlContent(webview: vscode.Webview): Promise<string> {
-		const localPort = "5173"
+		// Try to read the port from the file
+		let localPort = "5173" // Default fallback
+		try {
+			const fs = require("fs")
+			const path = require("path")
+			const portFilePath = path.resolve(__dirname, "../.vite-port")
+
+			if (fs.existsSync(portFilePath)) {
+				localPort = fs.readFileSync(portFilePath, "utf8").trim()
+				console.log(`[ClineProvider:Vite] Using Vite server port from ${portFilePath}: ${localPort}`)
+			} else {
+				console.log(
+					`[ClineProvider:Vite] Port file not found at ${portFilePath}, using default port: ${localPort}`,
+				)
+			}
+		} catch (err) {
+			console.error("[ClineProvider:Vite] Failed to read Vite port file:", err)
+			// Continue with default port if file reading fails
+		}
+
 		const localServerUrl = `localhost:${localPort}`
 
 		// Check if local dev server is running.

webview-ui/vite.config.ts

@@ -1,12 +1,37 @@
 import path from "path"
+import fs from "fs"
 
 import { defineConfig } from "vite"
 import react from "@vitejs/plugin-react"
 import tailwindcss from "@tailwindcss/vite"
 
+// Custom plugin to write the server port to a file
+const writePortToFile = () => {
+	return {
+		name: "write-port-to-file",
+		configureServer(server) {
+			// Write the port to a file when the server starts
+			server.httpServer?.once("listening", () => {
+				const address = server.httpServer.address()
+				const port = typeof address === "object" && address ? address.port : null
+
+				if (port) {
+					// Write to a file in the project root
+					const portFilePath = path.resolve(__dirname, "../.vite-port")
+					fs.writeFileSync(portFilePath, port.toString())
+					console.log(`[Vite Plugin] Server started on port ${port}`)
+					console.log(`[Vite Plugin] Port information written to ${portFilePath}`)
+				} else {
+					console.warn("[Vite Plugin] Could not determine server port")
+				}
+			})
+		},
+	}
+}
+
 // https://vitejs.dev/config/
 export default defineConfig({
-	plugins: [react(), tailwindcss()],
+	plugins: [react(), tailwindcss(), writePortToFile()],
 	resolve: {
 		alias: {
 			"@": path.resolve(__dirname, "./src"),