diff --git a/packages/react-devtools-core/README.md b/packages/react-devtools-core/README.md index f26c24bd8058f..9b0963de9310e 100644 --- a/packages/react-devtools-core/README.md +++ b/packages/react-devtools-core/README.md @@ -21,6 +21,7 @@ Be sure to run this function *before* importing e.g. `react`, `react-dom`, `reac The `config` object may contain: * `host: string` (defaults to "localhost") - Websocket will connect to this host. * `port: number` (defaults to `8097`) - Websocket will connect to this port. +* `useHttps: boolean` (defaults to `false`) - Websocked should use a secure protocol (wss). * `websocket: Websocket` - Custom websocket to use. Overrides `host` and `port` settings if provided. * `resolveRNStyle: (style: number) => ?Object` - Used by the React Native style plug-in. * `isAppActive: () => boolean` - If provided, DevTools will poll this method and wait until it returns true before connecting to React. @@ -38,6 +39,24 @@ require("react-devtools-core/standalone") .startServer(port); ``` +Renders DevTools interface into a DOM node over SSL using a custom host name (Default is localhost). + +```js +const host = 'dev.server.com'; +const options = { + key: fs.readFileSync('test/fixtures/keys/agent2-key.pem'), + cert: fs.readFileSync('test/fixtures/keys/agent2-cert.pem') +}; + + +require("react-devtools-core/standalone") + .setContentDOMNode(document.getElementById("container")) + .setStatusListener(status => { + // This callback is optional... + }) + .startServer(port, host, options); +``` + Reference the `react-devtools` package for a complete integration example. ## Development diff --git a/packages/react-devtools-core/src/backend.js b/packages/react-devtools-core/src/backend.js index ec9253b5f94ae..6581101b5b977 100644 --- a/packages/react-devtools-core/src/backend.js +++ b/packages/react-devtools-core/src/backend.js @@ -24,6 +24,7 @@ type ConnectOptions = { host?: string, nativeStyleEditorValidAttributes?: $ReadOnlyArray, port?: number, + useHttps?: boolean, resolveRNStyle?: ResolveNativeStyle, isAppActive?: () => boolean, websocket?: ?WebSocket, @@ -55,12 +56,14 @@ export function connectToDevTools(options: ?ConnectOptions) { const { host = 'localhost', nativeStyleEditorValidAttributes, + useHttps = false, port = 8097, websocket, resolveRNStyle = null, isAppActive = () => true, } = options || {}; + const protocol = useHttps ? 'wss' : 'ws'; let retryTimeoutID: TimeoutID | null = null; function scheduleRetry() { @@ -80,7 +83,7 @@ export function connectToDevTools(options: ?ConnectOptions) { let bridge: BackendBridge | null = null; const messageListeners = []; - const uri = 'ws://' + host + ':' + port; + const uri = protocol + '://' + host + ':' + port; // If existing websocket is passed, use it. // This is necessary to support our custom integrations. diff --git a/packages/react-devtools-core/src/standalone.js b/packages/react-devtools-core/src/standalone.js index 5a6d8320e29e4..817b34386c205 100644 --- a/packages/react-devtools-core/src/standalone.js +++ b/packages/react-devtools-core/src/standalone.js @@ -242,8 +242,20 @@ function connectToSocket(socket: WebSocket) { }; } -function startServer(port?: number = 8097) { - const httpServer = require('http').createServer(); +type ServerOptions = { + key?: string, + cert?: string, +}; + +function startServer( + port?: number = 8097, + host?: string = 'localhost', + httpsOptions?: ServerOptions, +) { + const useHttps = !!httpsOptions; + const httpServer = useHttps + ? require('https').createServer(httpsOptions) + : require('http').createServer(); const server = new Server({server: httpServer}); let connected: WebSocket | null = null; server.on('connection', (socket: WebSocket) => { @@ -298,7 +310,9 @@ function startServer(port?: number = 8097) { '\n;' + backendFile.toString() + '\n;' + - 'ReactDevToolsBackend.connectToDevTools();', + `ReactDevToolsBackend.connectToDevTools({port: ${port}, host: '${host}', useHttps: ${ + useHttps ? 'true' : 'false' + }});`, ); }); diff --git a/packages/react-devtools/app.html b/packages/react-devtools/app.html index 75fc137a3af0a..c822764bea5f0 100644 --- a/packages/react-devtools/app.html +++ b/packages/react-devtools/app.html @@ -145,12 +145,33 @@