Merge pull request #841 from LiskHQ/833-webpack-for-electron

Add Webpack configuration for the electron app - Closes #833

README.md

@@ -37,7 +37,20 @@ npm run build
 
 ### Start
 
-Start the Electron client.
+
+Start the Electron client. Before staring you need to make sure the application is built. If you need to built the entire application, run
+
+```
+npm run build
+```
+
+as mentioned before. And if you want to solely build electron app, run
+
+```
+npm run build-electron
+```
+
+Then, in order to launch electron, you can run
 
 ```
 npm run start

app/package.json

@@ -2,7 +2,7 @@
   "name": "lisk-nano",
   "version": "1.1.0",
   "description": "Lisk Nano",
-  "main": "main.js",
+  "main": "./dist/main.js",
   "author":{
     "name": "Lisk Foundation",
     "email": "admin@lisk.io"

app/main.js → app/src/main.js

@@ -1,6 +1,6 @@
-const electron = require('electron'); // eslint-disable-line import/no-extraneous-dependencies
-const path = require('path');
-const buildMenu = require('./menu');
+import electron from 'electron'; // eslint-disable-line import/no-extraneous-dependencies
+import path from 'path';
+import buildMenu from './menu';
 
 const { app, BrowserWindow, Menu, ipcMain } = electron;
 
@@ -29,7 +29,7 @@ function createWindow() {
       // Avoid app throttling when Electron is in background
       backgroundThrottling: false,
       // Specifies a script that will be loaded before other scripts run in the page.
-      preload: path.resolve(__dirname, 'ipc.js'),
+      preload: path.resolve(__dirname, '../src/ipc.js'),
     },
   });
   win.on('blur', () => win.webContents.send('blur'));
@@ -40,8 +40,7 @@ function createWindow() {
   }
 
   Menu.setApplicationMenu(buildMenu(app, copyright));
-
-  win.loadURL(`file://${__dirname}/dist/index.html`);
+  win.loadURL(`file://${__dirname}/index.html`);
 
   win.on('closed', () => { win = null; });
 

app/menu.js → app/src/menu.js

@@ -1,4 +1,4 @@
-const electron = require('electron'); // eslint-disable-line import/no-extraneous-dependencies
+import electron from 'electron'; // eslint-disable-line import/no-extraneous-dependencies
 
 const { Menu } = electron;
 
@@ -94,7 +94,7 @@ const template = [
   },
 ];
 
-module.exports = (app, copyright) => {
+export default (app, copyright) => {
   if (process.platform === 'darwin') {
     const name = app.getName();
     template.unshift({

config/reactToolbox.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  'color-primary': '#0288D1',
+  'color-primary-dark': '#0288D1',
+  'button-border-radius': '3px',
+  'input-text-label-color': 'rgba(0,0,0,0.38)',
+};

config/webpack.config.dev.js

@@ -0,0 +1,76 @@
+/* eslint-disable import/no-extraneous-dependencies */
+const webpack = require('webpack');
+const { resolve } = require('path');
+const merge = require('webpack-merge');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const baseConfig = require('./webpack.config');
+const reactConfig = require('./webpack.config.react');
+const reactToolboxVariables = require('./reactToolbox.config');
+/* eslint-enable import/no-extraneous-dependencies */
+
+module.exports = merge(baseConfig, reactConfig, {
+  output: {
+    path: resolve(__dirname, '../app', '../dist'),
+    filename: 'bundle.[name].js',
+  },
+  devServer: {
+    contentBase: 'src',
+    inline: true,
+    port: 8080,
+    historyApiFallback: true,
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      PRODUCTION: false,
+      TEST: false,
+      // because of https://fb.me/react-minification
+      'process.env': {
+        NODE_ENV: null,
+      },
+    }),
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor',
+    }),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: ['css-hot-loader'].concat(ExtractTextPlugin.extract({
+          fallback: 'style-loader',
+          use: [
+            {
+              loader: 'css-loader',
+              options: {
+                sourceMap: true,
+                modules: true,
+                importLoaders: 1,
+                localIdentName: '[name]__[local]___[hash:base64:5]',
+              },
+            },
+            {
+              loader: 'postcss-loader',
+              options: {
+                sourceMap: true,
+                sourceComments: true,
+                plugins: [
+                  // eslint-disable-next-line import/no-extraneous-dependencies
+                  require('postcss-partial-import')({}),
+                  require('postcss-cssnext')({
+                    features: {
+                      customProperties: {
+                        variables: reactToolboxVariables,
+                      },
+                    },
+                  }),
+                  // eslint-disable-next-line import/no-extraneous-dependencies
+                  require('postcss-for')({}),
+                ],
+              },
+            },
+          ],
+        })),
+      },
+    ],
+  },
+});

config/webpack.config.electron.js

