restructuring, scripts for packaging releases

Author: Jordan Schroter

.eslintignore

@@ -1,7 +1,9 @@
 node_modules
 build
+cache
 lib
 dist
 webpack.*.js
 server.js
 build.js
+init.js

.gitignore

@@ -3,6 +3,7 @@ node_modules
 dist
 lib
 build
+cache
 .DS_Store
 *.log
 build.js

README.md

@@ -4,6 +4,4 @@ Boilerplate app for Electron with Redux
 - electron-compile for ES6/ES7 via babel
 - BrowserSync for livereload
 - Structure for redux/react app
-
-**TODO**
 - scripts for building cross-platform releases

client/actions/user.js app/client/actions/user.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { compose, createStore, combineReducers } from 'redux';
+import { devTools } from 'redux-devtools';
+import { Provider } from 'react-redux';
+import user from './reducers/user';
+import App from './containers/App';
+
+const isDevelopment = process.env.NODE_ENV === 'development';
+const appCreateStore = isDevelopment ? compose(devTools())(createStore) : createStore;
+const store = appCreateStore(combineReducers({ user }));
+const rootElement = document.querySelector(document.currentScript.getAttribute('data-container'));
+
+ReactDOM.render(
+  <div>
+    <Provider store={store}>
+      <App />
+    </Provider>
+    { isDevelopment && do {
+      const { DevTools, DebugPanel, LogMonitor } = require('redux-devtools/lib/react');
+      <DebugPanel top right bottom>
+        <DevTools store={store} monitor={LogMonitor} />
+      </DebugPanel>;
+    } }
+  </div>,
+  rootElement
+);

client/components/Login.js app/client/components/Login.js

@@ -2,7 +2,6 @@ import { handleActions } from 'redux-actions';
 
 export default handleActions({
   USER_LOGIN: (state, action) => {
-    console.log(state, action);
     return { ...state, ...action.payload };
   }
 }, {});

client/containers/App.js app/client/containers/App.js

@@ -18,7 +18,10 @@ app.on('ready', () => {
   mainWindow = new BrowserWindow({ width: 1200, height: 1000 });
 
   mainWindow.loadUrl(`file://${__dirname}/client/index.html`);
-  mainWindow.openDevTools();
+
+  if (process.env.NODE_ENV === 'development') {
+    mainWindow.openDevTools();
+  }
 
   mainWindow.on('closed', () => {
     mainWindow = null;

client/index.html app/client/index.html

@@ -1,3 +1,15 @@
-// TODO: precompile in prod, remove init?
-require('electron-compile').init();
-require('./main');
+var path = require('path');
+var cacheDir = path.join(__dirname, 'cache');
+
+if (process.env.NODE_ENV === 'development') {
+  require('electron-compile').initWithOptions({
+    cacheDir: cacheDir,
+    js: {
+      stage: 2
+    }
+  });
+} else {
+  require('electron-compile').initForProduction(cacheDir);
+}
+require('./app/main');
+

app/client/main.js

@@ -11,20 +11,22 @@
     "react-dom": "^0.14.0-rc1",
     "react-redux": "^2.1.2",
     "redux": "^3.0.0",
-    "redux-actions": "^0.8.0"
+    "redux-actions": "^0.8.0",
+    "electron-compile": "^0.9.2",
+    "redux-devtools": "^2.1.2"
   },
   "devDependencies": {
     "babel": "^5.8.23",
     "babel-eslint": "^4.1.1",
     "browser-sync": "^2.9.3",
-    "electron-compile": "^0.9.2",
+    "electron-packager": "^5.1.0",
     "electron-prebuilt": "^0.32.2",
     "eslint": "^1.4.1",
     "eslint-config-airbnb": "0.0.8",
-    "eslint-plugin-react": "^3.3.2",
-    "redux-devtools": "^2.1.2"
+    "eslint-plugin-react": "^3.3.2"
   },
   "scripts": {
-    "start": "node node_modules/babel/bin/babel-node.js scripts/serve.js"
+    "serve": "node node_modules/babel/bin/babel-node.js scripts/serve.js",
+    "pack": "node node_modules/babel/bin/babel-node.js scripts/pack.js"
   }
 }

client/reducers/user.js app/client/reducers/user.js

@@ -0,0 +1,41 @@
+import fs from 'fs';
+import path from 'path';
+import packager from 'electron-packager';
+// elctron-compile api not setup for es6 modules, need to use require;
+const compiler = require('electron-compile');
+
+const paths = {
+  packageJson: path.join(__dirname, '../package.json'),
+  cache: path.join(__dirname, '../cache')
+};
+
+const packageJson = JSON.parse(fs.readFileSync(paths.packageJson, 'utf8'));
+const nodeModuleIgnores = [
+  'electron-compile/node_modules/electron-compilers',
+  // devDependencies are ignored by default but explicity ignoring them
+  // seems to speed up packaging
+  ...Object.keys(packageJson.devDependencies),
+];
+
+compiler.init(paths.cache);
+compiler.compileAll('app');
+fs.writeFileSync(
+  path.join(paths.cache, 'settings.json'),
+  JSON.stringify(compiler.collectCompilerInformation())
+);
+
+packager({
+  dir: '.',
+  name: packageJson.name,
+  platform: 'darwin',
+  arch: 'x64',
+  version: '0.32.2',
+  overwrite: true,
+  prune: true,
+  ignore: new RegExp(`node_modules/(${nodeModuleIgnores.join('|')})`),
+  // asar: true,
+  out: 'dist'
+}, (err, appPath) => {
+  if (err) return console.error(err);
+  console.log(appPath);
+});