v4.0.0 (electron-react-boilerplate#2948)

* fix: only show errors for dll build

* chore: semver bump

* fix: symlink node_modules with junction points on windows

* chore: bump deps to latest semver

* chore: minor fixes

* chore: bump linter deps

* chore: move eslint deps to eslint-config-erb

* fix: bump eslint-config-erb

* migration to npm (electron-react-boilerplate#2953)

* chore: initial migration to npm

* fix: remove yarn args from workflow npm install

* fix: lockfile

* fix: fix ts deps

* drop babel (electron-react-boilerplate#2954)

* chore: initial migration

* misc

* fix: use ts-jest

* fix: ignore tests in build/app/dist

* chore: rename release and build paths

* fix: config fixes related to filenames

* fix: prevent re-trapsilation

* fix: npm audit security improvements

* fix native dependency installation instructions (electron-react-boilerplate#2967)

* Make use of previously created `isDevelopment` constant (electron-react-boilerplate#2981)

* fix: use port env in dev renderer webpack config

Co-authored-by: chengxuncc <[email protected]>
Co-authored-by: Boris Berman <[email protected]>

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

@@ -2,24 +2,22 @@
  * Base webpack config used across other specific configs
  */
 
-import path from 'path';
 import webpack from 'webpack';
-import webpackPaths from './webpack.paths.js';
-import { dependencies as externals } from '../../build/app/package.json';
+import webpackPaths from './webpack.paths';
+import { dependencies as externals } from '../../release/app/package.json';
 
 export default {
   externals: [...Object.keys(externals || {})],
 
+  stats: 'errors-only',
+
   module: {
     rules: [
       {
         test: /\.[jt]sx?$/,
         exclude: /node_modules/,
         use: {
-          loader: 'babel-loader',
-          options: {
-            cacheDirectory: true,
-          },
+          loader: 'ts-loader',
         },
       },
     ],

.erb/configs/webpack.config.eslint.ts

@@ -0,0 +1,3 @@
+/* eslint import/no-unresolved: off, import/no-self-import: off */
+
+module.exports = require('./webpack.config.renderer.dev').default;

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

@@ -8,7 +8,7 @@ import { merge } from 'webpack-merge';
 import TerserPlugin from 'terser-webpack-plugin';
 import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
 import baseConfig from './webpack.config.base';
-import webpackPaths from './webpack.paths.js';
+import webpackPaths from './webpack.paths';
 import checkNodeEnv from '../scripts/check-node-env';
 import deleteSourceMaps from '../scripts/delete-source-maps';
 

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

@@ -6,7 +6,7 @@ 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 webpackPaths from './webpack.paths';
 import { dependencies } from '../../package.json';
 import checkNodeEnv from '../scripts/check-node-env';
 
@@ -28,7 +28,7 @@ export default merge(baseConfig, {
   /**
    * Use `module` from `webpack.config.renderer.dev.js`
    */
-  module: require('./webpack.config.renderer.dev.babel').default.module,
+  module: require('./webpack.config.renderer.dev').default.module,
 
   entry: {
     renderer: Object.keys(dependencies || {}),
@@ -43,8 +43,6 @@ export default merge(baseConfig, {
     },
   },
 
-  stats: 'errors-only',
-
   plugins: [
     new webpack.DllPlugin({
       path: path.join(dist, '[name].json'),

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

@@ -6,7 +6,7 @@ import chalk from 'chalk';
 import { merge } from 'webpack-merge';
 import { spawn, execSync } from 'child_process';
 import baseConfig from './webpack.config.base';
-import webpackPaths from './webpack.paths.js';
+import webpackPaths from './webpack.paths';
 import checkNodeEnv from '../scripts/check-node-env';
 import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
 
@@ -17,7 +17,6 @@ if (process.env.NODE_ENV === 'production') {
 }
 
 const port = process.env.PORT || 1212;
-const publicPath = webpackPaths.distRendererPath;
 const manifest = path.resolve(webpackPaths.dllPath, 'renderer.json');
 const requiredByDLLConfig = module.parent.filename.includes(
   'webpack.config.renderer.dev.dll'
@@ -32,10 +31,10 @@ if (
 ) {
   console.log(
     chalk.black.bgYellow.bold(
-      'The DLL files are missing. Sit back while we build them for you with "yarn build-dll"'
+      'The DLL files are missing. Sit back while we build them for you with "npm run build-dll"'
     )
   );
-  execSync('yarn postinstall');
+  execSync('npm run postinstall');
 }
 
 export default merge(baseConfig, {
@@ -46,7 +45,7 @@ export default merge(baseConfig, {
   target: ['web', 'electron-renderer'],
 
   entry: [
-    'webpack-dev-server/client?http://localhost:1212/dist',
+    `webpack-dev-server/client?http://localhost:${port}/dist`,
     'webpack/hot/only-dev-server',
     'core-js',
     'regenerator-runtime/runtime',
@@ -64,18 +63,6 @@ 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: [
@@ -273,24 +260,17 @@ export default merge(baseConfig, {
 
   devServer: {
     port,
-    publicPath: '/',
     compress: true,
-    noInfo: false,
-    stats: 'errors-only',
-    inline: true,
-    lazy: false,
     hot: true,
     headers: { 'Access-Control-Allow-Origin': '*' },
-    watchOptions: {
-      aggregateTimeout: 300,
-      ignored: /node_modules/,
-      poll: 100,
+    static: {
+      publicPath: '/',
     },
     historyApiFallback: {
       verbose: true,
       disableDotRule: false,
     },
-    before() {
+    onBeforeSetupMiddleware() {
       console.log('Starting Main Process...');
       spawn('npm', ['run', 'start:main'], {
         shell: true,

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

@@ -11,7 +11,7 @@ import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
 import { merge } from 'webpack-merge';
 import TerserPlugin from 'terser-webpack-plugin';
 import baseConfig from './webpack.config.base';
-import webpackPaths from './webpack.paths.js';
+import webpackPaths from './webpack.paths';
 import checkNodeEnv from '../scripts/check-node-env';
 import deleteSourceMaps from '../scripts/delete-source-maps';
 

.erb/configs/webpack.paths.js → .erb/configs/webpack.paths.ts

@@ -8,8 +8,8 @@ const srcPath = path.join(rootPath, 'src');
 const srcMainPath = path.join(srcPath, 'main');
 const srcRendererPath = path.join(srcPath, 'renderer');
 
-const buildPath = path.join(rootPath, 'build');
-const appPath = path.join(buildPath, 'app');
+const releasePath = path.join(rootPath, 'release');
+const appPath = path.join(releasePath, 'app');
 const appPackagePath = path.join(appPath, 'package.json');
 const appNodeModulesPath = path.join(appPath, 'node_modules');
 const srcNodeModulesPath = path.join(srcPath, 'node_modules');
@@ -18,21 +18,21 @@ const distPath = path.join(appPath, 'dist');
 const distMainPath = path.join(distPath, 'main');
 const distRendererPath = path.join(distPath, 'renderer');
 
-const releasePath = path.join(buildPath, 'release');
+const buildPath = path.join(releasePath, 'build');
 
 module.exports = {
   rootPath,
   dllPath,
   srcPath,
   srcMainPath,
   srcRendererPath,
-  buildPath,
+  releasePath,
   appPath,
   appPackagePath,
   appNodeModulesPath,
   srcNodeModulesPath,
   distPath,
   distMainPath,
   distRendererPath,
-  releasePath,
+  buildPath,
 };

.erb/scripts/check-build-exists.js → .erb/scripts/check-build-exists.ts

@@ -2,23 +2,24 @@
 import path from 'path';
 import chalk from 'chalk';
 import fs from 'fs';
-import webpackPaths from '../configs/webpack.paths.js';
+
+const webpackPaths = require('../configs/webpack.paths');
 
 const mainPath = path.join(webpackPaths.distMainPath, 'main.js');
 const rendererPath = path.join(webpackPaths.distRendererPath, 'renderer.js');
 
 if (!fs.existsSync(mainPath)) {
   throw new Error(
     chalk.whiteBright.bgRed.bold(
-      'The main process is not built yet. Build it by running "yarn build:main"'
+      'The main process is not built yet. Build it by running "npm run build:main"'
     )
   );
 }
 
 if (!fs.existsSync(rendererPath)) {
   throw new Error(
     chalk.whiteBright.bgRed.bold(
-      'The renderer process is not built yet. Build it by running "yarn build:renderer"'
+      'The renderer process is not built yet. Build it by running "npm run build:renderer"'
     )
   );
 }

.erb/scripts/check-native-dep.js

@@ -30,15 +30,15 @@ if (dependencies) {
  )}
 ${chalk.bold(filteredRootDependencies.join(', '))} ${
         plural ? 'are native dependencies' : 'is a native dependency'
-      } and should be installed inside of the "./build/app" folder.
+      } and should be installed inside of the "./release/app" folder.
  First, uninstall the packages from "./package.json":
-${chalk.whiteBright.bgGreen.bold('yarn remove your-package')}
+${chalk.whiteBright.bgGreen.bold('npm uninstall your-package')}
  ${chalk.bold(
    'Then, instead of installing the package to the root "./package.json":'
  )}
-${chalk.whiteBright.bgRed.bold('yarn add your-package')}
- ${chalk.bold('Install the package to "./build/app/package.json"')}
-${chalk.whiteBright.bgGreen.bold('cd ./src && yarn add your-package')}
+${chalk.whiteBright.bgRed.bold('npm install your-package')}
+ ${chalk.bold('Install the package to "./release/app/package.json"')}
+${chalk.whiteBright.bgGreen.bold('cd ./release/app && npm install your-package')}
  Read more about native dependencies at:
 ${chalk.bold(
   'https://electron-react-boilerplate.js.org/docs/adding-dependencies/#module-structure'

.erb/scripts/check-port-in-use.js

@@ -7,7 +7,7 @@ detectPort(port, (err, availablePort) => {
   if (port !== String(availablePort)) {
     throw new Error(
       chalk.whiteBright.bgRed.bold(
-        `Port "${port}" on "localhost" is already in use. Please use another port. ex: PORT=4343 yarn start`
+        `Port "${port}" on "localhost" is already in use. Please use another port. ex: PORT=4343 npm start`
       )
     );
   } else {

.erb/scripts/clean.js

@@ -1,11 +1,11 @@
-const rimraf = require('rimraf');
-const webpackPaths = require('../configs/webpack.paths.js');
-const process = require('process');
+import rimraf from 'rimraf';
+import webpackPaths from '../configs/webpack.paths.ts';
+import process from 'process';
 
 const args = process.argv.slice(2);
 const commandMap = {
-  dist: webpackPaths.releasePath,
-  release: webpackPaths.distPath,
+  dist: webpackPaths.distPath,
+  release: webpackPaths.releasePath,
   dll: webpackPaths.dllPath,
 };
 

.erb/scripts/delete-source-maps.js

@@ -1,6 +1,6 @@
 import path from 'path';
 import rimraf from 'rimraf';
-import webpackPaths from '../configs/webpack.paths.js';
+import webpackPaths from '../configs/webpack.paths';
 
 export default function deleteSourceMaps() {
   rimraf.sync(path.join(webpackPaths.distMainPath, '*.js.map'));

.erb/scripts/electron-rebuild.js

@@ -1,8 +1,8 @@
 import path from 'path';
 import { execSync } from 'child_process';
 import fs from 'fs';
-import { dependencies } from '../../build/app/package.json';
-import webpackPaths from '../configs/webpack.paths.js';
+import { dependencies } from '../../release/app/package.json';
+import webpackPaths from '../configs/webpack.paths';
 
 if (
   Object.keys(dependencies || {}).length > 0 &&

.erb/scripts/link-modules.js

@@ -2,8 +2,8 @@ import fs from 'fs';
 import {
   appNodeModulesPath,
   srcNodeModulesPath,
-} from '../configs/webpack.paths.js';
+} from '../configs/webpack.paths';
 
 if (!fs.existsSync(srcNodeModulesPath) && fs.existsSync(appNodeModulesPath)) {
-  fs.symlinkSync(appNodeModulesPath, srcNodeModulesPath);
+  fs.symlinkSync(appNodeModulesPath, srcNodeModulesPath, 'junction');
 }

.eslintignore

@@ -18,8 +18,8 @@ node_modules
 # OSX
 .DS_Store
 
-build/app/dist
-build/release
+release/app/dist
+release/build
 .erb/dll
 
 .idea

.eslintrc.js

@@ -16,7 +16,7 @@ module.exports = {
       // See https://github.com/benmosher/eslint-plugin-import/issues/1396#issuecomment-575727774 for line below
       node: {},
       webpack: {
-        config: require.resolve('./.erb/configs/webpack.config.eslint.js'),
+        config: require.resolve('./.erb/configs/webpack.config.eslint.ts'),
       },
     },
     'import/parsers': {

.github/ISSUE_TEMPLATE/1-Bug_report.md

@@ -10,11 +10,11 @@ labels: 'bug'
 
 <!-- If the following boxes are not ALL checked, your issue is likely to be closed -->
 
-- [ ] Using yarn
+- [ ] Using npm
 - [ ] Using an up-to-date [`main` branch](https://github.com/electron-react-boilerplate/electron-react-boilerplate/tree/main)
 - [ ] Using latest version of devtools. [Check the docs for how to update](https://electron-react-boilerplate.js.org/docs/dev-tools/)
 - [ ] Tried solutions mentioned in [#400](https://github.com/electron-react-boilerplate/electron-react-boilerplate/issues/400)
-- [ ] For issue in production release, add devtools output of `DEBUG_PROD=true yarn build && yarn start`
+- [ ] For issue in production release, add devtools output of `DEBUG_PROD=true npm run build && npm start`
 
 ## Expected Behavior
 

.github/workflows/publish.yml

@@ -26,25 +26,9 @@ jobs:
         with:
           node-version: 15
 
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-
-      - uses: actions/cache@v1
-        id: yarn-cache
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
-
-      - name: Install dependencies
-        run: |
-          yarn install --prefer-offline
-
       - name: Install dependencies
         run: |
-          yarn install
+          npm install
 
       - name: Publish releases
         env:
@@ -56,4 +40,6 @@ jobs:
           # This is used for uploading release assets to github
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         run: |
-          yarn postinstall && yarn build && yarn electron-builder --publish always --win --mac --linux
+          npm run postinstall
+          npm run build
+          npm exec electron-builder --publish always --win --mac --linux