@@ -0,0 +1,17 @@
+/* eslint-disable import/no-extraneous-dependencies */
+const { resolve } = require('path');
+const merge = require('webpack-merge');
+const baseConfig = require('./webpack.config');
+/* eslint-enable import/no-extraneous-dependencies */
+
+module.exports = merge(baseConfig, {
+  entry: `${resolve(__dirname, '../app/src')}/main.js`,
+  output: {
+    path: resolve(__dirname, '../app/dist'),
+    filename: 'main.js',
+  },
+  target: 'electron-renderer',
+  node: {
+    __dirname: false,
+  },
+});

config/webpack.config.js

@@ -0,0 +1,39 @@
+module.exports = {
+  node: {
+    fs: 'empty',
+    child_process: 'empty',
+  },
+  module: {
+    rules: [
+      {
+        enforce: 'pre',
+        test: /\.js$/,
+        exclude: /node_modules/,
+        loader: 'eslint-loader',
+        options: {},
+      },
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        loader: 'babel-loader',
+        options: {
+          presets: ['es2015', 'react', 'stage-3'],
+          plugins: ['syntax-trailing-function-commas'],
+          env: {
+            test: {
+              plugins: ['istanbul'],
+            },
+          },
+        },
+      },
+      {
+        test: /\.(eot|svg|ttf|woff|woff2|png)$/,
+        loader: 'url-loader',
+      },
+      {
+        test: /\.json$/,
+        loaders: ['json-loader'],
+      },
+    ],
+  },
+};

config/webpack.config.prod.js

@@ -0,0 +1,76 @@
+/* eslint-disable import/no-extraneous-dependencies */
+const webpack = require('webpack');
+const { resolve } = require('path');
+const merge = require('webpack-merge');
+const { NamedModulesPlugin } = require('webpack');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const baseConfig = require('./webpack.config');
+const reactConfig = require('./webpack.config.react');
+const reactToolboxVariables = require('./reactToolbox.config');
+/* eslint-enable import/no-extraneous-dependencies */
+
+module.exports = merge(baseConfig, reactConfig, {
+  output: {
+    path: resolve(__dirname, '../app', '../app/dist'),
+    filename: 'bundle.[name].js',
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      PRODUCTION: true,
+      TEST: false,
+      // because of https://fb.me/react-minification
+      'process.env': {
+        NODE_ENV: JSON.stringify('production'),
+      },
+    }),
+    new webpack.optimize.UglifyJsPlugin({
+      sourceMap: false,
+      mangle: false,
+    }),
+    new NamedModulesPlugin(),
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor',
+    }),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: ['css-hot-loader'].concat(ExtractTextPlugin.extract({
+          fallback: 'style-loader',
+          use: [
+            {
+              loader: 'css-loader',
+              options: {
+                sourceMap: false,
+                modules: true,
+                importLoaders: 1,
+                localIdentName: '[name]__[local]___[hash:base64:5]',
+              },
+            },
+            {
+              loader: 'postcss-loader',
+              options: {
+                sourceMap: false,
+                sourceComments: false,
+                plugins: [
+                  // eslint-disable-next-line import/no-extraneous-dependencies
+                  require('postcss-partial-import')({}),
+                  require('postcss-cssnext')({
+                    features: {
+                      customProperties: {
+                        variables: reactToolboxVariables,
+                      },
+                    },
+                  }),
+                  // eslint-disable-next-line import/no-extraneous-dependencies
+                  require('postcss-for')({}),
+                ],
+              },
+            },
+          ],
+        })),
+      },
+    ],
+  },
+});

config/webpack.config.react.js

@@ -0,0 +1,41 @@
+/* eslint-disable import/no-extraneous-dependencies */
+const { resolve } = require('path');
+const webpack = require('webpack');
+const StyleLintPlugin = require('stylelint-webpack-plugin');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+/* eslint-enable import/no-extraneous-dependencies */
+
+const entries = {
+  app: `${resolve(__dirname, '../src')}/main.js`,
+  vendor: ['react', 'redux', 'react-dom'],
+};
+
+module.exports = {
+  entry: entries,
+  devtool: 'source-map',
+  devServer: {
+    contentBase: 'src',
+    inline: true,
+    port: 8080,
+    historyApiFallback: true,
+  },
+  plugins: [
+    new StyleLintPlugin({
+      context: `${resolve(__dirname, '../src')}/`,
+      files: '**/*.css',
+      config: {
+        extends: 'stylelint-config-standard',
+        rules: {
+          'selector-pseudo-class-no-unknown': null,
+          'unit-whitelist': ['px', 'deg', '%', 'em', 'ms'],
+          'length-zero-no-unit': null,
+        },
+        ignoreFiles: './node_modules/**/*.css',
+      },
+    }),
+    new ExtractTextPlugin({
+      filename: 'styles.css',
+      allChunks: true,
+    }),
+  ],
+};