Open as a standalone electron app

packages/redux-devtools-cli/README.md

@@ -62,12 +62,18 @@ So, you can start redux-devtools server together with your dev server.
 
 ### Open Redux DevTools
 
-You can add `--open` argument to open Redux DevTools app. If nothing specified or set as `browser` will use default browser:
+You can add `--open` argument (or set it as `electron`) to open Redux DevTools as a standalone application:
 
 ```
 redux-devtools --open
 ```
 
+Set it as `browser` to open as a web app in the default browser instead:
+
+```
+redux-devtools --open=browser
+```
+
 To specify the browser:
 
 ```
@@ -94,7 +100,7 @@ To use WSS, set `protocol` argument to `https` and provide `key`, `cert` and `pa
 | `--dbOptions`    | database configuration, can be whether an object or a path (string) to json configuration file (by default it uses our `./defaultDbOptions.json` file. Set `migrate` key to `true` to use our migrations file. [More details bellow](#save-reports-and-logs).                                   | -             |
 | `--logLevel`     | the socket server log level - 0=none, 1=error, 2=warn, 3=info                                                                                           | 3             |
 | `--wsEngine`     | the socket server web socket engine - ws or uws (sc-uws)                                                                                                    | ws            |
-| `--open`     | open DevTools app in browser. If nothing specified or set as `browser` will use default browser.   | false            |
+| `--open`     | open Redux DevTools as a standalone application or as web app. See [Open Redux DevTools](#open-redux-devtools) for details.   | false            |
 
 ### Inject to React Native local server
 

packages/redux-devtools-cli/app/electron.js

@@ -0,0 +1,50 @@
+// Based on https://github.com/electron/electron-quick-start
+
+const { app, BrowserWindow } = require('electron')
+const argv = require('minimist')(process.argv.slice(2));
+
+let mainWindow;
+
+function createWindow () {
+  mainWindow = new BrowserWindow({
+    width: 800,
+    height: 600,
+    webPreferences: {
+      nodeIntegration: false,
+      contextIsolation: true,
+      sandbox: true,
+      webSecurity: true
+    }
+  })
+
+  // mainWindow.loadFile('index.html')
+  mainWindow.loadURL('http://localhost:'+ (argv.port? argv.port: 8000) );
+
+  // Open the DevTools.
+  // mainWindow.webContents.openDevTools()
+
+  mainWindow.on('closed', function () {
+    // Dereference the window object, usually you would store windows
+    // in an array if your app supports multi windows, this is the time
+    // when you should delete the corresponding element.
+    mainWindow = null
+  })
+}
+
+app.on('ready', createWindow)
+
+app.on('window-all-closed', function () {
+  // On macOS it is common for applications and their menu bar
+  // to stay active until the user quits explicitly with Cmd + Q
+  if (process.platform !== 'darwin') {
+    app.quit()
+  }
+})
+
+app.on('activate', function () {
+  // On macOS it's common to re-create a window in the app when the
+  // dock icon is clicked and there are no other windows open.
+  if (mainWindow === null) {
+    createWindow()
+  }
+})

packages/redux-devtools-cli/app/package.json

@@ -0,0 +1,8 @@
+{
+  "private": true,
+  "name": "redux-devtools-cli",
+  "version": "0.0.1",
+  "main": "electron.js",
+  "description": "Remote Redux DevTools",
+  "authors": "Mihail Diordiev"
+}

packages/redux-devtools-cli/bin/open.js

@@ -1,8 +1,30 @@
 var opn = require('opn');
+var path = require('path');
+var spawn = require('cross-spawn');
 
 function open(app, options) {
-  console.log('app', app)
-  opn('http://localhost:' + options.port + '/', app !== 'browser' && app !== true ? { app: app } : undefined);
+  if (app === true || app === 'electron') {
+    try {
+      spawn.sync(
+        require('electron'),
+        [path.join(__dirname, '..', 'app')]
+      );  
+    } catch (error) {
+      if (error.message === 'Cannot find module \'electron\'') {
+        // TODO: Move electron to dev-dependences to make our package installation faster when not needed.
+        console.log('   \x1b[1;31m[Warn]\x1b[0m Electron module not installed.\n');
+        /*
+        We will use "npm" to install Electron via "npm install -D".
+        Do you want to install 'electron' (yes/no): yes
+        Installing 'electron' (running 'npm install -D webpack-cli')...
+        */
+      } else {
+        console.log(error);
+      }
+    }
+    return;
+  }
+  opn('http://localhost:' + options.port + '/', app !== 'browser' ? { app: app } : undefined);
 }
 
 module.exports = open;

packages/redux-devtools-cli/package.json

@@ -15,6 +15,7 @@
   ],
   "scripts": {
     "start": "node ./bin/redux-devtools.js",
+    "start:electron": "node ./bin/redux-devtools.js --open",
     "test": "NODE_ENV=test mocha --recursive",
     "test:watch": "NODE_ENV=test mocha --recursive --watch",
     "prepublishOnly": "npm run test"
@@ -36,6 +37,8 @@
     "body-parser": "^1.15.0",
     "chalk": "^1.1.3",
     "cors": "^2.7.1",
+    "cross-spawn": "^6.0.5",
+    "electron": "^4.0.1",
     "express": "^4.13.3",
     "getport": "^0.1.0",
     "graphql": "^0.13.0",