Merge pull request #10 from stratisproject/ui

Add Webpack to cleanly access Electron API

- Cleaned up Electron files
- Added webpack to target electron-renderer
- Clean way of accessing the Electron API within Angular

Breeze.UI/angular-cli.json

 {
   "project": {
-    "name": "breeze-ui"
+    "name": "breeze-ui",
+    "ejected": true
   },
   "apps": [
     {
@@ -14,6 +15,7 @@
       "polyfills": "polyfills.ts",
       "test": "test.ts",
       "tsconfig": "tsconfig.json",
+      "testTsconfig": "tsconfig.json",
       "prefix": "app",
       "styles": [
         "../node_modules/bootstrap/dist/css/bootstrap.min.css",

Breeze.UI/package.json

 {
-  "name": "breeze-ui",
-  "version": "0.1.0",
+  "name": "breeze",
   "description": "Graphical User Interface for the Breeze Wallet.",
-  "main": "electron.js",
+  "version": "0.1.0",
   "license": "MIT",
+  "main": "dist/electron.js",
   "angular-cli": {},
   "scripts": {
+    "run": "electron .",
+    "start": "concurrently \"webpack-dev-server --port=4200\" \"electron src/electron.live.js\"",
     "ng": "ng",
-    "start": "ng serve --prod",
-    "test": "ng test",
-    "pree2e": "webdriver-manager update --standalone false --gecko false",
-    "e2e": "protractor",
-    "build": "ng build --prod",
-    "electron": "electron .",
-    "electron:build": "npm run electron:prepare && npm run electron:pack-win",
-    "electron:prepare": "npm run build && xcopy package.json dist && xcopy electron.js dist",
-    "electron:package": "npm run electron:prepare && npm run electron:pack-mac && npm run electron:pack-win && npm run electron:pack-linux",
-    "electron:pack-mac": "electron-packager dist --asar --overwrite --platform=darwin --arch=x64 --out=build",
-    "electron:pack-win": "electron-packager dist --asar --overwrite --platform=win32 --arch=ia32 --out=build",
-    "electron:pack-linux": "electron-packager dist --asar --overwrite --platform=linux --arch=x64 --out=build"
+    "build": "webpack",
+    "test": "karma start ./karma.conf.js",
+    "lint": "ng lint",
+    "e2e": "protractor ./protractor.conf.js",
+    "prepree2e": "npm start",
+    "pree2e": "webdriver-manager update --standalone false --gecko false --quiet",
+    "package:linux": "electron-packager . $npm_package_name-$npm_package_version --ignore=src --ignore=node_modules --ignore=e2e --ignore=.*\\.conf\\.js --ignore=\"(angular-cli|tsconfig)\\.json\" --ignore=webpack.*\\.js --out=packages --platform=linux --arch=all --overwrite",
+    "package:mac": "electron-packager . $npm_package_name-$npm_package_version --ignore=src --ignore=node_modules --ignore=e2e --ignore=.*\\.conf\\.js --ignore=\"(angular-cli|tsconfig)\\.json\" --ignore=webpack.*\\.js --out=packages --platform=darwin --arch=all --overwrite ",
+    "package:win": "electron-packager . $npm_package_name-$npm_package_version --ignore=src --ignore=node_modules --ignore=e2e --ignore=.*\\.conf\\.js --ignore=\"(angular-cli|tsconfig)\\.json\" --ignore=webpack.*\\.js --out=packages --platform=win32 --arch=all --overwrite ",
+    "package:all": "electron-packager . $npm_package_name-$npm_package_version --ignore=src --ignore=node_modules --ignore=e2e --ignore=.*\\.conf\\.js --ignore=\"(angular-cli|tsconfig)\\.json\" --ignore=webpack.*\\.js --out=packages --all --overwrite"
   },
   "private": true,
   "dependencies": {
@@ -35,22 +35,20 @@
     "@angular/router": "^4.0.0",
     "bootstrap": "^4.0.0-alpha.6",
     "core-js": "^2.4.1",
-    "dotenv": "^4.0.0",
-    "electron-edge": "^6.5.4",
     "rxjs": "^5.2.0",
-    "ts-helpers": "^1.1.2",
-    "typescript": "^2.2.2",
     "zone.js": "^0.8.5"
   },
   "devDependencies": {
     "@angular/cli": "^1.0.0",
     "@angular/compiler-cli": "^4.0.0",
+    "@types/electron": "^1.4.35",
     "@types/jasmine": "2.5.46",
     "@types/node": "~7.0.12",
     "codelyzer": "~2.0.0",
-    "dotenv": "^4.0.0",
+    "concurrently": "^3.4.0",
+    "copy-webpack-plugin": "^4.0.1",
     "electron": "^1.6.2",
-    "electron-reload": "^1.1.0",
+    "electron-packager": "^8.6.0",
     "jasmine-core": "~2.5.2",
     "jasmine-spec-reporter": "~3.2.0",
     "karma": "~1.5.0",
@@ -61,6 +59,26 @@
     "karma-jasmine-html-reporter": "^0.2.2",
     "protractor": "~5.1.1",
     "ts-node": "~3.0.2",
-    "tslint": "~4.5.1"
+    "tslint": "~4.5.1",
+    "typescript": "^2.2.2",
+    "webpack-dev-server": "~2.3.0",
+    "autoprefixer": "^6.5.3",
+    "css-loader": "^0.26.1",
+    "cssnano": "^3.10.0",
+    "exports-loader": "^0.6.3",
+    "file-loader": "^0.10.0",
+    "json-loader": "^0.5.4",
+    "karma-sourcemap-loader": "^0.3.7",
+    "less-loader": "^2.2.3",
+    "postcss-loader": "^0.13.0",
+    "postcss-url": "^5.1.2",
+    "raw-loader": "^0.5.1",
+    "sass-loader": "^4.1.1",
+    "script-loader": "^0.7.0",
+    "source-map-loader": "^0.1.5",
+    "istanbul-instrumenter-loader": "^2.0.0",
+    "style-loader": "^0.13.1",
+    "stylus-loader": "^2.4.0",
+    "url-loader": "^0.5.7"
   }
 }

Breeze.UI/src/app/shared/api/api.service.ts

@@ -11,12 +11,12 @@ import { Mnemonic } from '../mnemonic';
 export class ApiService {
     constructor(private http: Http) {};
 
-    private webApiUrl = 'http://localhost:5000/';
+    private webApiUrl = 'http://localhost:5000/api/v1';
     private headers = new Headers({'Content-Type': 'application/json'});
 
     isConnected(): Observable<string> {
       return this.http
-        .get(this.webApiUrl + 'api/safe/connected')
+        .get(this.webApiUrl + '/safe/connected')
         .map(data => data.json())
     }
 
@@ -28,7 +28,7 @@ export class ApiService {
     }
 
     private handleError(error: any): Promise<any> {
-      console.error('An error occurred', error); // for demo purposes only
+      console.error('An error occurred', error);
       return Promise.reject(error.message || error);
     }
 }

Breeze.UI/electron.js → Breeze.UI/src/electron.js

 const electron = require('electron')
-const dotenv = require('dotenv')
-// const edge = require('electron-edge')
+
 // Module to control application life.
 const app = electron.app
 // Module to create native browser window.
@@ -9,38 +8,20 @@ const BrowserWindow = electron.BrowserWindow
 const path = require('path')
 const url = require('url')
 
-// Require dotenv
-dotenv.config();
-if (process.env.DEBUG === 'true'){
-  // Require electron-reload for dev options
-  require('electron-reload')(__dirname);
-}
-
 // 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 = null;
 
 function createWindow () {
   // Create the browser window.
-  mainWindow = new BrowserWindow({width: 1000, height: 600, frame: true, minWidth: 1000, minHeight: 600, icon: "./src/assets/images/stratis-tray.png"})
-
-  if (process.env.DEBUG === 'false'){
-    mainWindow.loadURL(url.format({
-      pathname: path.join(__dirname, 'index.html'),
-      protocol: 'file:',
-      slashes: true
-    }));
-  } else {
-    mainWindow.loadURL('http://localhost:4200');
-    // Open the DevTools.
-    mainWindow.webContents.openDevTools();
-  }
+  mainWindow = new BrowserWindow({width: 1000, height: 600, frame: true, minWidth: 1000, minHeight: 600, icon: "./assets/images/stratis-tray.png"})
 
-  // mainWindow.loadURL(url.format({
-  //     pathname: path.join(__dirname, 'index.html'),
-  //     protocol: 'file:',
-  //     slashes: true
-  //   }));
+  // and load the index.html of the app.
+  mainWindow.loadURL(url.format({
+    pathname: path.join(__dirname, 'index.html'),
+    protocol: 'file:',
+    slashes: true
+  }))
 
   // Emitted when the window is closed.
   mainWindow.on('closed', function () {
@@ -55,9 +36,8 @@ function createWindow () {
 // initialization and is ready to create browser windows.
 // Some APIs can only be used after this event occurs.
 app.on('ready', function () {
-  startServer()
-  createWindow()
   createTray()
+  createWindow()
 })
 
 // Quit when all windows are closed.
@@ -77,10 +57,6 @@ app.on('activate', function () {
   }
 })
 
-function startServer() {
-  // var startServer = edge.func('./assets/dll/Wallet.WebApi.dll');
-}
-
 function createTray() {
   //Put the app in system tray
   const Menu = electron.Menu
@@ -88,7 +64,7 @@ function createTray() {
 
   let appIcon = null
 
-  const iconName = process.platform === 'win32' ? './src/assets/images/stratis-tray.png' : './src/assets/images/stratis-tray.png'
+  const iconName = process.platform === 'win32' ? './assets/images/stratis-tray.png' : './assets/images/stratis-tray.png'
   const iconPath = path.join(__dirname, iconName)
   appIcon = new Tray(iconPath)
   const contextMenu = Menu.buildFromTemplate([{

Breeze.UI/src/electron.live.js

+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 = null;
+
+function createWindow () {
+  setTimeout(() => {
+    // Create the browser window.
+    mainWindow = new BrowserWindow({width: 1000, height: 600, frame: true, minWidth: 1000, minHeight: 600, icon: "./assets/images/stratis-tray.png"})
+
+    mainWindow.loadURL(url.format({
+        pathname: 'localhost:4200',
+        protocol: 'http:',
+        slashes: true
+      }))
+
+    // Emitted when the window is closed.
+    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.
+      mainWindow = null
+    })
+  }, 12000)
+}
+
+// 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', function () {
+  createTray()
+  createWindow()
+})
+
+// Quit when all windows are closed.
+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') {
+    app.quit()
+  }
+})
+
+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) {
+    createWindow()
+  }
+})
+
+function createTray() {
+  //Put the app in system tray
+  const Menu = electron.Menu
+  const Tray = electron.Tray
+
+  let appIcon = null
+
+  const iconName = process.platform === 'win32' ? './assets/images/stratis-tray.png' : './assets/images/stratis-tray.png'
+  const iconPath = path.join(__dirname, iconName)
+  appIcon = new Tray(iconPath)
+  const contextMenu = Menu.buildFromTemplate([{
+    label: 'Hide/Show',
+    click: function () {
+      mainWindow.isVisible() ? mainWindow.hide() : mainWindow.show();
+    }
+  }])
+  appIcon.setToolTip('Breeze Wallet')
+  appIcon.setContextMenu(contextMenu)
+
+  app.on('window-all-closed', function () {
+    if (appIcon) appIcon.destroy()
+  })
+}

Breeze.UI/src/index.html

@@ -2,8 +2,8 @@
 <html>
 <head>
   <meta charset="utf-8">
-  <title>BreezeUI</title>
-  <base href="/">
+  <title>Breeze</title>
+  <base href="./">
   <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 <body>

Breeze.UI/src/tsconfig.json

@@ -6,7 +6,10 @@
     "sourceMap": true,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    "lib": [ "es2015", "dom" ],
+    "lib": [
+      "es2015",
+      "dom"
+    ],
     "noImplicitAny": true,
     "suppressImplicitAnyIndexErrors": true
   },

Breeze.UI/webpack.config.js

+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const path = require('path');
+const ProgressPlugin = require('webpack/lib/ProgressPlugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const autoprefixer = require('autoprefixer');
+const postcssUrl = require('postcss-url');
+
+const { NoEmitOnErrorsPlugin, LoaderOptionsPlugin } = require('webpack');
+const { GlobCopyWebpackPlugin, BaseHrefWebpackPlugin } = require('@angular/cli/plugins/webpack');
+const { CommonsChunkPlugin } = require('webpack').optimize;
+const { AotPlugin } = require('@ngtools/webpack');
+
+const nodeModules = path.join(process.cwd(), 'node_modules');
+const entryPoints = ["inline","polyfills","sw-register","styles","vendor","main"];
+const baseHref = "";
+const deployUrl = "";
+
+module.exports = {
+  "target": "electron-renderer",
+  "devtool": "source-map",
+  "resolve": {
+    "extensions": [
+      ".ts",
+      ".js"
+    ],
+    "modules": [
+      "./node_modules"
+    ]
+  },
+  "resolveLoader": {
+    "modules": [
+      "./node_modules"
+    ]
+  },
+  "entry": {
+    "main": [
+      "./src/main.ts"
+    ],
+    "polyfills": [
+      "./src/polyfills.ts"
+    ],
+    "styles": [
+      "./node_modules/bootstrap/dist/css/bootstrap.min.css",
+      "./src/styles.css"
+    ]
+  },
+  "output": {
+    "path": path.join(process.cwd(), "dist"),
+    "filename": "[name].bundle.js",
+    "chunkFilename": "[id].chunk.js"
+  },
+  "module": {
+    "rules": [
+      {
+        "enforce": "pre",
+        "test": /\.js$/,
+        "loader": "source-map-loader",
+        "exclude": [
+          /\/node_modules\//
+        ]
+      },
+      {
+        "test": /\.json$/,
+        "loader": "json-loader"
+      },
+      {
+        "test": /\.html$/,
+        "loader": "raw-loader"
+      },
+      {
+        "test": /\.(eot|svg)$/,
+        "loader": "file-loader?name=[name].[hash:20].[ext]"
+      },
+      {
+        "test": /\.(jpg|png|gif|otf|ttf|woff|woff2|cur|ani)$/,
+        "loader": "url-loader?name=[name].[hash:20].[ext]&limit=10000"
+      },
+      {
+        "exclude": [
+          path.join(process.cwd(), "node_modules/bootstrap/dist/css/bootstrap.min.css"),
+          path.join(process.cwd(), "src/styles.css")
+        ],
+        "test": /\.css$/,
+        "loaders": [
+          "exports-loader?module.exports.toString()",
+          "css-loader?{\"sourceMap\":false,\"importLoaders\":1}",
+          "postcss-loader"
+        ]
+      },
+      {
+        "exclude": [
+          path.join(process.cwd(), "node_modules/bootstrap/dist/css/bootstrap.min.css"),
+          path.join(process.cwd(), "src/styles.css")
+        ],
+        "test": /\.scss$|\.sass$/,
+        "loaders": [
+          "exports-loader?module.exports.toString()",
+          "css-loader?{\"sourceMap\":false,\"importLoaders\":1}",
+          "postcss-loader",
+          "sass-loader"
+        ]
+      },
+      {
+        "exclude": [
+          path.join(process.cwd(), "node_modules/bootstrap/dist/css/bootstrap.min.css"),
+          path.join(process.cwd(), "src/styles.css")
+        ],
+        "test": /\.less$/,
+        "loaders": [
+          "exports-loader?module.exports.toString()",
+          "css-loader?{\"sourceMap\":false,\"importLoaders\":1}",
+          "postcss-loader",
+          "less-loader"
+        ]
+      },
+      {
+        "exclude": [
+          path.join(process.cwd(), "node_modules/bootstrap/dist/css/bootstrap.min.css"),
+          path.join(process.cwd(), "src/styles.css")
+        ],
+        "test": /\.styl$/,
+        "loaders": [
+          "exports-loader?module.exports.toString()",
+          "css-loader?{\"sourceMap\":false,\"importLoaders\":1}",
+          "postcss-loader",
+          "stylus-loader?{\"sourceMap\":false,\"paths\":[]}"
+        ]
+      },
+      {
+        "include": [
+          path.join(process.cwd(), "node_modules/bootstrap/dist/css/bootstrap.min.css"),
+          path.join(process.cwd(), "src/styles.css")
+        ],
+        "test": /\.css$/,
+        "loaders": ExtractTextPlugin.extract({
+  "use": [
+    "css-loader?{\"sourceMap\":false,\"importLoaders\":1}",
+    "postcss-loader"
+  ],
+  "fallback": "style-loader",
+  "publicPath": ""
+})
+      },
+      {
+        "include": [
+          path.join(process.cwd(), "node_modules/bootstrap/dist/css/bootstrap.min.css"),
+          path.join(process.cwd(), "src/styles.css")
+        ],
+        "test": /\.scss$|\.sass$/,
+        "loaders": ExtractTextPlugin.extract({
+  "use": [
+    "css-loader?{\"sourceMap\":false,\"importLoaders\":1}",
+    "postcss-loader",
+    "sass-loader"
+  ],
+  "fallback": "style-loader",
+  "publicPath": ""
+})
+      },
+      {
+        "include": [
+          path.join(process.cwd(), "node_modules/bootstrap/dist/css/bootstrap.min.css"),
+          path.join(process.cwd(), "src/styles.css")
+        ],
+        "test": /\.less$/,
+        "loaders": ExtractTextPlugin.extract({
+  "use": [
+    "css-loader?{\"sourceMap\":false,\"importLoaders\":1}",
+    "postcss-loader",
+    "less-loader"
+  ],
+  "fallback": "style-loader",
+  "publicPath": ""
+})
+      },
+      {
+        "include": [
+          path.join(process.cwd(), "node_modules/bootstrap/dist/css/bootstrap.min.css"),
+          path.join(process.cwd(), "src/styles.css")
+        ],
+        "test": /\.styl$/,
+        "loaders": ExtractTextPlugin.extract({
+  "use": [
+    "css-loader?{\"sourceMap\":false,\"importLoaders\":1}",
+    "postcss-loader",
+    "stylus-loader?{\"sourceMap\":false,\"paths\":[]}"
+  ],
+  "fallback": "style-loader",
+  "publicPath": ""
+})
+      },
+      {
+        "test": /\.ts$/,
+        "loader": "@ngtools/webpack"
+      }
+    ]
+  },
+  "plugins": [
+    new NoEmitOnErrorsPlugin(),
+    new CopyWebpackPlugin([{
+      context: path.resolve(__dirname, "src"),
+      from: "electron.js"
+    }]),
+    new GlobCopyWebpackPlugin({
+      "patterns": [
+        "assets"
+      ],
+      "globOptions": {
+        "cwd": "/home/dev0tion/Desktop/Breeze.UI/src",
+        "dot": true,
+        "ignore": "**/.gitkeep"
+      }
+    }),
+    new ProgressPlugin(),
+    new HtmlWebpackPlugin({
+      "template": "./src/index.html",
+      "filename": "./index.html",
+      "hash": false,
+      "inject": true,
+      "compile": true,
+      "favicon": false,
+      "minify": false,
+      "cache": true,
+      "showErrors": true,
+      "chunks": "all",
+      "excludeChunks": [],
+      "title": "Webpack App",
+      "xhtml": true,
+      "chunksSortMode": function sort(left, right) {
+        let leftIndex = entryPoints.indexOf(left.names[0]);
+        let rightindex = entryPoints.indexOf(right.names[0]);
+        if (leftIndex > rightindex) {
+            return 1;
+        }
+        else if (leftIndex < rightindex) {
+            return -1;
+        }
+        else {
+            return 0;
+        }
+    }
+    }),
+    new BaseHrefWebpackPlugin({}),
+    new CommonsChunkPlugin({
+      "name": "inline",
+      "minChunks": null
+    }),
+    new CommonsChunkPlugin({
+      "name": "vendor",
+      "minChunks": (module) => module.resource && module.resource.startsWith(nodeModules),
+      "chunks": [
+        "main"
+      ]
+    }),
+    new ExtractTextPlugin({
+      "filename": "[name].bundle.css",
+      "disable": true
+    }),
+    new LoaderOptionsPlugin({
+      "sourceMap": false,
+      "options": {
+        "postcss": [
+          autoprefixer(),
+          postcssUrl({"url": (URL) => {
+            // Only convert root relative URLs, which CSS-Loader won't process into require().
+            if (!URL.startsWith('/') || URL.startsWith('//')) {
+                return URL;
+            }
+            if (deployUrl.match(/:\/\//)) {
+                // If deployUrl contains a scheme, ignore baseHref use deployUrl as is.
+                return `${deployUrl.replace(/\/$/, '')}${URL}`;
+            }
+            else if (baseHref.match(/:\/\//)) {
+                // If baseHref contains a scheme, include it as is.
+                return baseHref.replace(/\/$/, '') +
+                    `/${deployUrl}/${URL}`.replace(/\/\/+/g, '/');
+            }
+            else {
+                // Join together base-href, deploy-url and the original URL.
+                // Also dedupe multiple slashes into single ones.
+                return `/${baseHref}/${deployUrl}/${URL}`.replace(/\/\/+/g, '/');
+            }
+        }})
+        ],
+        "sassLoader": {
+          "sourceMap": false,
+          "includePaths": []
+        },
+        "lessLoader": {
+          "sourceMap": false
+        },
+        "context": ""
+      }
+    }),
+    new AotPlugin({
+      "mainPath": "main.ts",
+      "hostReplacementPaths": {
+        "environments/environment.ts": "environments/environment.ts"
+      },
+      "exclude": [],
+      "tsConfigPath": "src/tsconfig.json",
+      "skipCodeGeneration": true
+    })
+  ],
+  "node": {
+    "fs": false,
+    "global": false,
+    "crypto": false,
+    "tls": false,
+    "net": false,
+    "process": false,
+    "module": false,
+    "clearImmediate": false,
+    "setImmediate": false,
+    "Buffer": false,
+    "__filename": false,
+    "__dirname": false
+  }
+};