chore: fix and improve the build system

- Webpack is used to build both main and renderer code
- use `webpack-node-externals` to avoid bundling node modules
- New cleaner directory structure

.babelrc

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    [
+      "@babel/env",
+      {
+        "targets": {
+          "browsers": "last 2 Chrome versions",
+          "node": "current"
+        }
+      }
+    ]
+  ],
+  "plugins": [["transform-object-rest-spread", { "useBuiltIns": true }]]
+}

.editorconfig

@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.gitignore

@@ -1,33 +1,12 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-lerna-debug.log
-yarn-debug.log*
-yarn-error.log*
-
-# Build
 node_modules
-build
-dist
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# VS Code files
-.vscode
-
-# Yarn Integrity file
-.yarn-integrity
-
-# OS files
 .DS_Store
-._*
 Thumbs.db
+*.log
+
+/dist
+/temp
 
-dist
-src/package
-src/*.tgz
+# ignore everything in 'app' folder what had been generated from 'src' folder
+/app/app.js
+/app/background.js
+/app/**/*.map

README.md

@@ -9,6 +9,8 @@ https://github.com/pastahito/electron-react-webpack
 
 ## Work Items
 
+* build
+  - generate `index.html` in the app folder with the Webpack HTML plugin
 * redux
   - add ES6 support to main process
   - there TODOs here related to setting status and error messages related to running Ace

build/start.js

@@ -0,0 +1,20 @@
+const childProcess = require("child_process");
+const electron = require("electron");
+const webpack = require("webpack");
+const config = require("./webpack.app.config");
+
+const env = "development";
+const compiler = webpack(config(env));
+let electronStarted = false;
+
+const watching = compiler.watch({}, (err, stats) => {
+  if (!err && !stats.hasErrors() && !electronStarted) {
+    electronStarted = true;
+
+    childProcess
+      .spawn(electron, ["."], { stdio: "inherit" })
+      .on("close", () => {
+        watching.close();
+      });
+  }
+});

build/webpack.app.config.js

@@ -0,0 +1,16 @@
+const path = require("path");
+const merge = require("webpack-merge");
+const base = require("./webpack.base.config");
+
+module.exports = env => {
+  return merge(base(env), {
+    entry: {
+      background: "./src/main/main.js",
+      app: "./src/renderer/app.js"
+    },
+    output: {
+      filename: "[name].js",
+      path: path.resolve(__dirname, "../app")
+    }
+  });
+};

build/webpack.base.config.js

@@ -0,0 +1,63 @@
+const path = require("path");
+const nodeExternals = require("webpack-node-externals");
+const FriendlyErrorsWebpackPlugin = require("friendly-errors-webpack-plugin");
+
+const translateEnvToMode = (env) => {
+  if (env === "production") {
+    return "production";
+  }
+  return "development";
+};
+
+module.exports = env => {
+  return {
+    target: "electron-renderer",
+    mode: translateEnvToMode(env),
+    node: {
+      __dirname: false,
+      __filename: false
+    },
+    externals: [nodeExternals()],
+    resolve: {
+      alias: {
+        env: path.resolve(__dirname, `../config/env_${env}.json`)
+      }
+    },
+    devtool: "source-map",
+    module: {
+      rules: [
+        {
+          test: /\.js$/,
+          exclude: /node_modules/,
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env', '@babel/preset-react'],
+            plugins: ["transform-class-properties"]
+          }
+        },
+        {
+          test: /\.scss$/,
+          loaders: [
+            'style-loader',// inserts raw css into styles elements.
+            'css-loader', // css-loader parses css files resolves url() expressions.
+            'sass-loader' // sass-loader for sass compilation
+          ]
+        },
+        {
+          test: /\.css$/,
+          use: ["style-loader", "css-loader"]
+        },
+        {
+          test: /\.(png|jpg|gif|svg)$/,
+          loader: 'file-loader',
+          options: {
+            name: '[name].[ext]'
+          }
+        }
+      ]
+    },
+    plugins: [
+      new FriendlyErrorsWebpackPlugin({ clearConsole: env === "development" })
+    ]
+  };
+};

config/env_development.json

@@ -0,0 +1,4 @@
+{
+  "name": "development",
+  "description": "Config for the development environment"
+}

config/env_production.json

@@ -0,0 +1,4 @@
+{
+  "name": "production",
+  "description": "Config for the production environment"
+}

config/env_test.json

@@ -0,0 +1,4 @@
+{
+  "name": "test",
+  "description": "Config for the test environment"
+}

package.json

@@ -0,0 +1,65 @@
+{
+  "name": "ace-gui",
+  "productName": "Ace, by DAISY",
+  "description": "Ace is the EPUB accessibility checker by the DAISY Consortium (desktop application)",
+  "version": "1.0.0-alpha.0",
+  "author": "DAISY Consortium",
+  "homepage": "http://daisy.github.io/ace",
+  "repository": "daisy/ace-gui",
+  "license": "MIT",
+  "main": "app/background.js",
+  "build": {
+    "appId": "org.daisy.ace",
+    "mac": {
+      "category": "my.category"
+    },
+    "asar": "false"
+  },
+  "scripts": {
+    "clean": "rimraf dist && rimraf app/app.js && && rimraf app/background.js",
+    "dist": "webpack --config=build/webpack.app.config.js --env=production && electron-builder",
+    "build": "echo TODO build the app",
+    "start": "node build/start.js",
+    "test": "echo TODO test the app"
+  },
+  "dependencies": {
+    "@daisy/ace-config": "^1.0.0",
+    "@daisy/ace-core": "^1.0.2",
+    "@material-ui/core": "^3.0.0",
+    "@material-ui/icons": "^3.0.0",
+    "electron-redux": "^1.3.1",
+    "fs-jetpack": "^2.1.0",
+    "prop-types": "^15.6.2",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "react-redux": "^5.0.7",
+    "react-select": "^2.0.0",
+    "react-splitter-layout": "^3.0.1",
+    "redux": "^4.0.0",
+    "redux-promise": "^0.6.0",
+    "redux-thunk": "^2.3.0",
+    "tmp": "^0.0.33",
+    "typeface-roboto": "^0.0.54"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "babel-loader": "^8.0.2",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-object-rest-spread": "^7.0.0-beta.3",
+    "css-loader": "^1.0.0",
+    "electron": "2.0.7",
+    "electron-builder": "^20.28.3",
+    "file-loader": "^2.0.0",
+    "friendly-errors-webpack-plugin": "^1.7.0",
+    "node-sass": "^4.9.3",
+    "rimraf": "^2.6.2",
+    "sass-loader": "^7.1.0",
+    "style-loader": "^0.22.0",
+    "webpack": "^4.12.0",
+    "webpack-cli": "^3.0.4",
+    "webpack-merge": "^4.1.3",
+    "webpack-node-externals": "^1.7.2"
+  }
+}