OSSForks/react
1
0
Fork 0
mirror of https://github.com/zebrajr/react.git synced 2025-12-06 00:20:04 +01:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

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

Browse Source 
## 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)
This commit is contained in:
Brendan Abbott 2025-02-12 04:14:43 +10:00 committed by GitHub
parent cd90a4d8c0
commit 0a7dc1b1c7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 2 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/react-devtools/README.md
View File

@ -87,7 +87,7 @@ This will ensure the developer tools are connected. **Don’t forget to remove i
## Advanced
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.
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.
## FAQ

2
packages/react-devtools/preload.js vendored
View File

@ -35,7 +35,7 @@ contextBridge.exposeInMainWorld('api', {
}
const host = process.env.HOST || 'localhost';
const protocol = useHttps ? 'https' : 'http';
const port = +process.env.PORT || 8097;
const port = +process.env.REACT_DEVTOOLS_PORT || +process.env.PORT || 8097;
return {options, useHttps, host, protocol, port};
},
});