WIP: #26 Move to electron-builder

.gitignore

@@ -9,6 +9,7 @@
 # production
 /build
 /release-builds
+/dist
 
 # misc
 .DS_Store

config/paths.js

@@ -47,6 +47,7 @@ module.exports = {
   appPublic: resolveApp('public'),
   appHtml: resolveApp('public/index.html'),
   appIndexJs: resolveApp('src/index.js'),
+  electronJs: resolveApp('src/electron.js'),
   appPackageJson: resolveApp('package.json'),
   appSrc: resolveApp('src'),
   testsSetup: resolveApp('src/setupTests.js'),

config/webpack.config.prod.js

@@ -48,7 +48,7 @@ const cssFilename = 'static/css/[name].[contenthash:8].css';
 // To have this structure working with relative paths, we have to use custom options.
 const extractTextPluginOptions = shouldUseRelativeAssetPaths
   ? // Making sure that the publicPath goes back to to build folder.
-    { publicPath: Array(cssFilename.split('/').length).join('../') }
+  { publicPath: Array(cssFilename.split('/').length).join('../') }
   : {};
 
 // Options for PostCSS as we reference these options twice
@@ -118,16 +118,20 @@ module.exports = {
   // We generate sourcemaps in production. This is slow but gives good results.
   // You can exclude the *.map files from the build during deployment.
   devtool: shouldUseSourceMap ? 'source-map' : false,
-  // In production, we only want to load the polyfills and the app code.
-  entry: [require.resolve('./polyfills'), paths.appIndexJs],
+  // In production, we only want to load the polyfills, the app code, and the 
+  // electron builder entry script.
+  entry: {
+    main: [require.resolve('./polyfills'), paths.appIndexJs],
+    electron: paths.electronJs
+  },
   output: {
     // The build folder.
     path: paths.appBuild,
     // Generated JS file names (with nested folders).
     // There will be one main bundle, and one file per asynchronous chunk.
     // We don't currently advertise code splitting but Webpack supports it.
-    filename: 'static/js/[name].[chunkhash:8].js',
-    chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js',
+    filename: '[name].js',
+    chunkFilename: '[name].chunk.js',
     // We inferred the "public path" (such as / or /my-project) from homepage.
     publicPath: publicPath,
     // Point sourcemap entries to original disk location (format as URL on Windows)
@@ -370,6 +374,7 @@ module.exports = {
     new HtmlWebpackPlugin({
       inject: true,
       template: paths.appHtml,
+      excludeChunks: ['electron'],
       minify: {
         removeComments: true,
         collapseWhitespace: true,
@@ -477,11 +482,14 @@ module.exports = {
   // such as fs, path, electron are ignored by webpack
   target: 'electron-renderer',
   externals: [
-    function(context, request, callback) {
+    function (context, request, callback) {
       if (externals.indexOf(request) !== -1) {
         return callback(null, 'commonjs ' + request);
       }
       callback();
     },
   ],
+  node: {
+    __dirname: false
+  }
 };

package.json

@@ -3,8 +3,17 @@
   "productName": "Guppy",
   "version": "0.2.0",
   "private": true,
-  "main": "src/main.js",
+  "main": "build/electron.js",
   "homepage": "./",
+  "build": {
+    "appId": "com.electron.guppy",
+    "files": [
+      "build/**/*"
+    ],
+    "asarUnpack": [
+      "node_modules/yarn/"
+    ]
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/joshwcomeau/guppy.git"
@@ -14,12 +23,8 @@
     "start": "cross-env NODE_ENV=development npm run start:react",
     "start:react": "cross-env BROWSER=none node scripts/start.js",
     "build": "node scripts/build.js",
-    "package:linux": "electron-packager . --platform=linux --prune=true --out=release-builds --overwrite",
-    "package:mac": "electron-packager . --platform=darwin --arch=x64 --icon=src/assets/icons/mac/logo.icns --prune=true --out=release-builds --overwrite",
-    "package:win": "electron-packager . --platform=win32 --arch=x64 --icon=src/assets/icons/win/logo.ico --prune=true --out=release-builds --overwrite",
-    "dist:linux": "cross-env GENERATE_SOURCEMAP=false npm run build && npm run package:linux",
-    "dist:mac": "cross-env GENERATE_SOURCEMAP=false npm run build && npm run package:mac",
-    "dist:win": "cross-env GENERATE_SOURCEMAP=false npm run build && npm run package:win",
+    "dist": "cross-env GENERATE_SOURCEMAP=false npm run build && electron-builder",
+    "dist:all": "cross-env GENERATE_SOURCEMAP=false npm run build && electron-builder -mwl",
     "test": "node scripts/test.js --env=node",
     "coverage": "yarn test --coverage",
     "report-coverage": "yarn coverage && codecov",
@@ -73,7 +78,7 @@
     "dotenv": "5.0.0",
     "dotenv-expand": "4.2.0",
     "electron": "2.0.1",
-    "electron-packager": "12.1.0",
+    "electron-builder": "20.28.4",
     "eslint": "4.15.0",
     "eslint-config-react-app": "3.0.0-next.66cc7a90",
     "eslint-loader": "1.9.0",
@@ -204,4 +209,4 @@
     "icon": null,
     "createdAt": 1529502079329
   }
-}
+}

public/index.html

@@ -31,4 +31,4 @@
   </div>
 </body>
 
-</html>
+</html>

src/main.js → src/electron.js

@@ -10,6 +10,7 @@ const chalkRaw = require('chalk');
 
 const killProcessId = require('./services/kill-process-id.service');
 const electronStore = require('./services/electron-store.service');
+const icon256 = require('./assets/icons/png/256x256.png');
 
 const chalk = new chalkRaw.constructor({ level: 3 });
 
@@ -43,7 +44,7 @@ function createWindow() {
     height: 768,
     minWidth: 777,
     titleBarStyle: 'hidden',
-    icon: path.join(__dirname, 'assets/icons/png/256x256.png'),
+    icon: path.join(__dirname, icon256)
   });
 
   // set up some chrome extensions
@@ -82,7 +83,7 @@ function createWindow() {
   mainWindow.loadURL(startUrl);
 
   // Emitted when the window is closed.
-  mainWindow.on('closed', function() {
+  mainWindow.on('closed', function () {
     // Dereference the window object, usually you would store windows
     // in an array if your app supports multi windows, this is the time
     // when you should delete the corresponding element.
@@ -96,7 +97,7 @@ function createWindow() {
 app.on('ready', createWindow);
 
 // Quit when all windows are closed.
-app.on('window-all-closed', function() {
+app.on('window-all-closed', function () {
   // On OS X it is common for applications and their menu bar
   // to stay active until the user quits explicitly with Cmd + Q
   if (process.platform !== 'darwin') {
@@ -112,7 +113,7 @@ app.on('before-quit', ev => {
   }
 });
 
-app.on('activate', function() {
+app.on('activate', function () {
   // On OS X it's common to re-create a window in the app when the
   // dock icon is clicked and there are no other windows open.
   if (mainWindow === null) {
@@ -184,7 +185,7 @@ const manageApplicationLocation = () => {
         message: 'Move to Applications folder?',
         detail:
           "I see that I'm not in the Applications folder. I can move myself there if you'd like!",
-        icon: path.join(__dirname, 'assets/icons/png/256x256.png'),
+        icon: path.join(__dirname, icon256),
         cancelId: 1,
         defaultId: 0,
         checkboxLabel: 'Do not show this message again',

src/services/platform.service.js

@@ -39,7 +39,7 @@ export const PACKAGE_MANAGER_CMD = path.join(
   remote.app.getAppPath(),
   'node_modules/yarn/bin',
   formatCommandForPlatform(PACKAGE_MANAGER)
-);
+).replace('app.asar', 'app.asar.unpacked');
 
 // Forward the host env, and append the
 // project's .bin directory to PATH to allow