Setup mac os build with autoupdate using electron-builder

Author: yamalight

.gitignore

@@ -36,3 +36,4 @@ jspm_packages
 # Optional REPL history
 .node_repl_history
 dist
+src/app.min.js

index.html

@@ -33,7 +33,7 @@
       });
       require('./src/index.js');
     } else {
-      require('./dist/app.min.js');
+      require('./src/app.min.js');
     }
   </script>
 </html>

index.js

@@ -2,6 +2,7 @@
 const url = require('url');
 const path = require('path');
 const electron = require('electron');
+const {autoUpdater} = require('electron-updater');
 
 // Module to control application life.
 const app = electron.app;
@@ -13,6 +14,9 @@ const BrowserWindow = electron.BrowserWindow;
 let mainWindow;
 
 function createWindow() {
+  // trigger autoupdate check
+  autoUpdater.checkForUpdates();
+
   // Create the browser window.
   mainWindow = new BrowserWindow({
     width: 800,
@@ -62,5 +66,33 @@ app.on('activate', function() {
   }
 });
 
-// In this file you can include the rest of your app's specific main process
-// code. You can also put them in separate files and require them here.
+//-------------------------------------------------------------------
+// Auto updates
+//-------------------------------------------------------------------
+autoUpdater.on('checking-for-update', () => {
+  console.log('Checking for update...');
+});
+autoUpdater.on('update-available', info => {
+  console.log('Update available.');
+});
+autoUpdater.on('update-not-available', info => {
+  console.log('Update not available.');
+});
+autoUpdater.on('error', err => {
+  console.log('Error in auto-updater.');
+});
+autoUpdater.on('download-progress', progressObj => {
+  console.log(
+    `Download speed: ${progressObj.bytesPerSecond} - Downloaded ${progressObj.percent}% (${progressObj.transferred} + '/' + ${progressObj.total} + )`
+  );
+});
+autoUpdater.on('update-downloaded', info => {
+  console.log('Update downloaded; will install now');
+});
+
+autoUpdater.on('update-downloaded', info => {
+  // Wait 5 seconds, then quit and install
+  // In your application, you don't need to wait 500 ms.
+  // You could call autoUpdater.quitAndInstall(); immediately
+  autoUpdater.quitAndInstall();
+});

package.json

@@ -1,18 +1,29 @@
 {
   "name": "bpjs-electron",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "BPJS Electron app",
   "main": "index.js",
   "repository": "git@github.com:yamalight/bpjs-electron.git",
   "author": "Tim Ermilov <yamalight@gmail.com>",
   "license": "MIT",
+  "build": {
+    "appId": "com.bpjs.ElectronDemo",
+    "mac": {
+      "category": "com.bpjs.demo",
+      "target": [
+        "dmg"
+      ]
+    }
+  },
   "scripts": {
     "start": "NODE_ENV=test electron .",
     "production": "electron .",
     "lint": "eslint **/*.js",
     "inspect-main": "electron-inspector",
     "build": "rollup -c",
-    "package": "electron-packager . bpjs-electron --platform=darwin --arch=x64 --overwrite",
+    "pack": "electron-builder --dir",
+    "dist": "electron-builder --x64",
+    "gh-publish": "electron-builder --x64 -p always",
     "test": "NODE_ENV=test mocha"
   },
   "devDependencies": {
@@ -21,7 +32,7 @@
     "babel-preset-react": "^6.23.0",
     "babel-register": "^6.24.0",
     "electron": "^1.6.2",
-    "electron-packager": "^8.7.2",
+    "electron-builder": "^19.26.3",
     "eslint": "^3.19.0",
     "eslint-config-airbnb": "^14.1.0",
     "eslint-config-prettier": "^1.5.0",
@@ -42,6 +53,7 @@
     "big-integer": "^1.6.22",
     "bulma": "^0.4.0",
     "cheerio": "^0.22.0",
+    "electron-updater": "^2.8.7",
     "font-awesome": "^4.7.0",
     "lodash": "^4.17.4",
     "playlist-parser": "^0.0.12",

rollup.config.js

@@ -5,7 +5,7 @@ import {minify} from 'uglify-es';
 export default {
   entry: 'src/index.js',
   format: 'cjs',
-  dest: 'dist/app.min.js',
+  dest: 'src/app.min.js',
   plugins: [babel({exclude: 'node_modules/**'}), uglify({}, minify)],
   external: [
     'big-integer',

src/pages/settings.js

@@ -12,11 +12,9 @@ export default class Settings extends React.Component {
     this.state = {};
   }
 
-  componentDidMount() {
-  }
+  componentDidMount() {}
 
-  componentWillUnmount() {
-  }
+  componentWillUnmount() {}
 
   render() {
     // const {series} = this.state;
@@ -34,6 +32,12 @@ export default class Settings extends React.Component {
               </Link>
             </div>
           </div>
+
+          <div className="nav-right nav-menu">
+            <div className="nav-item">
+              I was updated
+            </div>
+          </div>
         </nav>
 
         <div className="content columns">