Use webpack-dev-server

package.json

@@ -23,7 +23,8 @@
     "build:main": "cross-env NODE_ENV=production webpack --bail --config webpack.config.main.js",
     "build:renderer": "cross-env NODE_ENV=production webpack --bail --config webpack.config.renderer.js",
     "start": "electron src",
-    "watch": "gulp watch",
+    "watch": "run-s watch:*",
+    "watch:renderer": "webpack-dev-server --config webpack.config.renderer.js",
     "serve": "gulp watch",
     "test": "npm-run-all build test:* lint:*",
     "test:app": "mocha --reporter mocha-circleci-reporter --recursive test/specs",
@@ -59,6 +60,7 @@
     "npm-run-all": "^4.0.2",
     "spectron": "~3.6.0",
     "webpack": "^2.2.1",
+    "webpack-dev-server": "^2.4.1",
     "webpack-merge": "^3.0.0"
   }
 }

src/browser/index.jsx

@@ -103,3 +103,8 @@ ReactDOM.render(
   />,
   document.getElementById('content')
 );
+
+// Deny drag&drop navigation in mainWindow.
+// Drag&drop is allowed in webview of index.html.
+document.addEventListener('dragover', (event) => event.preventDefault());
+document.addEventListener('drop', (event) => event.preventDefault());

src/browser/settings.jsx

@@ -20,3 +20,7 @@ ReactDOM.render(
   <SettingsPage configFile={configFile}/>,
   document.getElementById('content')
 );
+
+// Deny drag&drop navigation in mainWindow.
+document.addEventListener('dragover', (event) => event.preventDefault());
+document.addEventListener('drop', (event) => event.preventDefault());

src/main.js

@@ -11,6 +11,7 @@ const {
   systemPreferences,
   session
 } = require('electron');
+const isDev = require('electron-is-dev');
 
 const AutoLaunch = require('auto-launch');
 
@@ -489,7 +490,11 @@ app.on('ready', () => {
   }
 
   // and load the index.html of the app.
-  mainWindow.loadURL('file://' + __dirname + '/browser/index.html');
+  if (isDev) {
+    mainWindow.loadURL('http://localhost:8080/browser/index.html');
+  } else {
+    mainWindow.loadURL('file://' + __dirname + '/browser/index.html');
+  }
 
   // Set application menu
   ipcMain.on('update-menu', (event, configData) => {
@@ -571,18 +576,4 @@ app.on('ready', () => {
     // when you should delete the corresponding element.
     mainWindow = null;
   });
-
-  // Deny drag&drop navigation in mainWindow.
-  // Drag&drop is allowed in webview of index.html.
-  mainWindow.webContents.on('will-navigate', (event, url) => {
-    var dirname = __dirname;
-    if (process.platform === 'win32') {
-      dirname = '/' + dirname.replace(/\\/g, '/');
-    }
-
-    var index = url.indexOf('file://' + dirname);
-    if (index !== 0) {
-      event.preventDefault();
-    }
-  });
 });

src/package.json

@@ -18,6 +18,7 @@
     "auto-launch": "^5.0.1",
     "bootstrap": "^3.3.7",
     "electron-context-menu": "^0.8.0",
+    "electron-is-dev": "^0.1.2",
     "electron-squirrel-startup": "^1.0.0",
     "os-locale": "^2.0.0",
     "react": "^15.4.2",

webpack.config.renderer.js

@@ -1,5 +1,6 @@
 'use strict';
 
+const path = require('path');
 const merge = require('webpack-merge');
 const base = require('./webpack.config.base');
 
@@ -10,7 +11,8 @@ module.exports = merge(base, {
     'webview/mattermost': './src/browser/webview/mattermost.js'
   },
   output: {
-    path: './src/browser',
+    path: path.join(__dirname, 'src/browser'),
+    publicPath: 'browser',
     filename: '[name]_bundle.js'
   },
   module: {
@@ -29,5 +31,10 @@ module.exports = merge(base, {
     __filename: false,
     __dirname: false
   },
-  target: 'electron-renderer'
+  target: 'electron-renderer',
+  devServer: {
+    contentBase: path.join(__dirname, 'src'),
+    inline: true,
+    publicPath: '/browser/'
+  }
 });