Commit 739aa7fe authored by Pieterjan Vanhoof's avatar Pieterjan Vanhoof Committed by GitHub

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
parents 423ca121 a9236b50
{
"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",
......
{
"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"
}
}
......@@ -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);
}
}
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"})
mainWindow = new BrowserWindow({width: 1000, height: 600, frame: true, minWidth: 1000, minHeight: 600, icon: "./assets/images/stratis-tray.png"})
if (process.env.DEBUG === 'false'){
// and load the index.html of the app.
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.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([{
......
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()
})
}
......@@ -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>
......
......@@ -6,7 +6,10 @@
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [ "es2015", "dom" ],
"lib": [
"es2015",
"dom"
],
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
},
......
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
}
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment