Initial release of the electron development project

mattsoftware · May 3, 2018 · 0de5000 · 0de5000
1 parent b27577a
commit 0de5000
Show file tree

Hide file tree

Showing 6 changed files with 2,027 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+dist
diff --git a/README.md b/README.md
@@ -1,2 +1,20 @@
 # electron_development
 Example project to get up and running with Electron Development quickly
+
+*NOTE: For the moment the binaries are built for the Raspberry Pi*
+
+## Environment Variables
+Run this executable with the following Environment Variables set...
+<dl>
+    <dt>ELECTRON_START_URL</dt>
+    <dd>The URL for a webpack dev server (for example) that will serve the content for the app.</dd>
+    <dt>ELECTRON_KIOSK</dt>
+    <dd>Set this environment variable to 1 to show full screen without title.</dd>
+    <dt>ELECTRON_WIDTH</dt>
+    <dd>The width of the window to display (incompatible with ELECTRON_KIOSK).</dd>
+    <dt>ELECTRON_HEIGHT</dt>
+    <dd>The height of the window to display (incompatible with ELECTRON_KIOSK).</dd>
+    <dt>ELECTRON_DEV_TOOLS</dt>
+    <dd>Display the dev tools window.</dd>
+</dl>
+
diff --git a/electron/electron.js b/electron/electron.js
@@ -0,0 +1,81 @@
+const electron = require('electron');
+// Module to control application life.
+const app = electron.app;
+// Module to create native browser window.
+const BrowserWindow = electron.BrowserWindow;
+
+const path = require('path');
+const url = require('url');
+
+// Keep a global reference of the window object, if you don't, the window will
+// be closed automatically when the JavaScript object is garbage collected.
+let mainWindow;
+const createWindow  = () => {
+    const { displayWidth, displayHeight } = electron.screen.getPrimaryDisplay().size;
+
+    const mainWindowParams = {
+        width: +process.env.ELECTRON_WIDTH || 800,
+        height: +process.env.ELECTRON_HEIGHT || 600,
+        webPreferences: {
+            webSecurity: process.env.NODE_ENV === 'development' ? false : true,
+        },
+    };
+    const kioskParams = {
+        displayWidth,
+        displayHeight,
+        frame: false,
+        fullscreen: true,
+        webPreferences: {
+            webSecurity: process.env.NODE_ENV === 'development' ? false : true,
+        },
+    };
+
+    // Create the browser window.
+    mainWindow = new BrowserWindow(process.env.ELECTRON_KIOSK ? kioskParams : mainWindowParams);
+
+    // and load the index.html of the app.
+    const startUrl = process.env.ELECTRON_START_URL || url.format({
+        pathname: path.join(__dirname, 'index.html'),
+        protocol: 'file:',
+        slashes: true,
+    });
+    console.log(`Using start url = ${startUrl}`);
+    mainWindow.loadURL(startUrl);
+
+    // Open the DevTools.
+    process.env.ELECTRON_DEV_TOOLS && mainWindow.webContents.openDevTools();
+
+    // Emitted when the window is closed.
+    mainWindow.on('closed', () => {
+        // 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.
+        mainWindow = null;
+    });
+}
+
+// This method will be called when Electron has finished
+// initialization and is ready to create browser windows.
+// Some APIs can only be used after this event occurs.
+app.on('ready', createWindow);
+
+// Quit when all windows are closed.
+app.on('window-all-closed', () => {
+    // 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') {
+        app.quit()
+    }
+});
+
+app.on('activate', () => {
+    // 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) {
+        createWindow()
+    }
+});
+
+// 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.
+
diff --git a/electron/index.html b/electron/index.html
@@ -0,0 +1,22 @@
+<html>
+    <head>
+    </head>
+    <body>
+        <h1>Electron Development</h1>
+        <div>
+            Run this executable with the following Environment Variables set...
+            <dl>
+                <dt>ELECTRON_START_URL</dt>
+                <dd>The URL for a webpack dev server (for example) that will serve the content for the app.</dd>
+                <dt>ELECTRON_KIOSK</dt>
+                <dd>Set this environment variable to 1 to show full screen without title.</dd>
+                <dt>ELECTRON_WIDTH</dt>
+                <dd>The width of the window to display (incompatible with ELECTRON_KIOSK).</dd>
+                <dt>ELECTRON_HEIGHT</dt>
+                <dd>The height of the window to display (incompatible with ELECTRON_KIOSK).</dd>
+                <dt>ELECTRON_DEV_TOOLS</dt>
+                <dd>Display the dev tools window.</dd>
+            </dl>
+        </div>
+    </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "electron_development",
+  "version": "1.0.0",
+  "description": "Base Electron Project For Development",
+  "main": "electron/electron.js",
+  "author": "Matt Paine <[email protected]>",
+  "license": "MIT",
+  "private": false,
+  "scripts": {
+    "clean": "rm -fr dist build",
+    "electron": "electron .",
+    "dist": "yarn dist:pi",
+    "dist:pi": "electron-builder --linux AppImage --armv7l"
+  },
+  "devDependencies": {
+    "electron-builder": "^20.3.1",
+    "electron": "1.7.9"
+  },
+  "build": {
+    "appId": "com.mattsoftware.electron_development",
+    "productName": "Electron Builder",
+    "copyright": "Copyright © 2018 Matt Paine <[email protected]>",
+    "appImage": {
+      "systemIntegration": "doNotAsk"
+    },
+    "snap": null,
+    "extends": null
+  }
+}