refactor(devtools): use same port for ws and http

.changeset/stupid-rules-pull.md

@@ -0,0 +1,8 @@
+---
+"@refinedev/devtools-server": patch
+"@refinedev/devtools-shared": patch
+---
+
+refactor: use same port for ws and http servers
+
+This PR merges WebSocket and Http server ports into one (5001) to simplify the configuration and avoid port conflicts. Previously the WebSocket server was running on port 5002 and the Http server on port 5001. Now both servers are running on port 5001.

documentation/docs/guides-concepts/development/index.md

@@ -277,7 +277,7 @@ As an alternative, you can also install the `@refinedev/devtools-server` package
 
 **Required Ports**
 
-Devtools server will run on port `5001` and also run a WebSocket server on port `5002`. Make sure these ports are available on your machine. Both of these ports are required for devtools to work properly and maintain a connection between your app and the devtools interface.
+Devtools server will run on port `5001`. Devtools will serve HTTP and WebSocket connections on this port. Make sure the port is available on your machine.
 
 ## Using Inferencer
 

packages/devtools-server/src/constants.ts

@@ -1,7 +1,4 @@
-export const DEFAULT_WS_PORT = 5002;
 export const DEFAULT_SERVER_PORT = 5001;
-
-export const WS_PORT = DEFAULT_WS_PORT;
 export const SERVER_PORT = DEFAULT_SERVER_PORT;
 
 export const REFINE_API_URL = __DEVELOPMENT__

packages/devtools-server/src/index.ts

@@ -1,7 +1,5 @@
 import express from "express";
 
-import { cyanBright, bold } from "chalk";
-
 import { DevtoolsEvent, receive, send } from "@refinedev/devtools-shared";
 
 import { serveClient } from "./serve-client";
@@ -10,7 +8,6 @@ import { reloadOnChange } from "./reload-on-change";
 import { setupServer } from "./setup-server";
 import { Activity, createDb } from "./create-db";
 import { serveApi } from "./serve-api";
-import { SERVER_PORT } from "./constants";
 import { serveProxy } from "./serve-proxy";
 import { serveOpenInEditor } from "./serve-open-in-editor";
 
@@ -20,7 +17,8 @@ type Options = {
 
 export const server = async ({ projectPath = process.cwd() }: Options = {}) => {
  const app = express();
- const ws = serveWs();
+ const server = setupServer(app);
+ const ws = serveWs(server);
 
  const db = createDb();
 
@@ -130,7 +128,6 @@ export const server = async ({ projectPath = process.cwd() }: Options = {}) => {
 
  reloadOnChange(ws);
  serveClient(app);
- setupServer(app);
  serveApi(app, db);
  serveProxy(app);
  serveOpenInEditor(app, projectPath);

packages/devtools-server/src/serve-proxy.ts

@@ -137,7 +137,6 @@ export const serveProxy = async (app: Express) => {
 
  const authProxy = createProxyMiddleware({
  target: REFINE_API_URL,
- // secure: false,
  changeOrigin: true,
  pathRewrite: { "^/api/.auth": "/.auth" },
  cookieDomainRewrite: {

packages/devtools-server/src/serve-ws.ts

@@ -1,34 +1,29 @@
 import WebSocket from "ws";
-import { SERVER_PORT, WS_PORT } from "./constants";
+import { SERVER_PORT } from "./constants";
 import { DevtoolsEvent, send } from "@refinedev/devtools-shared";
 import { bold, cyanBright } from "chalk";
+import http from "http";
 
-export const serveWs = () => {
- const ws = new WebSocket.Server({ port: WS_PORT }).on(
- "error",
- (error: any) => {
- if (error?.code === "EADDRINUSE") {
- console.error(
- `\n${cyanBright.bold("\u2717 ")}${bold(
- "refine devtools",
- )} failed to start. Port ${WS_PORT} is already in use, please make sure no other devtools server is running\n`,
- );
- } else {
- console.error(
- `\n${cyanBright.bold("\u2717 ")}${bold(
- "error from refine devtools",
- )}`,
- error,
- );
- }
- process.exit(1);
- },
- );
+export const serveWs = (
+ server: http.Server<typeof http.IncomingMessage, typeof http.ServerResponse>,
+) => {
+ const ws = new WebSocket.Server({ server }).on("error", (error: any) => {
+ if (error?.code === "EADDRINUSE") {
+ console.error(
+ `\n${cyanBright.bold("\u2717 ")}${bold(
+ "refine devtools",
+ )} failed to start. Port ${SERVER_PORT} is already in use, please make sure no other devtools server is running\n`,
+ );
+ } else {
+ console.error(
+ `\n${cyanBright.bold("\u2717 ")}${bold("error from refine devtools")}`,
+ error,
+ );
+ }
+ process.exit(1);
+ });
 
  ws.on("connection", (client) => {
- if (__DEVELOPMENT__) {
- console.log(`WebSocket server started on PORT ${WS_PORT}`);
- }
  // send client the devtools client url
  send(client as any, DevtoolsEvent.DEVTOOLS_HANDSHAKE, {
  url: `http://localhost:${SERVER_PORT}`,

packages/devtools-server/src/setup-server.ts

@@ -1,14 +1,12 @@
 import type { Express } from "express";
 import { SERVER_PORT } from "./constants";
 import { bold, cyanBright } from "chalk";
+import http from "http";
 
 export const setupServer = (app: Express) => {
- const server = app
- .listen(SERVER_PORT, () => {
- if (__DEVELOPMENT__) {
- console.log(`Server started on PORT ${SERVER_PORT}`);
- }
- })
+ const server = http.createServer(app);
+
+ server
  .on("error", (error: any) => {
  if (error?.code === "EADDRINUSE") {
  console.error(
@@ -41,4 +39,12 @@ export const setupServer = (app: Express) => {
  }
  });
  });
+
+ server.listen(SERVER_PORT, undefined, undefined, () => {
+ if (__DEVELOPMENT__) {
+ console.log(`Server started on PORT ${SERVER_PORT}`);
+ }
+ });
+
+ return server;
 };

packages/devtools-shared/src/context.tsx

@@ -14,7 +14,7 @@ type DevToolsContextValue = {
 
 export const DevToolsContext = React.createContext<DevToolsContextValue>({
  __devtools: false,
- port: 5002,
+ port: 5001,
  url: "localhost",
  secure: false,
  ws: null,
@@ -31,7 +31,7 @@ export const DevToolsContextProvider: React.FC<Props> = ({
 }) => {
  const [values, setValues] = React.useState<DevToolsContextValue>({
  __devtools: __devtools ?? false,
- port: port ?? 5002,
+ port: port ?? 5001,
  url: "localhost",
  secure: false,
  ws: null,