v3.0.0 (#2875)

* bump to electron@12 and other misc updates (#2866) * A lot of cleanup. Ran yarn upgrade. (now using Electron v12.0.2) Edited webpack config, moving all generated code out of the src directory. The electron application's package.json, yarn.lock, and node_modules have been moved to build/app. The release directory has been moved to build/release. Created src/main and src/render used by each context and moved the relevant srource files. Added HtmlWebpackPlugin, which will inject the required js/css into index.html. This should also make it easier to use of the project with nodeIntegration set to false, with little modification, as it doesn't need to import the "process" module. Added Clean.js to ./erb/scripts to replace "rm -rf" when running "yarn package", making this platform agnostic. Removed DeleteSourceMaps.js as it didn't seem necessary. * Re-added DeleteSourceMaps as it's needed when DEBUG_PROD=true * Template is now ready for use with contextIsolation. Set nodeIntergration=false and contextIsolation=true. Added example ipc functionality. Updated webpack libraryTarget to library: {...options} as it may be deprecated soon. https://webpack.js.org/configuration/output/#outputlibrarytarget Updated library and target for renderer config which fixes "global is not defined error" when running devServer. Updating webpack.config.renderer.prod wasn't required but it's probably best to have them transpile to the same targets. * Fixed issue pereventing yarn:clean from running. Fixed issues with tsc by downgrading the offending packages. Fixed issue with preload.js not working on production build. It just needed to be added to webpack.main.prod.babel.js. Updated node_modules path for the electron build. * feat: misc fixes * fix: bump to latest erb eslint config * fix: dedupe yarn.lock * fix: downgrade history to compatible semver * chore: migrate to sass from node-sass * fix: remove inaccurate comment from preload.js * chore: reduce stale timeout to 30 days Co-authored-by: richard-dp <6692307+richard-dp@users.noreply.github.com> * feat: bump to 3.0.0 * feat: migrate to memory router (#2874) A <Router> that keeps the history of your “URL” in memory (does not read or write to the address bar). Environments like React Native use it and I believe this is the right way to do routing with React in Electron. Co-authored-by: Ivan Jeremic <ivan.jeremic@outlook.com> * fix: replace 'rm -rf' with clean.js * fix: restore babel-register * chore(deps): update babel monorepo * chore(deps): update dependency @testing-library/react to ^11.2.7 * chore(deps): update dependency @types/react-dom to ^17.0.5 * fix: prevent gh auto publish for forked projects * fix: update lockfile * chore(deps): update dependency @types/react to ^17.0.9 * fix: remove send and sendSync from main process * fix: add dev server entrypoints to fix hmr * fix: fix paths to node_modules in rebuild script * chore(deps): update babel monorepo * fix: minor code style fixes * feat: allow tsx and jsx filenames * chore(deps): update babel monorepo to ^7.14.8 * chore(deps): update dependency @types/enzyme to ^3.10.9 * chore(deps): update dependency @types/jest to ^26.0.24 * chore(deps): update dependency @types/react-dom to ^17.0.9 * chore: bump to electron 12 * chore: add baseUrl to tsconfig * fix: native modules, drop prod filename suffixes * fix: update references to oudated branches * fix: symlink build/app/node_modules to src/node_modules * fix: remove deprecated vscode ext recommendation Co-authored-by: richard-dp <6692307+richard-dp@users.noreply.github.com> Co-authored-by: Ivan Jeremic <ivan.jeremic@outlook.com> Co-authored-by: Renovate Bot <bot@renovateapp.com>
electron-react-boilerplate · Aug 13, 2021 · 561569a · 561569a
1 parent 10e89f9
commit 561569a
Show file tree

Hide file tree

Showing 41 changed files with 3,727 additions and 4,362 deletions.
diff --git a/.erb/configs/webpack.config.base.js b/.erb/configs/webpack.config.base.js
@@ -4,15 +4,16 @@
 
 import path from 'path';
 import webpack from 'webpack';
-import { dependencies as externals } from '../../src/package.json';
+import webpackPaths from './webpack.paths.js';
+import { dependencies as externals } from '../../build/app/package.json';
 
 export default {
   externals: [...Object.keys(externals || {})],
 
   module: {
     rules: [
       {
-        test: /\.tsx?$/,
+        test: /\.[jt]sx?$/,
         exclude: /node_modules/,
         use: {
           loader: 'babel-loader',
@@ -25,17 +26,19 @@ export default {
   },
 
   output: {
-    path: path.join(__dirname, '../../src'),
+    path: webpackPaths.srcPath,
     // https://github.com/webpack/webpack/issues/1114
-    libraryTarget: 'commonjs2',
+    library: {
+      type: 'commonjs2',
+    },
   },
 
   /**
    * Determine the array of extensions that should be used to resolve modules.
    */
   resolve: {
     extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
-    modules: [path.join(__dirname, '../../src'), 'node_modules'],
+    modules: [webpackPaths.srcPath, 'node_modules'],
   },
 
   plugins: [

diff --git a/.erb/configs/webpack.config.main.prod.babel.js b/.erb/configs/webpack.config.main.prod.babel.js
@@ -8,15 +8,19 @@ 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 '../scripts/CheckNodeEnv';
-import DeleteSourceMaps from '../scripts/DeleteSourceMaps';
+import webpackPaths from './webpack.paths.js';
+import checkNodeEnv from '../scripts/check-node-env';
+import deleteSourceMaps from '../scripts/delete-source-maps';
 
-CheckNodeEnv('production');
-DeleteSourceMaps();
+checkNodeEnv('production');
+deleteSourceMaps();
 
-const devtoolsConfig = process.env.DEBUG_PROD === 'true' ? {
-  devtool: 'source-map'
-} : {};
+const devtoolsConfig =
+  process.env.DEBUG_PROD === 'true'
+    ? {
+        devtool: 'source-map',
+      }
+    : {};
 
 export default merge(baseConfig, {
   ...devtoolsConfig,
@@ -25,19 +29,22 @@ export default merge(baseConfig, {
 
   target: 'electron-main',
 
-  entry: './src/main.dev.ts',
+  entry: {
+    main: path.join(webpackPaths.srcMainPath, 'main.ts'),
+    preload: path.join(webpackPaths.srcMainPath, 'preload.js'),
+  },
 
   output: {
-    path: path.join(__dirname, '../../'),
-    filename: './src/main.prod.js',
+    path: webpackPaths.distMainPath,
+    filename: '[name].js',
   },
 
   optimization: {
     minimizer: [
       new TerserPlugin({
         parallel: true,
       }),
-    ]
+    ],
   },
 
   plugins: [

diff --git a/.erb/configs/webpack.config.renderer.dev.babel.js b/.erb/configs/webpack.config.renderer.dev.babel.js
@@ -1,31 +1,35 @@
 import path from 'path';
 import fs from 'fs';
 import webpack from 'webpack';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
 import chalk from 'chalk';
 import { merge } from 'webpack-merge';
 import { spawn, execSync } from 'child_process';
 import baseConfig from './webpack.config.base';
-import CheckNodeEnv from '../scripts/CheckNodeEnv';
+import webpackPaths from './webpack.paths.js';
+import checkNodeEnv from '../scripts/check-node-env';
 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
 if (process.env.NODE_ENV === 'production') {
-  CheckNodeEnv('development');
+  checkNodeEnv('development');
 }
 
 const port = process.env.PORT || 1212;
-const publicPath = `http://localhost:${port}/dist`;
-const dllDir = path.join(__dirname, '../dll');
-const manifest = path.resolve(dllDir, 'renderer.json');
+const publicPath = webpackPaths.distRendererPath;
+const manifest = path.resolve(webpackPaths.dllPath, 'renderer.json');
 const requiredByDLLConfig = module.parent.filename.includes(
   'webpack.config.renderer.dev.dll'
 );
 
 /**
  * Warn if the DLL is not built
  */
-if (!requiredByDLLConfig && !(fs.existsSync(dllDir) && fs.existsSync(manifest))) {
+if (
+  !requiredByDLLConfig &&
+  !(fs.existsSync(webpackPaths.dllPath) && 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"'
@@ -39,17 +43,23 @@ export default merge(baseConfig, {
 
   mode: 'development',
 
-  target: 'electron-renderer',
+  target: ['web', 'electron-renderer'],
 
   entry: [
+    'webpack-dev-server/client?http://localhost:1212/dist',
+    'webpack/hot/only-dev-server',
     'core-js',
     'regenerator-runtime/runtime',
-    require.resolve('../../src/index.tsx'),
+    path.join(webpackPaths.srcRendererPath, 'index.tsx'),
   ],
 
   output: {
-    publicPath: `http://localhost:${port}/dist/`,
+    path: webpackPaths.distRendererPath,
+    publicPath: '/',
     filename: 'renderer.dev.js',
+    library: {
+      type: 'umd',
+    },
   },
 
   module: {
@@ -61,9 +71,7 @@ export default merge(baseConfig, {
           {
             loader: require.resolve('babel-loader'),
             options: {
-              plugins: [
-                require.resolve('react-refresh/babel'),
-              ].filter(Boolean),
+              plugins: [require.resolve('react-refresh/babel')].filter(Boolean),
             },
           },
         ],
@@ -211,11 +219,10 @@ export default merge(baseConfig, {
     ],
   },
   plugins: [
-
     requiredByDLLConfig
       ? null
       : new webpack.DllReferencePlugin({
-          context: path.join(__dirname, '../dll'),
+          context: webpackPaths.dllPath,
           manifest: require(manifest),
           sourceType: 'var',
         }),
@@ -243,6 +250,20 @@ export default merge(baseConfig, {
     }),
 
     new ReactRefreshWebpackPlugin(),
+
+    new HtmlWebpackPlugin({
+      filename: path.join('index.html'),
+      template: path.join(webpackPaths.srcRendererPath, 'index.ejs'),
+      minify: {
+        collapseWhitespace: true,
+        removeAttributeQuotes: true,
+        removeComments: true,
+      },
+      isBrowser: false,
+      env: process.env.NODE_ENV,
+      isDevelopment: process.env.NODE_ENV !== 'production',
+      nodeModules: webpackPaths.appNodeModulesPath,
+    }),
   ],
 
   node: {
@@ -252,15 +273,14 @@ export default merge(baseConfig, {
 
   devServer: {
     port,
-    publicPath,
+    publicPath: '/',
     compress: true,
     noInfo: false,
     stats: 'errors-only',
     inline: true,
     lazy: false,
     hot: true,
     headers: { 'Access-Control-Allow-Origin': '*' },
-    contentBase: path.join(__dirname, 'dist'),
     watchOptions: {
       aggregateTimeout: 300,
       ignored: /node_modules/,
@@ -272,13 +292,13 @@ export default merge(baseConfig, {
     },
     before() {
       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));
+      spawn('npm', ['run', 'start:main'], {
+        shell: true,
+        env: process.env,
+        stdio: 'inherit',
+      })
+        .on('close', (code) => process.exit(code))
+        .on('error', (spawnError) => console.error(spawnError));
     },
   },
 });
diff --git a/.erb/configs/webpack.config.renderer.dev.dll.babel.js b/.erb/configs/webpack.config.renderer.dev.dll.babel.js
@@ -6,15 +6,16 @@ import webpack from 'webpack';
 import path from 'path';
 import { merge } from 'webpack-merge';
 import baseConfig from './webpack.config.base';
+import webpackPaths from './webpack.paths.js';
 import { dependencies } from '../../package.json';
-import CheckNodeEnv from '../scripts/CheckNodeEnv';
+import checkNodeEnv from '../scripts/check-node-env';
 
-CheckNodeEnv('development');
+checkNodeEnv('development');
 
-const dist = path.join(__dirname, '../dll');
+const dist = webpackPaths.dllPath;
 
 export default merge(baseConfig, {
-  context: path.join(__dirname, '../..'),
+  context: webpackPaths.rootPath,
 
   devtool: 'eval',
 
@@ -34,10 +35,12 @@ export default merge(baseConfig, {
   },
 
   output: {
-    library: 'renderer',
     path: dist,
     filename: '[name].dev.dll.js',
-    libraryTarget: 'var',
+    library: {
+      name: 'renderer',
+      type: 'var',
+    },
   },
 
   plugins: [
@@ -62,9 +65,9 @@ export default merge(baseConfig, {
     new webpack.LoaderOptionsPlugin({
       debug: true,
       options: {
-        context: path.join(__dirname, '../../src'),
+        context: webpackPaths.srcPath,
         output: {
-          path: path.join(__dirname, '../dll'),
+          path: webpackPaths.dllPath,
         },
       },
     }),