improved dev script

Author: ZeroX-DG

package-lock.json

@@ -4,9 +4,7 @@
   "description": "A snippet management app for developers",
   "main": "index.js",
   "scripts": {
-    "start-dev": "electron ./index.js --hot",
     "start": "electron ./index.js",
-    "webpack": "webpack-dev-server --hot --inline --config scripts/webpack.config.js --mode development --port 8000",
     "fix": "eslint . --fix",
     "lint": "eslint .",
     "build": "node scripts/build.js",
@@ -15,7 +13,7 @@
     "dist:mac": "npm run build && rimraf dist/ && electron-builder --mac",
     "dist:win:linux": "npm run build && rimraf dist/ && electron-builder --win --linux",
     "dist:all": "npm run build && rimraf dist/ && electron-builder --win --linux --mac",
-    "dev": "cross-env NODE_ENV=dev concurrently --success first --kill-others \"npm run webpack\" \"npm run start-dev\"",
+    "dev": "node scripts/dev.js",
     "test": "cross-env NODE_ENV=test BABEL_ENV=test jest"
   },
   "jest": {
@@ -132,6 +130,7 @@
     "rimraf": "^2.6.2",
     "sass-loader": "^7.0.1",
     "sass-resources-loader": "^1.3.3",
+    "signale": "^1.3.0",
     "style-loader": "^0.21.0",
     "svg-inline-loader": "^0.8.0",
     "webpack": "^4.6.0",

package.json

@@ -0,0 +1,71 @@
+process.env.NODE_ENV = 'dev'
+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 = 8000
+let server = null
+
+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.hooks.done.tap('done', stats => {
+        if (!stats.hasErrors()) {
+          signale.success(`Bundle success !`)
+          resolve()
+        } else {
+          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)
+  })

scripts/dev.js

@@ -2,8 +2,9 @@ const path = require('path')
 
 var config = {
   entry: {
-    main: path.join(__dirname, '../browser/index.jsx')
+    main: [path.join(__dirname, '../browser/index.jsx')]
   },
+  mode: 'development',
   module: {
     rules: [
       {