Merge pull request #440 from zeevl/electron-builder

Use electron-builder, continued
answershuto · Oct 30, 2016 · 02cadc5 · 02cadc5
2 parents dce2082 + 2edeb9f
commit 02cadc5
Show file tree

Hide file tree

Showing 26 changed files with 1,276 additions and 1,249 deletions.
diff --git a/.eslintignore b/.eslintignore
diff --git a/.gitignore b/.gitignore
@@ -25,12 +25,16 @@ build/Release
 # Dependency directory
 # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
 node_modules
+app/node_modules
 
 # OSX
 .DS_Store
 
 # App packaged
-dist
 release
-main.js
-main.js.map
+app/main.js
+app/main.js.map
+app/bundle.js
+app/bundle.js.map
+app/style.css
+app/style.css.map
diff --git a/README.md b/README.md
@@ -130,14 +130,19 @@ If you need global styles, stylesheets with `.global.css` will not go through th
 css-modules loader. e.g. `app.global.css`
 
 
-## Package
+## Packaging
+
+To package apps for the local platform:
 
 ```bash
 $ npm run package
 ```
 
 To package apps for all platforms:
 
+First, refer to [Multi Platform Build](https://github.com/electron-userland/electron-builder/wiki/Multi-Platform-Build) for dependencies.
+
+Then,
 ```bash
 $ npm run package-all
 ```
@@ -150,25 +155,16 @@ $ npm run package -- --[option]
 
 #### Options
 
-- --name, -n: Application name (default: ElectronReact)
-- --version, -v: Electron version (default: latest version)
-- --asar, -a: [asar](https://github.com/atom/asar) support (default: false)
-- --icon, -i: Application icon
-- --all: pack for all platforms
-
-Use `electron-packager` to pack your app with `--all` options for darwin (osx), linux and win32 (windows) platform. After build, you will find them in `release` folder. Otherwise, you will only find one for your os.
-
-`test`, `tools`, `release` folder and devDependencies in `package.json` will be ignored by default.
-
-#### Default Ignore modules
+See [electron-builder CLI Usage](https://github.com/electron-userland/electron-builder#cli-usage)
 
-We add some module's `peerDependencies` to ignore option as default for application size reduction.
+#### Module Structure
 
-- `babel-core` is required by `babel-loader` and its size is ~19 MB
-- `node-libs-browser` is required by `webpack` and its size is ~3MB.
-
-> **Note:** If you want to use any above modules in runtime, for example: `require('babel/register')`, you should move them from `devDependencies` to `dependencies`.
+This boilerplate uses a [two package.json structure](https://github.com/electron-userland/electron-builder#two-packagejson-structure).
 
+#### Building windows apps from non-windows platforms
+1. If the module is native to a platform or otherwise should be included with the published package (i.e. bootstrap, openbci), it should be listed under `dependencies` in `./app/package.json`.
+2. If a module is `import`ed by another module, include it in `dependencies` in `./package.json`.   See [this ESLint rule](https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-extraneous-dependencies.md)
+3. Otherwise, modules used for building, testing and debugging should be included in `devDependencies` in `./package.json`.
 
 ## Static Type Checking
 This project comes with Flow support out of the box! You can annotate your code with types, [get Flow errors as ESLint errors](https://github.com/amilajack/eslint-plugin-flowtype-errors), and get [type errors during runtime](https://github.com/gcanti/babel-plugin-tcomb-boilerplate) during development. Types are completely optional.
@@ -177,10 +173,6 @@ This project comes with Flow support out of the box! You can annotate your code
 
 If you want to have native-like User Interface (OS X El Capitan and Windows 10), [react-desktop](https://github.com/gabrielbull/react-desktop) may perfect suit for you.
 
-#### Building windows apps from non-windows platforms
-
-Please checkout [Building windows apps from non-windows platforms](https://github.com/maxogden/electron-packager#building-windows-apps-from-non-windows-platforms).
-
 ## Dispatching redux actions from main process
 
 see discusses in [#118](https://github.com/chentsulin/electron-react-boilerplate/issues/118) and [#108](https://github.com/chentsulin/electron-react-boilerplate/issues/108)

diff --git a/app/app.html b/app/app.html
@@ -3,23 +3,27 @@
   <head>
     <meta charset="utf-8">
     <title>Hello Electron React!</title>
-    <link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.min.css" />
+    <link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css" />
+
     <script>
-      if (!process.env.HOT) {
-        const link = document.createElement('link');
-        link.rel = 'stylesheet';
-        link.href = '../dist/style.css';
-        document.write(link.outerHTML);
-      }
+      (function() {
+        if (!process.env.HOT) {
+          const link = document.createElement('link');
+          link.rel = 'stylesheet';
+          link.href = './style.css';
+          document.write(link.outerHTML);
+        }
+      }());
     </script>
   </head>
   <body>
     <div id="root"></div>
     <script>
       {
         const script = document.createElement('script');
-        const port = process.env.PORT || 3000;
-        script.src = (process.env.HOT) ? `http://localhost:${port}/dist/bundle.js` : '../dist/bundle.js';
+        script.src = (process.env.HOT)
+          ? `http://localhost:3000/dist/bundle.js`
+          : './bundle.js';
         document.write(script.outerHTML);
       }
     </script>

diff --git a/main.development.js → app/main.development.js b/main.development.js → app/main.development.js
@@ -4,12 +4,18 @@ let menu;
 let template;
 let mainWindow = null;
 
+if (process.env.NODE_ENV === 'production') {
+  const sourceMapSupport = require('source-map-support'); // eslint-disable-line
+  sourceMapSupport.install();
+}
 
 if (process.env.NODE_ENV === 'development') {
   require('electron-debug')(); // eslint-disable-line global-require
+  const path = require('path'); // eslint-disable-line
+  const p = path.join(__dirname, '..', 'app', 'node_modules'); // eslint-disable-line
+  require('module').globalPaths.push(p); // eslint-disable-line
 }
 
-
 app.on('window-all-closed', () => {
   if (process.platform !== 'darwin') app.quit();
 });
@@ -41,7 +47,7 @@ app.on('ready', async () => {
     height: 728
   });
 
-  mainWindow.loadURL(`file://${__dirname}/app/app.html`);
+  mainWindow.loadURL(`file://${__dirname}/app.html`);
 
   mainWindow.webContents.on('did-finish-load', () => {
     mainWindow.show();

diff --git a/app/package.json b/app/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "electron-react-boilerplate",
+  "productName": "electron-react-boilerplate",
+  "version": "1.0.0",
+  "description": "Electron application boilerplate based on React, React Router, Webpack, React Hot Loader for rapid application development",
+  "main": "./main.js",
+  "author": {
+    "name": "C. T. Lin",
+    "email": "[email protected]",
+    "url": "https://github.com/chentsulin"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "font-awesome": "^4.6.3",
+    "source-map-support": "^0.4.3"
+  }
+}
diff --git a/package.js b/package.js