Build for Linux and Windows

.gitignore

@@ -3,5 +3,6 @@
 **/flow-coverage
 **/coverage
 **/build
+**/dist
 **/out
 **/*.env

chapter13/electron-start.for.builder.js

@@ -0,0 +1,34 @@
+/* @flow */
+
+const { app, BrowserWindow } = require("electron");
+const path = require("path");
+const url = require("url");
+
+let mainWindow;
+
+const createWindow = () => {
+    mainWindow = new BrowserWindow({
+        height: 768,
+        width: 1024,
+        icon: path.join(__dirname, "./build/r_icon.png")
+    });
+    mainWindow.loadURL(
+        url.format({
+            pathname: path.join(__dirname, "./build/index.html"),
+            protocol: "file",
+            slashes: true
+        })
+    );
+    mainWindow.on("closed", () => {
+        mainWindow = null;
+    });
+};
+
+app.on("ready", createWindow);
+
+app.on("activate", () => mainWindow === null && createWindow());
+
+app.on(
+    "window-all-closed",
+    () => process.platform !== "darwin" && app.quit()
+);

chapter13/electron-start.js

@@ -1,11 +1,8 @@
 /* @flow */
 
 const { app, BrowserWindow } = require("electron");
-const {
-    default: installExtension,
-    REACT_DEVELOPER_TOOLS,
-    REDUX_DEVTOOLS
-} = require("electron-devtools-installer");
+const path = require("path");
+const url = require("url");
 
 let mainWindow;
 
@@ -13,20 +10,15 @@ const createWindow = () => {
     mainWindow = new BrowserWindow({
         height: 768,
         width: 1024,
-        icon: "./src/regionsApp/r_icon.png"
+        icon: path.join(__dirname, "./build/r_icon.png")
     });
-    mainWindow.loadURL("http://localhost:3000");
-
-    mainWindow.webContents.openDevTools();
-
-    installExtension(REACT_DEVELOPER_TOOLS)
-        .then(name => console.log(`Added Extension:  ${name}`))
-        .catch(err => console.log("An error occurred: ", err));
-
-    installExtension(REDUX_DEVTOOLS)
-        .then(name => console.log(`Added Extension:  ${name}`))
-        .catch(err => console.log("An error occurred: ", err));
-
+    mainWindow.loadURL(
+        url.format({
+            pathname: path.join(__dirname, "./build/index.html"),
+            protocol: "file",
+            slashes: true
+        })
+    );
     mainWindow.on("closed", () => {
         mainWindow = null;
     });

chapter13/electron-start.with.debugging.js

@@ -1,16 +1,32 @@
 /* @flow */
 
 const { app, BrowserWindow } = require("electron");
+const {
+    default: installExtension,
+    REACT_DEVELOPER_TOOLS,
+    REDUX_DEVTOOLS
+} = require("electron-devtools-installer");
 
 let mainWindow;
 
 const createWindow = () => {
     mainWindow = new BrowserWindow({
         height: 768,
-        width: 1024
+        width: 1024,
+        icon: "./src/regionsApp/r_icon.png"
     });
     mainWindow.loadURL("http://localhost:3000");
-    // mainWindow.webContents.openDevTools();
+
+    mainWindow.webContents.openDevTools();
+
+    installExtension(REACT_DEVELOPER_TOOLS)
+        .then(name => console.log(`Added Extension:  ${name}`))
+        .catch(err => console.log("An error occurred: ", err));
+
+    installExtension(REDUX_DEVTOOLS)
+        .then(name => console.log(`Added Extension:  ${name}`))
+        .catch(err => console.log("An error occurred: ", err));
+
     mainWindow.on("closed", () => {
         mainWindow = null;
     });

chapter13/package.json

@@ -1,10 +1,15 @@
 {
     "name": "chapter13",
     "version": "0.1.0",
+    "description": "Regions app for chapter 13",
+    "homepage": "./",
+    "license": "free",
+    "author": "Federico Kereki",
     "private": true,
     "devDependencies": {
         "babel-eslint": "^10.0.1",
         "electron": "^3.0.2",
+        "electron-builder": "^20.28.4",
         "electron-devtools-installer": "^2.2.4",
         "eslint": "^5.6.1",
         "eslint-config-recommended": "^4.0.0",
@@ -39,6 +44,25 @@
         "test": "react-app-rewired test --env=jsdom",
         "eject": "react-app-rewired eject",
         "flow": "flow",
-        "addTypes": "flow-typed install"
+        "addTypes": "flow-typed install",
+        "electron-builder": "electron-builder"
+    },
+    "build": {
+        "appId": "com.electron.chapter13",
+        "compression": "normal",
+        "asar": true,
+        "extends": null,
+        "files": [
+            "electron-start.js",
+            "build/**/*",
+            "node_modules/**/*",
+            "src/regionsApp/r_icon.png"
+        ],
+        "linux": {
+            "target": "zip"
+        },
+        "win": {
+            "target": "portable"
+        }
     }
 }

chapter13/public/index.html

@@ -1,16 +1,17 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="theme-color" content="#000000">
-    <!--
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="theme-color" content="#000000">
+  <!--
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-    <!--
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+  <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -19,14 +20,15 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
-  </head>
-  <body>
-    <noscript>
-      You need to enable JavaScript to run this app.
-    </noscript>
-    <div id="root"></div>
-    <!--
+  <title>React App</title>
+</head>
+
+<body>
+  <noscript>
+    You need to enable JavaScript to run this app.
+  </noscript>
+  <div id="root"></div>
+  <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -36,5 +38,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-  </body>
-</html>
+</body>
+
+</html>

chapter13/src/App.regions.js

@@ -34,15 +34,11 @@ const template = [
             {
                 label: "Uruguay",
                 accelerator: "Alt+CommandOrControl+U",
-                icon:
-                    "/home/fkereki/JS_BOOK/modernjs/chapter13/src/regionsApp/flag-uruguay.png",
                 click: () => store.dispatch(getRegions("UY"))
             },
             {
                 label: "Hungary",
                 accelerator: "Alt+CommandOrControl+H",
-                icon:
-                    "/home/fkereki/JS_BOOK/modernjs/chapter13/src/regionsApp/flag-hungary.png",
                 click: () => store.dispatch(getRegions("HU"))
             }
         ]