v2.0.0 (electron-react-boilerplate#2661)

* feat: rename dev script to start

* chore: improve devtools installer usage (electron-react-boilerplate#2600)

* Update babel monorepo

* Update dependency @fortawesome/fontawesome-free to ^5.15.0

* Replace the deprecated NamedModulesPlugin with the optimization.named… (electron-react-boilerplate#2614)

* fix: use electron-renderer target as default

* Replace the deprecated NamedModulesPlugin with the optimization.namedModules

Co-authored-by: Amila Welihinda <amilajack@gmail.com>

* chore: create releases only on master push (electron-react-boilerplate#2626)

* chore: create release branches only on master push

* fix: temporarily disable e2e tests

* chore(deps): update babel monorepo

* chore(deps): update dependency @types/jest to ^26.0.15

* chore(deps): update dependency @teamsupercell/typings-for-css-modules-loader to ^2.4.0

* chore(deps): update dependency @types/react-dom to ^16.9.9

* chore: migrate to latest erb eslint config

* chore: update changelog

* feat: simplify erb (electron-react-boilerplate#2651)

* feat: simplfiy erb

* feat: migrate to react-refresh, simplify dir structure

* chore: rename resources dir to assets

* feat: run yarn deduplicate on postinstall

* fix: fix typescript declaration issues

* feat: add minimal tests

* fix: disable e2e tests on ci

* fix: misc fixes

* feat: move dll dir to .erb dir

* fix: fix broken icon paths

* chore: remove e2e tests and testcafe integration

* feat: simplify erb scripts

* feat: remove START_HOT env variable

* chore(deps): update babel monorepo

* chore(deps): update dependency @testing-library/react to ^11.2.2

* chore(deps): update dependency @types/node to v14.14.10

* feat: add notarize support

* chore: add initial landing page boilerplate

* chore: simplify readme

* chore: remove readme reference to spectrum

* feat: add experimental vscode debugging integration

Co-authored-by: May <aprilandjan@users.noreply.github.com>
Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Woonchan Cho <cronus17@gmail.com>

configs/webpack.config.base.js → .erb/configs/webpack.config.base.js

@@ -4,7 +4,7 @@
 
 import path from 'path';
 import webpack from 'webpack';
-import { dependencies as externals } from '../app/package.json';
+import { dependencies as externals } from '../../src/package.json';
 
 export default {
   externals: [...Object.keys(externals || {})],
@@ -25,7 +25,7 @@ export default {
   },
 
   output: {
-    path: path.join(__dirname, '..', 'app'),
+    path: path.join(__dirname, '../../src'),
     // https://github.com/webpack/webpack/issues/1114
     libraryTarget: 'commonjs2',
   },
@@ -35,11 +35,7 @@ export default {
    */
   resolve: {
     extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
-    modules: [path.join(__dirname, '..', 'app'), 'node_modules'],
-  },
-
-  optimization: {
-    namedModules: true,
+    modules: [path.join(__dirname, '../src'), 'node_modules'],
   },
 
   plugins: [

configs/webpack.config.eslint.js → .erb/configs/webpack.config.eslint.js

@@ -1,4 +1,4 @@
 /* eslint import/no-unresolved: off, import/no-self-import: off */
-require('@babel/register');
+require('../.erb/scripts/node_modules/@babel/register');
 
 module.exports = require('./webpack.config.renderer.dev.babel').default;

configs/webpack.config.main.prod.babel.js → .erb/configs/webpack.config.main.prod.babel.js

@@ -8,36 +8,36 @@ import { merge } from 'webpack-merge';
 import TerserPlugin from 'terser-webpack-plugin';
 import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
 import baseConfig from './webpack.config.base';
-import CheckNodeEnv from '../internals/scripts/CheckNodeEnv';
-import DeleteSourceMaps from '../internals/scripts/DeleteSourceMaps';
+import CheckNodeEnv from '../scripts/CheckNodeEnv';
+import DeleteSourceMaps from '../scripts/DeleteSourceMaps';
 
 CheckNodeEnv('production');
 DeleteSourceMaps();
 
+const devtoolsConfig = process.env.DEBUG_PROD === 'true' ? {
+  devtool: 'source-map'
+} : {};
+
 export default merge(baseConfig, {
-  devtool: process.env.DEBUG_PROD === 'true' ? 'source-map' : 'none',
+  ...devtoolsConfig,
 
   mode: 'production',
 
   target: 'electron-main',
 
-  entry: './app/main.dev.ts',
+  entry: './src/main.dev.ts',
 
   output: {
-    path: path.join(__dirname, '..'),
-    filename: './app/main.prod.js',
+    path: path.join(__dirname, '../../'),
+    filename: './src/main.prod.js',
   },
 
   optimization: {
-    minimizer: process.env.E2E_BUILD
-      ? []
-      : [
-          new TerserPlugin({
-            parallel: true,
-            sourceMap: true,
-            cache: true,
-          }),
-        ],
+    minimizer: [
+      new TerserPlugin({
+        parallel: true,
+      }),
+    ]
   },
 
   plugins: [
@@ -60,7 +60,6 @@ export default merge(baseConfig, {
       NODE_ENV: 'production',
       DEBUG_PROD: false,
       START_MINIMIZED: false,
-      E2E_BUILD: false,
     }),
   ],
 

configs/webpack.config.renderer.dev.babel.js → .erb/configs/webpack.config.renderer.dev.babel.js

@@ -1,18 +1,12 @@
-/**
- * Build config for development electron renderer process that uses
- * Hot-Module-Replacement
- *
- * https://webpack.js.org/concepts/hot-module-replacement/
- */
-
 import path from 'path';
 import fs from 'fs';
 import webpack from 'webpack';
 import chalk from 'chalk';
 import { merge } from 'webpack-merge';
 import { spawn, execSync } from 'child_process';
 import baseConfig from './webpack.config.base';
-import CheckNodeEnv from '../internals/scripts/CheckNodeEnv';
+import CheckNodeEnv from '../scripts/CheckNodeEnv';
+import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
 
 // When an ESLint server is running, we can't set the NODE_ENV so we'll check if it's
 // at the dev webpack config is not accidentally run in a production environment
@@ -22,16 +16,16 @@ if (process.env.NODE_ENV === 'production') {
 
 const port = process.env.PORT || 1212;
 const publicPath = `http://localhost:${port}/dist`;
-const dll = path.join(__dirname, '..', 'dll');
-const manifest = path.resolve(dll, 'renderer.json');
+const dllDir = path.join(__dirname, '../dll');
+const manifest = path.resolve(dllDir, 'renderer.json');
 const requiredByDLLConfig = module.parent.filename.includes(
   'webpack.config.renderer.dev.dll'
 );
 
 /**
  * Warn if the DLL is not built
  */
-if (!requiredByDLLConfig && !(fs.existsSync(dll) && fs.existsSync(manifest))) {
+if (!requiredByDLLConfig && !(fs.existsSync(dllDir) && fs.existsSync(manifest))) {
   console.log(
     chalk.black.bgYellow.bold(
       'The DLL files are missing. Sit back while we build them for you with "yarn build-dll"'
@@ -50,10 +44,7 @@ export default merge(baseConfig, {
   entry: [
     'core-js',
     'regenerator-runtime/runtime',
-    ...(process.env.PLAIN_HMR ? [] : ['react-hot-loader/patch']),
-    `webpack-dev-server/client?http://localhost:${port}/`,
-    'webpack/hot/only-dev-server',
-    require.resolve('../app/index.tsx'),
+    require.resolve('../../src/index.tsx'),
   ],
 
   output: {
@@ -63,6 +54,20 @@ export default merge(baseConfig, {
 
   module: {
     rules: [
+      {
+        test: /\.[jt]sx?$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: require.resolve('babel-loader'),
+            options: {
+              plugins: [
+                require.resolve('react-refresh/babel'),
+              ].filter(Boolean),
+            },
+          },
+        ],
+      },
       {
         test: /\.global\.css$/,
         use: [
@@ -194,24 +199,16 @@ export default merge(baseConfig, {
       },
     ],
   },
-  resolve: {
-    alias: {
-      'react-dom': '@hot-loader/react-dom',
-    },
-  },
   plugins: [
+
     requiredByDLLConfig
       ? null
       : new webpack.DllReferencePlugin({
-          context: path.join(__dirname, '..', 'dll'),
+          context: path.join(__dirname, '../dll'),
           manifest: require(manifest),
           sourceType: 'var',
         }),
 
-    new webpack.HotModuleReplacementPlugin({
-      multiStep: true,
-    }),
-
     new webpack.NoEmitOnErrorsPlugin(),
 
     /**
@@ -233,6 +230,8 @@ export default merge(baseConfig, {
     new webpack.LoaderOptionsPlugin({
       debug: true,
     }),
+
+    new ReactRefreshWebpackPlugin(),
   ],
 
   node: {
@@ -261,16 +260,14 @@ export default merge(baseConfig, {
       disableDotRule: false,
     },
     before() {
-      if (process.env.START_HOT) {
-        console.log('Starting Main Process...');
-        spawn('npm', ['run', 'start-main-dev'], {
+      console.log('Starting Main Process...');
+        spawn('npm', ['run', 'start:main'], {
           shell: true,
           env: process.env,
           stdio: 'inherit',
         })
           .on('close', (code) => process.exit(code))
           .on('error', (spawnError) => console.error(spawnError));
-      }
     },
   },
 });

configs/webpack.config.renderer.dev.dll.babel.js → .erb/configs/webpack.config.renderer.dev.dll.babel.js

@@ -6,15 +6,15 @@ import webpack from 'webpack';
 import path from 'path';
 import { merge } from 'webpack-merge';
 import baseConfig from './webpack.config.base';
-import { dependencies } from '../package.json';
-import CheckNodeEnv from '../internals/scripts/CheckNodeEnv';
+import { dependencies } from '../../package.json';
+import CheckNodeEnv from '../scripts/CheckNodeEnv';
 
 CheckNodeEnv('development');
 
-const dist = path.join(__dirname, '..', 'dll');
+const dist = path.join(__dirname, '../dll');
 
 export default merge(baseConfig, {
-  context: path.join(__dirname, '..'),
+  context: path.join(__dirname, '../..'),
 
   devtool: 'eval',
 
@@ -62,9 +62,9 @@ export default merge(baseConfig, {
     new webpack.LoaderOptionsPlugin({
       debug: true,
       options: {
-        context: path.join(__dirname, '..', 'app'),
+        context: path.join(__dirname, '../../src'),
         output: {
-          path: path.join(__dirname, '..', 'dll'),
+          path: path.join(__dirname, '../dll'),
         },
       },
     }),

configs/webpack.config.renderer.prod.babel.js → .erb/configs/webpack.config.renderer.prod.babel.js

@@ -10,30 +10,31 @@ import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
 import { merge } from 'webpack-merge';
 import TerserPlugin from 'terser-webpack-plugin';
 import baseConfig from './webpack.config.base';
-import CheckNodeEnv from '../internals/scripts/CheckNodeEnv';
-import DeleteSourceMaps from '../internals/scripts/DeleteSourceMaps';
+import CheckNodeEnv from '../scripts/CheckNodeEnv';
+import DeleteSourceMaps from '../scripts/DeleteSourceMaps';
 
 CheckNodeEnv('production');
 DeleteSourceMaps();
 
+const devtoolsConfig = process.env.DEBUG_PROD === 'true' ? {
+  devtool: 'source-map'
+} : {};
+
 export default merge(baseConfig, {
-  devtool: process.env.DEBUG_PROD === 'true' ? 'source-map' : 'none',
+  ...devtoolsConfig,
 
   mode: 'production',
 
-  target:
-    process.env.E2E_BUILD || process.env.ERB_SECURE !== 'true'
-      ? 'electron-renderer'
-      : 'electron-preload',
+  target: 'electron-renderer',
 
   entry: [
     'core-js',
     'regenerator-runtime/runtime',
-    path.join(__dirname, '..', 'app/index.tsx'),
+    path.join(__dirname, '../../src/index.tsx'),
   ],
 
   output: {
-    path: path.join(__dirname, '..', 'app/dist'),
+    path: path.join(__dirname, '../../src/dist'),
     publicPath: './dist/',
     filename: 'renderer.prod.js',
   },
@@ -46,9 +47,6 @@ export default merge(baseConfig, {
         use: [
           {
             loader: MiniCssExtractPlugin.loader,
-            options: {
-              publicPath: './',
-            },
           },
           {
             loader: 'css-loader',
@@ -181,13 +179,10 @@ export default merge(baseConfig, {
   },
 
   optimization: {
-    minimizer: process.env.E2E_BUILD
-      ? []
-      : [
+    minimizer:
+      [
           new TerserPlugin({
             parallel: true,
-            sourceMap: true,
-            cache: true,
           }),
           new OptimizeCSSAssetsPlugin({
             cssProcessorOptions: {
@@ -213,7 +208,6 @@ export default merge(baseConfig, {
     new webpack.EnvironmentPlugin({
       NODE_ENV: 'production',
       DEBUG_PROD: false,
-      E2E_BUILD: false,
     }),
 
     new MiniCssExtractPlugin({

internals/scripts/BabelRegister.js → .erb/scripts/BabelRegister.js

@@ -2,5 +2,5 @@ const path = require('path');
 
 require('@babel/register')({
   extensions: ['.es6', '.es', '.jsx', '.js', '.mjs', '.ts', '.tsx'],
-  cwd: path.join(__dirname, '..', '..'),
+  cwd: path.join(__dirname, '../..'),
 });