implented AutoUpdate and ready for GitHub Releases

Author: stevenlabrie

.gitignore

@@ -1,2 +1,3 @@
 node_modules/
 dist/
+electron-builder.json

app/electron.js

@@ -13,6 +13,7 @@ const fixPath = require('fix-path');
 const MongoClient = require('mongodb').MongoClient;
 // Executing terminal commands using JS
 const { exec } = require('child_process');
+const { autoUpdater } = require('electron-updater');
 
 // Add React extension for development
 const { default: installExtension, REACT_DEVELOPER_TOOLS } = require('electron-devtools-installer');
@@ -89,6 +90,9 @@ function createWindow() {
     // when you should delete the corresponding element.
     mainWindow = null
   })
+  mainWindow.once('ready-to-show', () => {
+    autoUpdater.checkForUpdatesAndNotify();
+  });
 }
 
 // This method will be called when Electron has finished
@@ -121,7 +125,7 @@ if (!fs.existsSync(path.join(process.resourcesPath, "/schemafiles/"))) {
 }
 let testpath = path.join(process.resourcesPath, "/schemafiles/qlens.json")
 
-if (process.resourcesPath !== 'win32') fixPath()
+if (process.resourcesPath !== 'win32') fixPath();
 
 ipcMain.on('URI', (event, arg) => {
 
@@ -156,3 +160,14 @@ ipcMain.on('URI', (event, arg) => {
     }
   })
 });
+
+autoUpdater.on('update-available', () => {
+  mainWindow.webContents.send('update_available');
+});
+autoUpdater.on('update-downloaded', () => {
+  mainWindow.webContents.send('update_downloaded');
+});
+
+ipcMain.on('restart_app', () => {
+  autoUpdater.quitAndInstall();
+});

app/src/App.js

@@ -1,14 +1,15 @@
 // Import dependencies
 import React from "react";
 import Container from "./containers/Container";
+import AutoUpdate from "./Components/AutoUpdate";
 import "./public/index.css";
 
 // Create main App component
-const App = () => (
-    <div>
-      <Container />
-    </div>
-)
-
+const App = () => {
+  <div>
+    <Container />
+    <AutoUpdate />
+  </div>
+}
 // Export the App component
 export default App;

app/src/Components/AutoUpdate.js

@@ -0,0 +1,42 @@
+import React from 'react'
+import "./public/index.css";
+const { ipcRenderer } = require('electron')
+
+const AutoUpdate = () => {
+    const notification = document.getElementById('notification');
+    const message = document.getElementById('message');
+    const restartButton = document.getElementById('restart-button');
+
+    ipcRenderer.on('update_available', () => {
+        ipcRenderer.removeAllListeners('update_available');
+        message.innerText = 'A new update is available. Downloading now...';
+        notification.classList.remove('hidden');
+    });
+    ipcRenderer.on('update_downloaded', () => {
+        ipcRenderer.removeAllListeners('update_downloaded');
+        message.innerText = 'Update Downloaded. It will be installed on restart. Restart now?';
+        restartButton.classList.remove('hidden');
+        notification.classList.remove('hidden');
+    });
+
+    function closeNotification() {
+        notification.classList.add('hidden');
+    };
+    function restartApp() {
+        ipcRenderer.send('restart_app');
+    };
+
+    return (
+    <div id="notification" class="hidden">
+        <p id="message"></p>
+        <button id="close-button" onClick="closeNotification()">
+        Close
+        </button>
+        <button id="restart-button" onClick="restartApp()" class="hidden">
+        Restart
+        </button>
+    </div>
+    )
+}
+
+export default AutoUpdate

app/src/public/index.css

@@ -442,3 +442,19 @@ input[type=checkbox]{
   transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
 }
+
+/* ================================ AUTO UPDATE ================================  */
+
+#notification {
+  position: fixed;
+  bottom: 20px;
+  left: 20px;
+  width: 200px;
+  padding: 20px;
+  border-radius: 5px;
+  background-color: white;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+}
+.hidden {
+  display: none;
+}

electron-builder.json

@@ -1,5 +1,10 @@
 {
   "appId": "com.QLens.app",
+  "publish":
+    {
+      "provider": "github",
+      "token": "0b26911bfe3e37f5cb71f9f06525494dabc5548e"
+    },
       "asar": true,
       "productName": "QLens",
       "directories": {

package.json

@@ -15,7 +15,11 @@
     "pack-mac": "npm run build && electron-builder -m",
     "dist": "electron-builder",
     "test": "jest --verbose",
-    "test:watch": "npm run test -- --watch"
+    "test:watch": "npm run test -- --watch",
+    "publish-mac": "npm run build && electron-builder -m --publish always",
+    "publish-win": "npm run build && electron-builder -w --publish always",
+    "publish-lin": "npm run build && electron-builder -l --publish always",
+    "deploy": "npm run build && electron-builder -mwl --publish always"
   },
   "repository": {
     "type": "git",
@@ -49,7 +53,7 @@
       "url": "https://github.com/stevenlabrie"
     }
   ],
-  "license": "ISC",
+  "license": "MIT",
   "bugs": {
     "url": "https://github.com/stevenlabrie/QLens/issues"
   },