Merge pull request #2216 from ZeroX-DG/improve-dev-script

Improved dev script

Author: Rokt33r

dev-scripts/dev.js

@@ -0,0 +1,76 @@
+const webpack = require('webpack')
+const WebpackDevServer = require('webpack-dev-server')
+const config = require('../webpack.config')
+const signale = require('signale')
+const { spawn } = require('child_process')
+const electron = require('electron')
+const port = 8080
+let server = null
+let firstRun = true
+
+const options = {
+  publicPath: config.output.publicPath,
+  hot: true,
+  inline: true,
+  quiet: true
+}
+
+function startServer () {
+  config.plugins.push(new webpack.HotModuleReplacementPlugin())
+  config.entry.main.unshift(
+    `webpack-dev-server/client?http://localhost:${port}/`,
+    'webpack/hot/dev-server'
+  )
+  const compiler = webpack(config)
+  server = new WebpackDevServer(compiler, options)
+
+  return new Promise((resolve, reject) => {
+    server.listen(port, 'localhost', function (err) {
+      if (err) {
+        reject(err)
+      }
+      signale.success(`Webpack Dev Server listening at localhost:${port}`)
+      signale.watch(`Waiting for webpack to bundle...`)
+      compiler.plugin('done', stats => {
+        if (!stats.hasErrors()) {
+          signale.success(`Bundle success !`)
+          resolve()
+        } else {
+          if (!firstRun) {
+            console.log(stats.compilation.errors[0])
+          } else {
+            firstRun = false
+            reject(stats.compilation.errors[0])
+          }
+        }
+      })
+    })
+  })
+}
+
+function startElectron () {
+  spawn(electron, ['--hot', './index.js'])
+    .on('close', () => {
+      server.close()
+    })
+    .on('error', err => {
+      signale.error(err)
+      server.close()
+    })
+    .on('disconnect', () => {
+      server.close()
+    })
+    .on('exit', () => {
+      server.close()
+    })
+}
+
+startServer()
+  .then(() => {
+    startElectron()
+    signale.success('Electron started')
+  })
+  .catch(err => {
+    signale.error(err)
+    process.exit(1)
+  })

package.json

@@ -7,14 +7,12 @@
   "license": "GPL-3.0",
   "scripts": {
     "start": "electron ./index.js",
-    "hot": "electron ./index.js --hot",
-    "webpack": "webpack-dev-server --hot --inline --config webpack.config.js",
     "compile": "grunt compile",
     "test": "PWD=$(pwd) NODE_ENV=test ava --serial",
     "jest": "jest",
     "fix": "eslint . --fix",
     "lint": "eslint .",
-    "dev-start": "concurrently --kill-others \"npm run webpack\" \"npm run hot\""
+    "dev": "node dev-scripts/dev.js"
   },
   "config": {
     "electron-version": "2.0.7"
@@ -145,6 +143,7 @@
     "react-router": "^2.4.0",
     "react-router-redux": "^4.0.4",
     "react-test-renderer": "^15.6.2",
+    "signale": "^1.2.1",
     "standard": "^8.4.0",
     "style-loader": "^0.12.4",
     "stylus": "^0.52.4",

webpack-skeleton.js

@@ -4,20 +4,24 @@ const NodeTargetPlugin = require('webpack/lib/node/NodeTargetPlugin')
 
 var config = {
   entry: {
-    main: './browser/main/index.js'
+    main: ['./browser/main/index.js']
   },
   resolve: {
     extensions: ['', '.js', '.jsx', '.styl'],
-    packageMains: ['webpack', 'browser', 'web', 'browserify', ['jam', 'main'], 'main'],
+    packageMains: [
+      'webpack',
+      'browser',
+      'web',
+      'browserify',
+      ['jam', 'main'],
+      'main'
+    ],
     alias: {
-      'lib': path.join(__dirname, 'lib'),
-      'browser': path.join(__dirname, 'browser')
+      lib: path.join(__dirname, 'lib'),
+      browser: path.join(__dirname, 'browser')
     }
   },
-  plugins: [
-    new webpack.NoErrorsPlugin(),
-    new NodeTargetPlugin()
-  ],
+  plugins: [new webpack.NoErrorsPlugin(), new NodeTargetPlugin()],
   stylus: {
     use: [require('nib')()],
     import: [
@@ -43,14 +47,13 @@ var config = {
       react: 'var React',
       'react-dom': 'var ReactDOM',
       'react-redux': 'var ReactRedux',
-      'codemirror': 'var CodeMirror',
-      'redux': 'var Redux',
-      'raphael': 'var Raphael',
-      'flowchart': 'var flowchart',
+      codemirror: 'var CodeMirror',
+      redux: 'var Redux',
+      raphael: 'var Raphael',
+      flowchart: 'var flowchart',
       'sequence-diagram': 'var Diagram'
     }
   ]
 }
 
 module.exports = config
-