Roo-Code/webview-ui/vite.config.ts
KJ7LNW af9e471c92
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 <roo-code@z.ewheeler.org>
Co-authored-by: Eric Wheeler <roo-code@z.ewheeler.org>
2025-04-07 15:12:41 -04:00

66 lines
1.7 KiB
TypeScript

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(), writePortToFile()],
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
build: {
outDir: "build",
reportCompressedSize: false,
rollupOptions: {
output: {
entryFileNames: `assets/[name].js`,
chunkFileNames: `assets/[name].js`,
assetFileNames: `assets/[name].[ext]`,
},
},
},
server: {
hmr: {
host: "localhost",
protocol: "ws",
},
cors: {
origin: "*",
methods: "*",
allowedHeaders: "*",
},
},
define: {
"process.platform": JSON.stringify(process.platform),
"process.env.VSCODE_TEXTMATE_DEBUG": JSON.stringify(process.env.VSCODE_TEXTMATE_DEBUG),
},
})