@samitouri / QOS-React / commits / 0a7dc1b1c7

[devtools] Introduce REACT_DEVTOOLS_PORT for the standalone react-devtools (#30767)

## Summary This PR attempts to make running the React DevTools a little friendlier in projects that are not completely React. At the moment, running the DevTools with `npx react-devtools` will default to the port to use the `PORT` env variable otherwise it'll fall back to `8097`. `PORT` is a common env variable, so we can get into this strange situation where the a Rails server (eg Puma) is using `PORT`, and then the React DevTools attempts to boot using the same `PORT`. This PR introduces a dedicated env variable, `REACT_DEVTOOLS_PORT` to assist in this scenario. ## How did you test this change? I'm using fish shell, so I did the following, please let me know if there's a better way: ```sh cd packages/react-devtools set -x PORT 1000 set -x REACT_DEVTOOLS_PORT 2000 node bin.js ``` We can see in the UI that it's listening on `2000`. Without this PR, it'd listen on `1000`: ![Screenshot 2024-08-21 at 10 45 42 AM](https://github.com/user-attachments/assets/a5c7590c-1b54-4ac8-9a8b-8eb66ff67cfb)

Brendan Abbott committed Feb 12, 2025 at 04:14 UTC 0a7dc1b1c714e74a1594c712d2317969e6421685
2 files changed +2 -2
packages/react-devtools/README.md
+1 -1
@@ -87,7 +87,7 @@ This will ensure the developer tools are connected. **Don’t forget to remove i
87
88 ## Advanced
89
90 -By default DevTools listen to port `8097` on `localhost`. If you need to customize host, port, or other settings, see the `react-devtools-core` package instead.
90 +By default DevTools listen to port `8097` on `localhost`. The port can be modified by setting the `REACT_DEVTOOLS_PORT` environment variable. If you need to further customize host, port, or other settings, see the `react-devtools-core` package instead.
91
92 ## FAQ
93
packages/react-devtools/preload.js
+1 -1
@@ -35,7 +35,7 @@ contextBridge.exposeInMainWorld('api', {
35 }
36 const host = process.env.HOST || 'localhost';
37 const protocol = useHttps ? 'https' : 'http';
38 - const port = +process.env.PORT || 8097;
38 + const port = +process.env.REACT_DEVTOOLS_PORT || +process.env.PORT || 8097;
39 return {options, useHttps, host, protocol, port};
40 },
41 });