modify normal build process instead of using electron-webpack

Author: nklayman

.gitignore

@@ -0,0 +1,59 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "editor.formatOnSave": true
+}

README.md

@@ -0,0 +1,137 @@
+# Vue CLI Plugin Electron Builder
+
+A Vue Cli 3 plugin for Electron with no required configuration that uses [Electron Builder](https://www.electron.build/) and [Electron Webpack](https://webpack.electron.build/).
+
+**IMPORTANT: Your app must be created with Vue-CLI 3 (vue create my-app), will not work with Vue-CLI 2 (vue init webpack my-app)!**
+
+## Quick Start:
+
+Open a terminal in the directory of your app created with Vue-CLI 3.
+
+Then, install and invoke the generator of vue-cli-plugin-electron-builder by running:
+
+`vue add electron-builder`
+
+That's It! Your ready to go!
+
+### To start a development server:
+
+If you use [Yarn](https://yarnpkg.com/en/) (strongly recommended):
+
+`yarn serve:electron`
+
+or if you use NPM:
+
+`npm run serve:electron`
+
+### To build your app:
+
+With yarn:
+
+`yarn build:electron`
+
+or with NPM:
+
+`npm run build:electron`
+
+### Folder Structure:
+
+```
+├── dist/ # where electron-webpack outputs compiled files (this will overwrite normal build files)
+
+│ └── ...
+
+├── dist_electron/
+
+│ ├── [target platform]-unpacked # unpacked Electron app (main exe and supporting files)
+
+│ ├── [application name] setup [version].[target binary (exe|dmg|rpm...)] # installer for Electron app
+
+│ └── ...
+
+├── src/
+
+│ ├─── main/
+
+│ │ └── [main|index].[js|ts] # Electron entry file (for Electron's main process)
+
+│ ├── [main|index].[js|ts] # your app's entry file (for Electron's render process)
+
+│ └── ...
+
+├── electron-builder.[json|yml] # electron-builder configuration options (can also be placed in package.json under the "build" key)
+
+├── electron-webpack.[json|yml] # electron-webpack configuration options (can also be placed in package.json under the "electronWebpack" key)
+
+├── package.json # your app's package.json file
+
+├── ...
+```
+
+## Further Configuration:
+
+Initial configuration is already set for you in your app's package.json, but if you want to modify it:
+
+### CLI Options:
+
+When building your app, any arguments will be passed to electron-builder. To pass an argument/arguments to electron-webpack, place them after --webpack.
+
+**Example:**
+
+`yarn build:electron [electron-builder options] --webpack [electron-webpack options]`
+
+### Electron Builder:
+
+To see avalible options, check out [Electron Builder Configuration Options](https://www.electron.build/configuration/configuration)
+
+As per Electron Builder's documentation, they can be applied:
+
+> * in the `package.json` file of your project using the `build` key on the top level:
+>
+> ```
+>  "build": {
+>    "appId": "com.example.app"
+>  }
+> ```
+>
+> * or through the `--config <path/to/yml-or-json5-or-toml>` option (defaults to `electron-builder.yml`(or `json`, or [json5](http://json5.org/), or [toml](https://github.com/toml-lang/toml))).
+>
+> ```
+>  appId: "com.example.app"
+> ```
+>
+> If you want to use [toml](https://en.wikipedia.org/wiki/TOML), please install `yarn add toml --dev`.
+>
+> Most of the options accept `null` — for example, to explicitly set that DMG icon must be default volume icon from the OS and default rules must be not applied (i.e. use application icon as DMG icon), set `dmg.icon` to `null`
+
+### Electron Webpack:
+
+To see avalible options, check out [Electron Webpack Configuration Options](https://webpack.electron.build/configuration)
+
+As per Electron Webpack's documentation, they can be applied:
+
+> in `package.json` at `electronWebpack` or in a separate `electron-webpack.(json|json5|yml)`.
+
+To modify the webpack config for electron builds only, use the webpackConfig object under vue-cli-plugin-electron-builder's plugin options in `vue.config.js`.
+
+```
+// vue.config.js
+
+module.exports  = {
+  configureWebpack: {
+    // Non-electron build/serve configuration
+	// Aliases will be automatically copied from standard config to electron config
+  },
+  pluginOptions: {
+    electronBuilder: {
+      webpackConfig: {
+        // your electron-only webpack config
+      }
+    }
+  }
+};
+```
+
+#### Adding TypeScript Support:
+
+When you invoke/add vue-cli-plugin-electron-builder, it will ask you if you use TypeScript and configure accordingly. However, if you answered no and decide to add TypeScript later on, you must install electron-webpack-ts: `yarn add electron-webpack-ts --dev` (or with NPM: `npm install --save-dev electron-webpack-ts`).

background.js

@@ -0,0 +1,60 @@
+'use strict'
+
+import { app, BrowserWindow } from 'electron'
+import * as path from 'path'
+import { format as formatUrl } from 'url'
+
+const isDevelopment = process.env.NODE_ENV !== 'production'
+
+// global reference to mainWindow (necessary to prevent window from being garbage collected)
+let mainWindow
+
+function createMainWindow () {
+  const window = new BrowserWindow()
+
+  if (isDevelopment) {
+    window.webContents.openDevTools()
+    window.loadURL(`http://localhost:${process.env.WEBPACK_DEV_SERVER_URL}`)
+  } else {
+    window.loadURL(
+      formatUrl({
+        pathname: path.join(__dirname, 'index.html'),
+        protocol: 'file',
+        slashes: true
+      })
+    )
+  }
+
+  window.on('closed', () => {
+    mainWindow = null
+  })
+
+  window.webContents.on('devtools-opened', () => {
+    window.focus()
+    setImmediate(() => {
+      window.focus()
+    })
+  })
+
+  return window
+}
+
+// quit application when all windows are closed
+app.on('window-all-closed', () => {
+  // on macOS it is common for applications to stay open until the user explicitly quits
+  if (process.platform !== 'darwin') {
+    app.quit()
+  }
+})
+
+app.on('activate', () => {
+  // on macOS it is common to re-create a window even after all windows have been closed
+  if (mainWindow === null) {
+    mainWindow = createMainWindow()
+  }
+})
+
+// create main BrowserWindow when electron is ready
+app.on('ready', () => {
+  mainWindow = createMainWindow()
+})

generator/index.js

@@ -0,0 +1,13 @@
+module.exports = api => {
+  api.render('./template')
+  api.extendPackage({
+    scripts: {
+      'build:electron': 'vue-cli-service build:electron',
+      'serve:electron': 'vue-cli-service serve:electron'
+    },
+    devDependencies: {
+      electron: '^2.0.2'
+    },
+    main: 'dist/background.js'
+  })
+}

generator/template/_gitignore

@@ -0,0 +1,7 @@
+---
+extend: '@vue/cli-service/generator/template/_gitignore'
+replace: !!js/regexp /\/dist/
+---
+
+/dist
+/dist_electron

generator/template/src/background.js

@@ -0,0 +1,60 @@
+'use strict'
+
+import { app, BrowserWindow } from 'electron'
+import * as path from 'path'
+import { format as formatUrl } from 'url'
+
+const isDevelopment = process.env.NODE_ENV !== 'production'
+
+// global reference to mainWindow (necessary to prevent window from being garbage collected)
+let mainWindow
+
+function createMainWindow () {
+  const window = new BrowserWindow()
+
+  if (isDevelopment) {
+    window.webContents.openDevTools()
+    window.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
+  } else {
+    window.loadURL(
+      formatUrl({
+        pathname: path.join(__dirname, 'index.html'),
+        protocol: 'file',
+        slashes: true
+      })
+    )
+  }
+
+  window.on('closed', () => {
+    mainWindow = null
+  })
+
+  window.webContents.on('devtools-opened', () => {
+    window.focus()
+    setImmediate(() => {
+      window.focus()
+    })
+  })
+
+  return window
+}
+
+// quit application when all windows are closed
+app.on('window-all-closed', () => {
+  // on macOS it is common for applications to stay open until the user explicitly quits
+  if (process.platform !== 'darwin') {
+    app.quit()
+  }
+})
+
+app.on('activate', () => {
+  // on macOS it is common to re-create a window even after all windows have been closed
+  if (mainWindow === null) {
+    mainWindow = createMainWindow()
+  }
+})
+
+// create main BrowserWindow when electron is ready
+app.on('ready', () => {
+  mainWindow = createMainWindow()
+})