ref/ electron builder two packages build

Author: maximegris

.gitignore

@@ -12,10 +12,10 @@ src/**/*.js
 *.js.map
 
 # dependencies
-/node_modules
+node_modules
 
 # IDEs and editors
-/.idea
+.idea
 .project
 .classpath
 .c9/

README.md

@@ -48,7 +48,6 @@ npm install
 
 There is an issue with `yarn` and `node_modules` when the application is built by the packager. Please use `npm` as dependencies manager.
 
-
 If you want to generate Angular components with Angular-cli , you **MUST** install `@angular/cli` in npm global context.
 Please follow [Angular-cli documentation](https://github.com/angular/angular-cli) if you had installed a previous version of `angular-cli`.
 
@@ -62,17 +61,26 @@ npm install -g @angular/cli
 
 Voila! You can use your Angular + Electron app in a local development environment with hot reload!
 
-The application code is managed by `main.ts`. In this sample, the app runs with a simple Angular App (http://localhost:4200) and an Electron window.
-The Angular component contains an example of Electron and NodeJS native lib import.
-You can disable "Developer Tools" by commenting `win.webContents.openDevTools();` in `main.ts`.
+The application code is managed by `app/main.ts`. In this sample, the app runs with a simple Angular App (http://localhost:4200), and an Electron window. \
+The Angular component contains an example of Electron and NodeJS native lib import. \
+You can disable "Developer Tools" by commenting `win.webContents.openDevTools();` in `app/main.ts`.
+
+## Project structure
+
+|Folder|Description|
+| ---- | ---- |
+| app | Electron main process folder (NodeJS) |
+| src | Electron renderer process folder (Web / Angular) |
 
 ## Use Electron / NodeJS libraries
 
-This sample project runs in both modes (web and electron). To make this work, **you have to import your dependencies the right way**. Please check `providers/electron.service.ts` to watch how conditional import of libraries has to be done when using electron / NodeJS / 3rd party libraries in renderer context (i.e. Angular).
+3rd party libraries used in electron's main process (like an ORM) have to be added in `dependencies` of `app/package.json`.
+This sample project runs in both modes (web and electron). To make this work, **you have to import your dependencies the right way**. \
 
 ## Use "web" 3rd party libraries (like angular, material, bootstrap, ...)
 
-3rd party librairies used in electron's renderer process (like angular) have to be added in `devDependencies` of `package.json`. They are already added in your final package during webpack's compilation phase. Otherwise it will significantly increase the size of your final package... not so cool :(
+3rd party libraries used in electron's renderer process (like angular) have to be added in `dependencies` of `package.json`. \
+Please check `providers/electron.service.ts` to watch how conditional import of libraries has to be done when using NodeJS / 3rd party libraries in renderer context (i.e. Angular).
 
 ## Browser mode
 
@@ -88,11 +96,13 @@ Maybe you only want to execute the application in the browser with hot reload? J
 |`npm run electron:local`| Builds your application and start electron
 |`npm run electron:build`| Builds your application and creates an app consumable based on your operating system |
 
-**Your application is optimised. Only /dist folder and node dependencies are included in the executable.**
+**Your application is optimised. Only /dist folder and NodeJS dependencies are included in the final bundle.**
 
 ## You want to use a specific lib (like rxjs) in electron main thread ?
 
-YES! You can do it! Just by importing your library in npm dependencies section (not **devDependencies**) with `npm install --save`. It will be loaded by electron during build phase and added to your final package. Then use your library by importing it in `main.ts` file. Quite simple, isn't it?
+YES! You can do it! Just by importing your library in npm dependencies section of `app/package.json` with `npm install --save XXXXX`. \
+It will be loaded by electron during build phase and added to your final bundle. \
+Then use your library by importing it in `app/main.ts` file. Quite simple, isn't it?
 
 ## E2E Testing
 

angular.json

@@ -30,7 +30,7 @@
           "configurations": {
             "dev": {
               "optimization": false,
-              "outputHashing": "all",
+              "outputHashing": "none",
               "sourceMap": true,
               "namedChunks": false,
               "aot": false,
@@ -46,7 +46,7 @@
             },
             "web": {
               "optimization": false,
-              "outputHashing": "all",
+              "outputHashing": "none",
               "sourceMap": true,
               "namedChunks": false,
               "aot": false,
@@ -126,7 +126,7 @@
             "eslintConfig": ".eslintrc.json",
             "lintFilePatterns": [
               "src/**/*.ts",
-              "main.ts"
+              "app/**.ts"
             ]
           }
         }

main.ts renamed to app/main.ts

@@ -2,6 +2,10 @@ import { app, BrowserWindow, screen } from 'electron';
 import * as path from 'path';
 import * as url from 'url';
 
+const pad = require('pad');
+
+console.log(pad('pad', 5));
+
 // Initialize remote module
 require('@electron/remote/main').initialize();
 
@@ -33,13 +37,13 @@ function createWindow(): BrowserWindow {
     win.webContents.openDevTools();
 
     require('electron-reload')(__dirname, {
-      electron: require(`${__dirname}/node_modules/electron`)
+      electron: require(`${__dirname}/../node_modules/electron`)
     });
     win.loadURL('http://localhost:4200');
 
   } else {
     win.loadURL(url.format({
-      pathname: path.join(__dirname, 'dist/index.html'),
+      pathname: path.join(__dirname, '../dist/index.html'),
       protocol: 'file:',
       slashes: true
     }));

app/package-lock.json

@@ -0,0 +1,10 @@
+{
+  "name": "angular-electron",
+  "version": "10.0.0",
+  "main": "main.js",
+  "private": true,
+  "dependencies": {
+    "@electron/remote": "1.0.4",
+    "pad": "3.2.0"
+  }
+}

app/package.json

@@ -1,43 +1,42 @@
 {
-  "productName": "angular-electron",
   "directories": {
     "output": "release/"
   },
   "files": [
     "**/*",
     "!**/*.ts",
-    "!.github",
-    "!.vscode",
-    "!.code-workspace",
-    "!.npmrc",
-    "!*.md",
+    "!*.map",
     "!package.json",
-    "!package-lock.json",
-    "!src/",
-    "!e2e/",
-    "!hooks/",
-    "!_config.yml",
-    "!angular.json",
-    "!tsconfig*.json",
-    "!tslint.json",
-    "!.eslintrc.json",
-    "!karma.conf.js",
-    "!angular.webpack.js",
-    "!*.map"
+    "!package-lock.json"
+  ],
+  "extraResources": [
+    {
+      "from": "dist",
+      "to": "dist",
+      "filter": [
+        "**/*"
+      ]
+    }
   ],
   "win": {
     "icon": "dist/assets/icons",
-    "target": ["portable"]
+    "target": [
+      "portable"
+    ]
   },
   "portable": {
     "splashImage": "dist/assets/icons/electron.bmp"
   },
   "mac": {
     "icon": "dist/assets/icons",
-    "target": ["dmg"]
+    "target": [
+      "dmg"
+    ]
   },
   "linux": {
     "icon": "dist/assets/icons",
-    "target": ["AppImage"]
+    "target": [
+      "AppImage"
+    ]
   }
 }