add electron boilerplate

README.md

@@ -97,7 +97,26 @@ TODO:
 - Docker image
 - Auto-reload for dev
 
+## Boilerplate: electron
+
+Simple boilerplate for an electron app, with allowances for various front-end framework boilerplates.
+
+At the moment it comes configured for Svelte.
+
+Supports
+- Building executables with `electron-builder`
+- Webpack configuration in both renderer and main with `electron-webpack`
+- Hot module reloading via `webpack`
+  - TODO: svelte component state is getting wiped on a hot reload??
+
+As opposed to the other JS boilerplates, it's recommended to use `yarn` instead of `npm`.
+
+- To install: `yarn`
+- To start developing: `yarn start`
+- To build: `yarn build`
+- To package: `yarn dist`
+
+
 ## TODO
-- electron boilerplate
 - react component/library boilerplate
 - native/app boilerplate

electron/.gitignore

@@ -0,0 +1,5 @@
+.DS_Store
+dist/
+node_modules/
+thumbs.db
+.idea/

electron/.yarnclean

@@ -0,0 +1,39 @@
+# test directories
+__tests__
+node_modules/*/test
+node_modules/*/tests
+powered-test
+
+# asset directories
+docs
+doc
+website
+images
+
+# examples
+example
+examples
+
+# code coverage directories
+coverage
+.nyc_output
+
+# build scripts
+Makefile
+Gulpfile.js
+Gruntfile.js
+
+# configs
+.tern-project
+.gitattributes
+.editorconfig
+.*ignore
+.eslintrc
+.jshintrc
+.flowconfig
+.documentup.json
+.yarn-metadata.json
+
+# misc
+*.gz
+*.md

electron/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "electron-webpack-quick-start",
+  "version": "0.0.0",
+  "license": "MIT",
+  "scripts": {
+    "start": "electron-webpack dev",
+    "build": "electron-webpack",
+    "dist": "yarn build && electron-builder",
+    "dist:dir": "yarn dist --dir -c.compression=store -c.mac.identity=null"
+  },
+  "devDependencies": {
+    "electron": "8.2.0",
+    "electron-builder": "^22.4.1",
+    "electron-webpack": "^2.8.2",
+    "mini-css-extract-plugin": "^1.3.9",
+    "sass": "^1.32.8",
+    "sass-loader": "^10.1.0",
+    "svelte": "^3.35.0",
+    "svelte-loader-hot": "^0.3.1",
+    "svelte-preprocess": "^4.6.9",
+    "webpack": "~4.42.1"
+  },
+  "electronWebpack": {
+    "renderer": {
+      "sourceDirectory": "src/renderer-svelte",
+      "webpackConfig": "./webpack.svelte.renderer.js"
+    }
+  }
+}

electron/src/main/index.js

@@ -0,0 +1,64 @@
+import { app, BrowserWindow, ipcMain } 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({webPreferences: {nodeIntegration: true}});
+
+  if (isDevelopment) {
+    window.webContents.openDevTools();
+  }
+
+  if (isDevelopment) {
+    window.loadURL(`http://localhost:${process.env.ELECTRON_WEBPACK_WDS_PORT}`);
+  }
+  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();
+
+  ipcMain.on("test", ( e, data ) => {
+    mainWindow?.webContents.send("cool", "cool cool", Date.now());
+  });
+});

electron/src/renderer-svelte/App.svelte

@@ -0,0 +1,24 @@
+<script>
+  export let makeCall;
+  export let name;
+  import { fly } from 'svelte/transition';
+  import Header from "./Header.svelte";
+  
+  $: count = 0;
+</script>
+
+<style type="text/scss">
+div {
+  color: red;
+}
+</style>
+
+<Header/>
+<div>Hello {name}!</div>
+<button on:click={() => {makeCall();count++;}} color="primary">click</button>
+<p>COOL {count}</p>
+{#if count % 2}
+  <div transition:fly="{{delay: 250, duration: 300, x:10, y: 10}}">
+    fades in and out
+  </div>
+{/if}

electron/src/renderer-svelte/Header.svelte

@@ -0,0 +1 @@
+<div>HEADER</div>

electron/src/renderer-svelte/index.js

@@ -0,0 +1,17 @@
+import { ipcRenderer } from "electron";
+import App from "./App.svelte";
+
+const makeCall = () => {
+	console.log("making call");
+	ipcRenderer.send("test", "hello");
+}
+
+ipcRenderer.on("cool", console.log);
+
+new App({
+	target: document.body,
+	props: {
+		name: 'World',
+		makeCall
+	}
+});

electron/webpack.svelte.renderer.js

@@ -0,0 +1,50 @@
+const path = require('path');
+const webpack = require('webpack');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const sveltePreprocess = require('svelte-preprocess');
+
+const IS_DEV = process.env.NODE_ENV !== 'production';
+
+console.log({IS_DEV});
+
+const config = {
+  resolve: {
+    alias: {
+      svelte: path.dirname(require.resolve('svelte/package.json')),
+    },
+    extensions: ['.mjs', '.js', '.svelte'],
+    mainFields: ['svelte', 'browser', 'module', 'main'],
+  },
+  devServer: {
+    hot: true,
+  },
+  devtool: IS_DEV ? 'source-map' : false,
+  module: {
+    rules: [
+      { test: /\.svelte$/, use: {
+        loader: 'svelte-loader-hot',
+        options: {
+          dev: IS_DEV,
+          preprocess: sveltePreprocess(),
+          emitCss: !IS_DEV,
+          hotReload: IS_DEV
+        },
+      }},
+      { test: /\.(sa|sc|c)ss$/, use: [(IS_DEV?'style-loader':MiniCssExtractPlugin.loader), 'css-loader', 'sass-loader'] },
+      { test: /\.eot(\?v=.*)?$/, use: ['file-loader'] },
+        { test: /\.(ico|png|gif|jpe?g)$/i, use: ['file-loader'] },
+        { test: /\.woff2?(\?v=.*)?$/, use: [{ loader: 'url-loader', options: { prefix: 'font/', limit: 5000 } }] },
+        { test: /\.ttf(\?v=.*)?$/, use: [{ loader: 'url-loader', options: { mimetype: 'application/octet-stream', limit: 10000 } }] },
+        { test: /\.svg(\?v=.*)?$/, use: [{ loader: 'url-loader', options: { mimetype: 'image/svg+xml', limit: 10000 } }] },
+      // { test: /node_modules\/svelte\/.*\.mjs$/, resolve: {fullySpecified: false}},
+    ],
+  },
+  plugins: [],
+};
+
+if (IS_DEV) {
+  // config.plugins.push(new webpack.HotModuleReplacementPlugin());
+} else {
+  config.plugins.push(new MiniCssExtractPlugin());
+}
+module.exports = config;