v0.11.1 (#941)

* [WIP] Route-based code splitting (#884) * Upgrading to React Router v4, using react-router-redux@next Refactoring routes.js to use Switch store now export history renamed router reducer switch to react-router-dom * Adding code-splitting at route level * Fix flow warnings * Fix Typo during eslint no-shadow fix * More flow fixes... * Even more Flow checking * Switching to babel preset dynamic import webpack * Fixing CounterPage spec * Route-based code splitting * Updated all deps * Updated flow types * Fix npm start and npm run dev (#901) * should fix npm start and npm run dev * change back to warn about the global requires * makes flow happy * flow again use Children, passes npm run lint locally * flow again use any so we only get a warning * flow disable children * Updated deps * Cleaned up code style, removed unnecessary eslint supressions * Removed flow children disabled line * Added HtmlWebpackPlugin (#916) * Fixed HMR (disabled multiStep) (#920) * Fixed HMR * Commented multiPass instead of removing * Updated CHANGELOG (#923) * Updated changelog * Added more notable changes [ci skip] * Added support for Webpack Bundle Analyzer (#922) * Added webpack bundle analyzer to CHANGELOG [ci skip] * Bump package.json version [ci skip] * Bump flow-bin [ci skip] * Fixed hot-reload refresh url * Bumped electron * Added Initial Jest Snapshot Testing Support (#928) * Updated CHANGELOG date [ci skip] s * Revert "Added HtmlWebpackPlugin (#916)" This reverts commit f36e9d26791d2c2389187cbdb9647f7335578516. * Second attempt fix of script race condition * Fixed flow-typed Overwrite (#940) * Release 0.11.0 (#921) * [WIP] Route-based code splitting (#884) * Upgrading to React Router v4, using react-router-redux@next Refactoring routes.js to use Switch store now export history renamed router reducer switch to react-router-dom * Adding code-splitting at route level * Fix flow warnings * Fix Typo during eslint no-shadow fix * More flow fixes... * Even more Flow checking * Switching to babel preset dynamic import webpack * Fixing CounterPage spec * Route-based code splitting * Updated all deps * Updated flow types * Fix npm start and npm run dev (#901) * should fix npm start and npm run dev * change back to warn about the global requires * makes flow happy * flow again use Children, passes npm run lint locally * flow again use any so we only get a warning * flow disable children * Updated deps * Cleaned up code style, removed unnecessary eslint supressions * Removed flow children disabled line * Added HtmlWebpackPlugin (#916) * Fixed HMR (disabled multiStep) (#920) * Fixed HMR * Commented multiPass instead of removing * Updated CHANGELOG (#923) * Updated changelog * Added more notable changes [ci skip] * Added support for Webpack Bundle Analyzer (#922) * Added webpack bundle analyzer to CHANGELOG [ci skip] * Bump package.json version [ci skip] * Bump flow-bin [ci skip] * Fixed hot-reload refresh url * Bumped electron * Added Initial Jest Snapshot Testing Support (#928) * Updated CHANGELOG date [ci skip] s * Update package.json * Added temporary hack to fix flow-typed * Updated repo badge to reflect github releases * Fixed unexpected merge override of changes * Added support for debugging prod build, fixed prod styles, updated deps * Updated CHANGELOG [ci skip] * Used hash history instead of html5 router to fix route resolution
lsp19880926 · Apr 23, 2017 · 585b4f4 · 585b4f4
1 parent 6941f41
commit 585b4f4
Show file tree

Hide file tree

Showing 11 changed files with 337 additions and 316 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,21 @@
+# 0.11.1 (2017.4.23)
+
+You can now debug the production build with devtools like so:
+```
+DEBUG_PROD=true npm run package
+```
+
+🎉🎉🎉
+
+#### Additions
+- **Added support for debugging production build:** [#fab245a](https://github.com/chentsulin/electron-react-boilerplate/pull/941/commits/fab245a077d02a09630f74270806c0c534a4ff95)
+
+#### Bug Fixes
+- **Fixed bug related to importing native dependencies:** [#933](https://github.com/chentsulin/electron-react-boilerplate/pull/933)
+
+#### Improvements
+- **Updated all deps to latest semver**
+
 # 0.11.0 (2017.4.19)
 
 Here's the most notable changes since `v0.10.0`. Its been about a year since a release has been pushed. Expect a new release to be published every 3-4 weeks.

diff --git a/README.md b/README.md
@@ -7,7 +7,7 @@
 [![Build Status][travis-image]][travis-url]
 [![Appveyor Build Status][appveyor-image]][appveyor-url]
 [![Dependency Status][david_img]][david_site]
-[![NPM version][npm-image]][npm-url]
+[![Github Tag][github-tag-image]][github-tag-url]
 [![Join the chat at https://gitter.im/electron-react-boilerplate/Lobby](https://badges.gitter.im/electron-react-boilerplate/Lobby.svg)](https://gitter.im/electron-react-boilerplate/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 [![OpenCollective](https://opencollective.com/electron-react-boilerplate/backers/badge.svg)](#backers)
 [![OpenCollective](https://opencollective.com/electron-react-boilerplate/sponsors/badge.svg)](#sponsors)
@@ -121,6 +121,10 @@ $ UPGRADE_EXTENSIONS=1 npm run dev
 $ set UPGRADE_EXTENSIONS=1 && npm run dev
 ```
 
+:bulb: You can debug your production build with devtools by simply setting the `DEBUG_PROD` env variable:
+```
+DEBUG_PROD=true npm run package
+```
 
 
 ## CSS Modules
@@ -302,7 +306,8 @@ Become a sponsor and get your logo on our README on Github with a link to your s
 MIT © [C. T. Lin](https://github.com/chentsulin)
 
 [npm-image]: https://img.shields.io/npm/v/electron-react-boilerplate.svg?style=flat-square
-[npm-url]: https://npmjs.org/package/electron-react-boilerplate
+[github-tag-image]: https://img.shields.io/github/tag/chentsulin/electron-react-boilerplate.svg
+[github-tag-url]: https://github.com/chentsulin/electron-react-boilerplate/releases/latest
 [travis-image]: https://travis-ci.org/chentsulin/electron-react-boilerplate.svg?branch=master
 [travis-url]: https://travis-ci.org/chentsulin/electron-react-boilerplate
 [appveyor-image]: https://ci.appveyor.com/api/projects/status/github/chentsulin/electron-react-boilerplate?svg=true

diff --git a/app/app.html b/app/app.html
@@ -3,11 +3,44 @@
   <head>
     <meta charset="utf-8">
     <title>Hello Electron React!</title>
+    <script>
+      (function() {
+        if (!process.env.HOT) {
+          const link = document.createElement('link');
+          link.rel = 'stylesheet';
+          link.href = './dist/style.css';
+          // HACK: Writing the script path should be done with webpack
+          document.getElementsByTagName('head')[0].appendChild(link);
+        }
+      }());
+    </script>
   </head>
   <body>
     <div id="root"></div>
-    <% if (htmlWebpackPlugin.options.dll) { %>
-    <script src="<%= htmlWebpackPlugin.options.dll %>"></script>
-    <% } %>
+    <script>
+      {
+        const scripts = [];
+
+        // Dynamically insert the DLL script in development env in the
+        // renderer process
+        if (process.env.NODE_ENV === 'development') {
+          scripts.push('../dll/vendor.dll.js');
+        }
+
+        // Dynamically insert the bundled app script in the renderer process
+        const port = process.env.PORT || 1212;
+        scripts.push(
+          (process.env.HOT)
+            ? 'http://localhost:' + port + '/dist/bundle.js'
+            : './dist/bundle.js'
+        );
+
+        document.write(
+          scripts
+            .map(script => '<script defer src="' + script + '"><\/script>')
+            .join('')
+        );
+      }
+    </script>
   </body>
 </html>
diff --git a/app/main.development.js b/app/main.development.js
@@ -10,7 +10,7 @@ if (process.env.NODE_ENV === 'production') {
   sourceMapSupport.install();
 }
 
-if (process.env.NODE_ENV === 'development') {
+if (process.env.NODE_ENV === 'development' || process.env.DEBUG_PROD === 'true') {
   require('electron-debug')();
   const path = require('path');
   const p = path.join(__dirname, '..', 'app', 'node_modules');
@@ -41,7 +41,7 @@ app.on('window-all-closed', () => {
 
 
 app.on('ready', async () => {
-  if (process.env.NODE_ENV === 'development') {
+  if (process.env.NODE_ENV === 'development' || process.env.DEBUG_PROD === 'true') {
     await installExtensions();
   }
 
@@ -51,10 +51,7 @@ app.on('ready', async () => {
     height: 728
   });
 
-  const url = (process.env.NODE_ENV === 'development')
-    ? `http://localhost:${process.env.PORT || 1212}/dist/app.html`
-    : `file://${__dirname}/dist/app.html`;
-  mainWindow.loadURL(url);
+  mainWindow.loadURL(`file://${__dirname}/app.html`);
 
   // @TODO: Use 'ready-to-show' event
   //        https://github.com/electron/electron/blob/master/docs/api/browser-window.md#using-ready-to-show-event

diff --git a/app/menu.js b/app/menu.js
@@ -9,7 +9,7 @@ export default class MenuBuilder {
   }
 
   buildMenu() {
-    if (process.env.NODE_ENV === 'development') {
+    if (process.env.NODE_ENV === 'development' || process.env.DEBUG_PROD === 'true') {
       this.setupDevelopmentEnvironment();
     }
 

diff --git a/app/routes.js b/app/routes.js
@@ -1,6 +1,6 @@
 /* eslint flowtype-errors/show-errors: 0 */
 import React from 'react';
-import { BrowserRouter as Router } from 'react-router-dom';
+import { HashRouter as Router } from 'react-router-dom';
 import { Switch, Route } from 'react-router';
 import App from './containers/App';
 import HomePage from './containers/HomePage';

diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
   "main": "main.js",
   "scripts": {
     "test": "cross-env NODE_ENV=test BABEL_DISABLE_CACHE=1 node --trace-warnings ./test/runTests.js",
-    "test-all": "npm run lint && npm run flow && npm run test && npm run build",
+    "test-all": "npm run lint && npm run flow && npm run test && npm run build && npm run test-e2e",
     "test-watch": "npm test -- --watch",
     "test-e2e": "cross-env NODE_ENV=test BABEL_DISABLE_CACHE=1 node --trace-warnings ./test/runTests.js e2e",
     "lint": "eslint --cache --format=node_modules/eslint-formatter-pretty .",
@@ -20,7 +20,7 @@
     "start": "cross-env NODE_ENV=production electron ./app/",
     "prestart": "npm run build",
     "flow": "flow",
-    "flow-typed": "flow-typed install --overwrite",
+    "flow-typed": "rm -rf flow-typed && flow-typed install --overwrite || true",
     "start-hot-renderer": "cross-env HOT=1 NODE_ENV=development electron -r babel-register -r babel-polyfill ./app/main.development",
     "postinstall": "concurrently \"npm run flow-typed\" \"npm run build-dll\" \"install-app-deps\" \"node node_modules/fbjs-scripts/node/check-dev-engines.js package.json\"",
     "dev": "cross-env START_HOT=1 npm run hot-updates-server",
@@ -116,9 +116,9 @@
   "devDependencies": {
     "asar": "^0.13.0",
     "babel-core": "^6.24.1",
-    "babel-eslint": "^7.2.2",
+    "babel-eslint": "^7.2.3",
     "babel-jest": "^19.0.0",
-    "babel-loader": "^6.4.1",
+    "babel-loader": "^7.0.0",
     "babel-plugin-add-module-exports": "^0.2.1",
     "babel-plugin-dev-expression": "^0.2.1",
     "babel-plugin-dynamic-import-webpack": "^1.0.1",
@@ -149,7 +149,7 @@
     "eslint-formatter-pretty": "^1.1.0",
     "eslint-import-resolver-webpack": "^0.8.1",
     "eslint-plugin-compat": "^1.0.2",
-    "eslint-plugin-flowtype": "^2.31.0",
+    "eslint-plugin-flowtype": "^2.32.1",
     "eslint-plugin-flowtype-errors": "^3.0.3",
     "eslint-plugin-import": "^2.2.0",
     "eslint-plugin-jest": "^19.0.1",
@@ -161,7 +161,7 @@
     "file-loader": "^0.11.1",
     "flow-bin": "^0.44.2",
     "flow-runtime": "^0.10.0",
-    "flow-typed": "^2.0.0",
+    "flow-typed": "^2.1.1",
     "html-webpack-plugin": "^2.28.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^19.0.2",
@@ -173,14 +173,14 @@
     "redux-logger": "^3.0.1",
     "sass-loader": "^6.0.3",
     "sinon": "^2.1.0",
-    "spectron": "^3.6.1",
+    "spectron": "^3.6.2",
     "style-loader": "^0.16.1",
     "stylelint": "^7.10.1",
     "stylelint-config-standard": "^16.0.0",
     "url-loader": "^0.5.8",
     "webpack": "^2.4.1",
     "webpack-bundle-analyzer": "^2.4.0",
-    "webpack-dev-server": "^2.4.2",
+    "webpack-dev-server": "^2.4.3",
     "webpack-merge": "^4.1.0"
   },
   "dependencies": {

diff --git a/webpack.config.main.prod.js b/webpack.config.main.prod.js
@@ -42,7 +42,8 @@ export default merge.smart(baseConfig, {
      * development checks
      */
     new webpack.DefinePlugin({
-      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production')
+      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production'),
+      'process.env.DEBUG_PROD': JSON.stringify(process.env.DEBUG_PROD || 'false')
     })
   ],
 

diff --git a/webpack.config.renderer.dev.js b/webpack.config.renderer.dev.js
@@ -12,10 +12,8 @@ import fs from 'fs';
 import webpack from 'webpack';
 import chalk from 'chalk';
 import merge from 'webpack-merge';
-import express from 'express';
 import { spawn, execSync } from 'child_process';
 import ExtractTextPlugin from 'extract-text-webpack-plugin';
-import HtmlWebpackPlugin from 'html-webpack-plugin';
 import baseConfig from './webpack.config.base';
 
 const port = process.env.PORT || 1212;
@@ -218,15 +216,6 @@ export default merge.smart(baseConfig, {
     new ExtractTextPlugin({
       filename: '[name].css'
     }),
-
-    /**
-     * Dynamically generate index.html page
-     */
-    new HtmlWebpackPlugin({
-      filename: 'app.html',
-      template: 'app/app.html',
-      dll: `${publicPath}/dll/vendor.dll.js`
-    })
   ],
 
   devServer: {
@@ -246,12 +235,9 @@ export default merge.smart(baseConfig, {
     },
     historyApiFallback: {
       verbose: true,
-      rewrites: [{ from: /./, to: '/dist/app.html' }],
       disableDotRule: false,
     },
-    setup(app) {
-      app.use('/dist/dll/', express.static(dll));
-
+    setup() {
       if (process.env.START_HOT) {
         spawn(
           'npm',

diff --git a/webpack.config.renderer.prod.js b/webpack.config.renderer.prod.js
@@ -7,7 +7,6 @@ import webpack from 'webpack';
 import ExtractTextPlugin from 'extract-text-webpack-plugin';
 import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
 import merge from 'webpack-merge';
-import HtmlWebpackPlugin from 'html-webpack-plugin';
 import BabiliPlugin from 'babili-webpack-plugin';
 import baseConfig from './webpack.config.base';
 
@@ -161,13 +160,5 @@ export default merge.smart(baseConfig, {
       analyzerMode: process.env.OPEN_ANALYZER === 'true' ? 'server' : 'disabled',
       openAnalyzer: process.env.OPEN_ANALYZER === 'true'
     }),
-
-    /**
-     * Dynamically generate index.html page
-     */
-    new HtmlWebpackPlugin({
-      filename: 'app.html',
-      template: 'app/app.html'
-    })
   ],
 });