From faf4796a1e3b2cf2ce07806f789e69e7c97551c0 Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Tue, 22 Mar 2016 11:20:05 -0700
Subject: [PATCH] Electron working

---
 .gitignore                                    |  1 +
 .../{UrlInput.js => RequestUrlBar.js}         | 15 ++++--
 app/containers/App.js                         |  7 ++-
 app/css/components/response.scss              |  4 ++
 app/css/components/sidebar.scss               |  4 ++
 app/electron.html                             | 17 +++++++
 app/index.html                                | 11 -----
 electron.js                                   | 46 +++++++++++++++++++
 package.json                                  | 13 +++++-
 webpack/base.config.js                        |  5 +-
 webpack/dev.config.js                         | 34 +++++++++-----
 webpack/server.js                             | 33 +++++++------
 12 files changed, 141 insertions(+), 49 deletions(-)
 rename app/components/{UrlInput.js => RequestUrlBar.js} (73%)
 create mode 100644 app/electron.html
 delete mode 100644 app/index.html
 create mode 100644 electron.js

diff --git a/.gitignore b/.gitignore
index 8bea256a6..bf508eb6c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
 node_modules
 .idea
 dist
+npm-debug.log
diff --git a/app/components/UrlInput.js b/app/components/RequestUrlBar.js
similarity index 73%
rename from app/components/UrlInput.js
rename to app/components/RequestUrlBar.js
index 16332dca2..66ba7e14a 100644
--- a/app/components/UrlInput.js
+++ b/app/components/RequestUrlBar.js
@@ -4,13 +4,16 @@ import Dropdown from './base/Dropdown';
 import {METHODS} from '../constants/global';
 
 class UrlInput extends Component {
+  shouldComponentUpdate(nextProps) {
+    return this.props.request.url !== nextProps.request.url;
+  }
   render () {
-    const {onUrlChange, onMethodChange, urlValue, method} = this.props;
+    const {onUrlChange, onMethodChange, request} = this.props;
     return (
       <div className="grid form-control form-control--left form-control--right">
         <Dropdown>
           <button className="btn txt-lg">
-            {method}&nbsp;&nbsp;<i className="fa fa-caret-down"></i>
+            {request.method}&nbsp;&nbsp;<i className="fa fa-caret-down"></i>
           </button>
           <ul className="bg-super-light">
             {METHODS.map((method) => (
@@ -25,7 +28,7 @@ class UrlInput extends Component {
         <Input type="text"
                className="txt-lg"
                placeholder="https://google.com"
-               initialValue={urlValue}
+               initialValue={request.url}
                onChange={onUrlChange}/>
         <button className="btn">
           <i className="fa fa-repeat txt-xl"></i>
@@ -38,8 +41,10 @@ class UrlInput extends Component {
 UrlInput.propTypes = {
   onUrlChange: PropTypes.func.isRequired,
   onMethodChange: PropTypes.func.isRequired,
-  urlValue: PropTypes.string.isRequired,
-  method: PropTypes.string.isRequired
+  request: PropTypes.shape({
+    url: PropTypes.string.isRequired,
+    method: PropTypes.string.isRequired
+  }).isRequired
 };
 
 export default UrlInput;
diff --git a/app/containers/App.js b/app/containers/App.js
index e43bc3ed1..8f0582b23 100644
--- a/app/containers/App.js
+++ b/app/containers/App.js
@@ -5,7 +5,7 @@ import {Tab, Tabs, TabList, TabPanel} from 'react-tabs';
 
 import CodeEditor from '../components/base/Editor'
 import RequestBodyEditor from '../components/RequestBodyEditor'
-import UrlInput from '../components/UrlInput'
+import RequestUrlBar from '../components/RequestUrlBar'
 import Sidebar from '../components/Sidebar'
 
 import * as RequestActions from '../actions/requests'
@@ -29,11 +29,10 @@ class App extends Component {
       <div className="grid grid-collapse">
         <section id="request" className="pane col grid-v">
           <header className="pane__header bg-super-light">
-            <UrlInput
+            <RequestUrlBar
               onUrlChange={updateRequestUrl}
               onMethodChange={updateRequestMethod}
-              method={activeRequest.method}
-              urlValue={activeRequest.url}/>
+              request={activeRequest}/>
           </header>
           <div className="pane__body grid-v">
             <Tabs selectedIndex={0} className="grid-v">
diff --git a/app/css/components/response.scss b/app/css/components/response.scss
index eed29445f..85a61a768 100644
--- a/app/css/components/response.scss
+++ b/app/css/components/response.scss
@@ -7,5 +7,9 @@
       margin-top: -4px;
     }
   }
+
+  .pane__header, .pane__body {
+    border-right: 0;
+  }
 }
 
diff --git a/app/css/components/sidebar.scss b/app/css/components/sidebar.scss
index 1a22c8f81..99a49d4f4 100644
--- a/app/css/components/sidebar.scss
+++ b/app/css/components/sidebar.scss
@@ -8,6 +8,10 @@
     overflow-y: auto;
   }
 
+  .pane__header, .pane__body {
+    border-left: 0;
+  }
+
   a {
     box-sizing: border-box;
     display: block;
diff --git a/app/electron.html b/app/electron.html
new file mode 100644
index 000000000..8f9dbab16
--- /dev/null
+++ b/app/electron.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Insomnia REST Client</title>
+</head>
+<body>
+<div id="root"></div>
+<script>
+  (function () {
+    const script = document.createElement('script');
+    script.src = (process.env.HOT) ? 'http://localhost:3000/dist/bundle.js' : '../dist/bundle.js';
+    document.write(script.outerHTML);
+  }());
+</script>
+</body>
+</html>
diff --git a/app/index.html b/app/index.html
deleted file mode 100644
index 1a3920f20..000000000
--- a/app/index.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-    <title>Insomnia REST Client</title>
-</head>
-<body>
-<div id="root"></div>
-<script src="bundle.js"></script>
-</body>
-</html>
diff --git a/electron.js b/electron.js
new file mode 100644
index 000000000..d675e9999
--- /dev/null
+++ b/electron.js
@@ -0,0 +1,46 @@
+'use strict';
+
+// Don't npm install this (it breaks). Rely on the global one.
+const electron = require('electron');
+
+const app = electron.app;  // Module to control application life.
+const BrowserWindow = electron.BrowserWindow;  // Module to create native browser window.
+
+// Keep a global reference of the window object, if you don't, the window will
+// be closed automatically when the JavaScript object is garbage collected.
+var mainWindow = null;
+
+// Quit when all windows are closed.
+app.on('window-all-closed', function () {
+  // On OS X 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();
+  }
+});
+
+// This method will be called when Electron has finished
+// initialization and is ready to create browser windows.
+app.on('ready', function () {
+  // Create the browser window.
+  mainWindow = new BrowserWindow({
+    width: process.env.NODE_ENV === 'development' ? 1600 : 1200,
+    height: 800
+  });
+
+  // and load the electron.html of the app.
+  mainWindow.loadURL(`file://${__dirname}/app/electron.html`);
+
+  // Open the DevTools.
+  if (process.env.NODE_ENV === 'development') {
+    mainWindow.webContents.openDevTools();
+  }
+
+  // Emitted when the window is closed.
+  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;
+  });
+});
diff --git a/package.json b/package.json
index 4b3235d44..9cd06ce9a 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,10 @@
     "babel-polyfill": "^6.7.2",
     "babel-preset-es2015": "^6.6.0",
     "babel-preset-react": "^6.5.0",
+    "concurrently": "^2.0.0",
     "css-loader": "^0.23.1",
+    "electron-prebuilt": "^0.37.2",
+    "express": "latest",
     "file-loader": "^0.8.5",
     "jest": "^0.1.40",
     "jest-cli": "^0.9.2",
@@ -40,10 +43,16 @@
     "sass-loader": "^3.2.0",
     "style-loader": "^0.13.0",
     "url-loader": "^0.5.7",
-    "webpack-dev-server": "^1.14.1"
+    "webpack-dev-middleware": "latest",
+    "webpack-dev-server": "^1.14.1",
+    "webpack-hot-middleware": "^2.10.0",
+    "webpack-target-electron-renderer": "^0.4.0"
   },
   "scripts": {
-    "start": "node ./webpack/server.js",
+    "start": "electron electron/main.js",
+    "start-hot": "HOT=1 NODE_ENV=development electron electron.js",
+    "hot-server": "node ./webpack/server.js",
+    "dev": "concurrently --kill-others \"npm run hot-server\" \"npm run start-hot\"",
     "test": "jest $@",
     "package": "npm test && webpack --config webpack/prod.config.js"
   },
diff --git a/webpack/base.config.js b/webpack/base.config.js
index 414616147..a51278dce 100644
--- a/webpack/base.config.js
+++ b/webpack/base.config.js
@@ -7,7 +7,7 @@ module.exports = {
   context: path.join(__dirname, '../app'),
   entry: [
     './index.js',
-    './index.html'
+    './electron.html'
   ],
   output: {
     path: path.join(__dirname, '../dist'),
@@ -52,6 +52,7 @@ module.exports = {
     ]
   },
   resolve: {
-    extensions: ['', '.js', '.jsx']
+    extensions: ['', '.js', '.jsx'],
+    packageMains: ['webpack', 'browser', 'web', 'browserify', ['jam', 'main'], 'main']
   }
 };
diff --git a/webpack/dev.config.js b/webpack/dev.config.js
index 6ecf6f384..fd4329bea 100644
--- a/webpack/dev.config.js
+++ b/webpack/dev.config.js
@@ -1,28 +1,38 @@
 var path = require('path');
 var webpack = require('webpack');
-var base = require('./prod.config');
+var base = require('./base.config');
+var webpackTargetElectronRenderer = require('webpack-target-electron-renderer');
 
 base.entry = [
-    'webpack-dev-server/client?http://0.0.0.0:3000',
-    'webpack/hot/only-dev-server'
+  'webpack-hot-middleware/client?path=http://localhost:3000/__webpack_hmr',
+  'webpack/hot/only-dev-server'
 ].concat(base.entry);
 
-
 base.devtool = 'eval'; // Fastest form of source maps
 base.debug = true;
-base.devtool = 'inline-source-maps';
 base.output.path = path.join(base.output.path, '/dev');
-base.output.publicPath = '/';
+base.output.publicPath = 'http://localhost:3000/dist/';
 
 for (var i = 0; i < base.module.loaders.length; i++) {
-    var loader = base.module.loaders[i];
-    if (loader.id === 'babel') {
-        loader.loaders = ['react-hot'].concat(loader.loaders);
-        break;
-    }
+  var loader = base.module.loaders[i];
+  if (loader.id === 'babel') {
+    loader.loaders = ['react-hot'].concat(loader.loaders);
+    break;
+  }
 }
 
-base.plugins = [new webpack.HotModuleReplacementPlugin()];
+base.plugins = [
+  new webpack.HotModuleReplacementPlugin(),
+  new webpack.NoErrorsPlugin(),
+  new webpack.DefinePlugin({
+    __DEV__: true,
+    'process.env': {
+      NODE_ENV: JSON.stringify('development')
+    }
+  })
+];
+
+base.target = webpackTargetElectronRenderer(base);
 
 module.exports = base;
 
diff --git a/webpack/server.js b/webpack/server.js
index 2a6abf81b..7ab563b18 100644
--- a/webpack/server.js
+++ b/webpack/server.js
@@ -1,19 +1,26 @@
-var webpack = require('webpack');
-var WebpackDevServer = require('webpack-dev-server');
-var config = require('./dev.config.js');
+'use strict';
 
-new WebpackDevServer(webpack(config), {
+const express = require('express');
+const webpack = require('webpack');
+const config = require('../webpack/dev.config');
+
+const app = express();
+const compiler = webpack(config);
+
+const PORT = 3000;
+
+app.use(require('webpack-dev-middleware')(compiler, {
   publicPath: config.output.publicPath,
-  debug: true,
-  hot: true,
-  stats: {
-    colors: true
-  },
-  historyApiFallback: true
-}).listen(3000, 'localhost', function (err, result) {
+  stats: {colors: true}
+}));
+
+app.use(require('webpack-hot-middleware')(compiler));
+
+app.listen(PORT, 'localhost', err => {
   if (err) {
-    return console.log(err);
+    console.log(err);
+    return;
   }
 
-  console.log('Listening at http://localhost:3000/');
+  console.log(`Listening at http://localhost:${PORT}`);
 });