Add SSL support to React devtools standalone

packages/react-devtools-core/README.md

@@ -38,6 +38,25 @@ 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 secure = true;
+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, secure, options);
+```
+
 Reference the `react-devtools` package for a complete integration example.
 
 ## Development

packages/react-devtools-core/src/backend.js

@@ -24,6 +24,7 @@ type ConnectOptions = {
   host?: string,
   nativeStyleEditorValidAttributes?: $ReadOnlyArray<string>,
   port?: number,
+  secure?: boolean,
   resolveRNStyle?: ResolveNativeStyle,
   isAppActive?: () => boolean,
   websocket?: ?WebSocket,
@@ -55,12 +56,14 @@ export function connectToDevTools(options: ?ConnectOptions) {
   const {
     host = 'localhost',
     nativeStyleEditorValidAttributes,
+    secure = false,
     port = 8097,
     websocket,
     resolveRNStyle = null,
     isAppActive = () => true,
   } = options || {};
 
+  const protocol = secure ? '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.

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',
+  secure?: boolean = false,
+  httpsOptions?: ServerOptions,
+) {
+  const httpServer = secure
+    ? 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}', secure: ${
+          secure ? 'true' : 'false'
+        });`,
     );
   });
 

packages/react-devtools/app.html

@@ -146,11 +146,27 @@
     </div>
     <script>
       const {clipboard} = require("electron");
-      const port = process.env.PORT || 8097;
+      const secure = process.env.SECURE && process.env.SECURE === 'true';
+      const host = process.env.HOST || 'localhost';
+      const protocol = secure ? 'https' : 'http';
+      const port = Number(process.env.PORT || 8097);
       const localIp = require("ip").address();
+      const defaultPort = (port === 443 && secure) || (port === 80 && !secure);
+      const server = defaultPort ? `${protocol}://${host}` : `${protocol}://${host}:${port}`;
+      const serverIp = defaultPort ? `${protocol}://${localIp}` : `${protocol}://${localIp}:${port}`;
       const $ = document.querySelector.bind(document);
       const $promptDiv = $("#box-content-prompt");
       const $confirmationDiv = $("#box-content-confirmation");
+      const fs = require('fs');
+      let options = {};
+
+      if (process.env.KEY) {
+        options.key = fs.readFileSync(process.env.KEY);
+      }
+      if (process.env.CERT) {
+        options.cert = fs.readFileSync(process.env.CERT);
+      }
+
       let timeoutID;
 
       function selectAllAndCopy(event) {
@@ -184,12 +200,12 @@
       });
 
       const $localhost = $("#localhost");
-      $localhost.innerText = `<script src="http://localhost:${port}"></` + 'script>';
+      $localhost.innerText = `<script src="${server}"></` + 'script>';
       $localhost.addEventListener('click', selectAllAndCopy);
       $localhost.addEventListener('focus', selectAllAndCopy);
 
       const $byIp = $("#byip");
-      $byIp.innerText = `<script src="http://${localIp}:${port}"></` + 'script>';
+      $byIp.innerText = `<script src="${serverIp}"></` + 'script>';
       $byIp.addEventListener('click', selectAllAndCopy);
       $byIp.addEventListener('focus', selectAllAndCopy);
 
@@ -211,7 +227,7 @@
             element.innerText = status;
           }
         })
-        .startServer(port);
+        .startServer(port, host, secure, options);
     </script>
   </body>
 </html>