electron-react-typescript-webpack-boilerplate

Added

• GitHub community standards & related workflows(#39)
• GitHub workflows for CI.
• Jest config for GitHub Actions - jest.config.ci.mjs.
• NPM scripts:
  • lint to run ESLint from CLI.
  • jest to replace the original test script with the following changes:
    • Removed jest --clearCache at the beginning as the updated Jest & ts-jest settings execute the dynamic import lines with no issue.
    • Disabled Node experimental warning message by setting NODE_NO_WARNINGS=1.
  • jest-ci to run Jest with CI config - jest.config.ci.mjs.

Changed

• File extension of Jest & Webpack config files to mjs.
• Jest config to move ts-jest config to transform (#40)
• NPM test script to run scripts lint then jest.
• Rolled back the value of moduleResolution in tsconfig to Node (means .js file extension on relative imports is now OPTIONAL).
• Enhanced function pathsToESModuleNameMapper in jest.config.js to return a less clumsy mapping object.

Updates on package dependencies

Update

• Major version updates:
  • @types/jest - 28.1.6 -> 29.1.2 (#44)
  • eslint-plugin-jest - 26.8.2 -> 27.1.1 (#44)
  • jest - 28.1.3 -> 29.1.2 (#44)
  • ts-jest - 28.0.7 -> 29.0.3 (#44)
• Minor & patch version updates:
  • @types/react - 18.0.17 -> 18.0.21 (#44)
  • @typescript-eslint/eslint-plugin & @typescript-eslint/parser - 5.33.0 -> 5.40.0 (#44)
  • electron-builder - 23.3.3 -> 23.6.0 (#44)
  • eslint - 8.22.0 -> 8.25.0 (#44)
  • eslint-import-resolver-typescript - 3.4.1 -> 3.5.1 (#44)
  • eslint-plugin-react - 7.30.1 -> 7.31.10 (#44)
  • ts-loader - 9.3.1 -> 9.4.1` (#44)
  • typescript - 4.7.4 -> 4.8.4 (#44)

Donation

If you've found this project useful, consider buy me a coffee via donations or PayPal. 100% of your donation will fund my coffee buying budget for quality coffee beans from great roasters I know 😉 ☕

Added

• Function pathsToESModuleNameMapper in jest.config.js to create the module mappings with ESM relative import with file extension (.js) syntax support for Jest from the path aliases set in tsconfig.

Changed

• Disable ESLint rule import/no-extraneous-dependencies on unit test files.
• NPM script test now clear the cache for Jest before running the test and execute Jest with NODE_OPTIONS=--experimental-vm-modules flag to allow using dynamic import syntax.

Fixed

• Cannot find module issue reported by TypeScript server on relative imports in the unit test files after setting up native ES module support in [v4.1.0].

Updates on package dependencies

Updated

• Minor & patch version updates:
  • electron - 20.0.1 -> 20.0.2
  • eslint - 8.21.0 -> 8.22.0
  • eslint-import-resolver-typescript - 3.4.0 -> 3.4.1

Donation

If you've found this project useful, consider buy me a coffee via donations or PayPal. 100% of your donation will fund my coffee buying budget for quality coffee beans from great roasters I know 😉 ☕

Fixed

• Cannot find module issue reported by TypeScript server on relative imports after the migration to ES modules.

Updates on package dependencies

Updated

• Minor & patch version updates:
  • @types/react - 18.0.15 -> 18.0.17
  • @typescript-eslint/eslint-plugin & @typescript-eslint/parser -
    5.32.0 -> 5.33.0
  • eslint-plugin-jest - 26.7.0 -> 26.8.2

Donation

If you've found this project useful, consider buy me a coffee via donations or PayPal. 100% of your donation will fund my coffee buying budget for quality coffee beans from great roasters I know 😉 ☕

Added

• tsconfig.eslint.json to avoid ESLint complains for file not being included in project provided.

Changed

• Migrated from deprecated .eslintrc (ESLint config with no file extension) to CommonJS file - .eslintrc.cjs, with the following changes on the configurations:
  • Different rules and plugins are now applied based on file types, allowing JavaScript files to be linted properly and only using plugins & rules needed on the targeted files.
  • Separated config to 4 objects - naming as baseConfig, tsConfig, jestConfig, and specialConfig respectively to maintain the readability on the pervious .eslintrc.
  • eslint-plugin-import is now properly configured for both JavaScript and TypeScript files.
  • jest.config.js & webpack.config.js are no longer ignored by ESLint.
• Improved the readability of webpack.config.js by migrating to webpack-merge from using lodash.deepClone() for merging configuration objects.
• Configured Node to resolve JavaScript files as ES modules ("type": "module" in package.json).
• Refactored Jest and Webpack config files as ES modules.

Fixed

• Module import order warnings in most modules.
• ESLint warnings & errors on jest.config.js & webpack.config.js.

Updates on package dependencies

Added

• eslint-import-resolver-typescript - Enhanced TypeScript support for ESLint import plugin
• webpack-merge - Replaced the sections using lodash.deepClone() in webpack.config.js

Updated

• Major version updates:
  • electron - 19.0.9 -> 20.0.1
  • tsconfig-paths-webpack-plugin - 3.5.2 -> 4.0.0
• Minor & patch version updates:
  • @typescript-eslint/eslint-plugin & @typescript-eslint/parser - 5.30.7 -> 5.32.0
  • eslint - 8.20.0 -> 8.21.0
  • eslint-plugin-jest - 26.6.0 -> 26.7.0
  • electron-builder - 23.1.0 -> 23.3.3
  • tsconfig-paths - 4.0.0 -> 4.1.0

Removed

• eslint-import-resolver-webpack - Not being used in any part of the boilerplate
• lodash - Replaced by webpack-merge for its' usage in webpack.config.js

Donation

If you've found this project useful, consider buy me a coffee via donations or PayPal. 100% of your donation will fund my coffee buying budget for quality coffee beans from great roasters I know 😉 ☕

Added

• Jest as default unit testing framework, with sample test suite for main.
• Integrated Electron preload pattern.
• NPM scripts:
  • watch-test to run Jest in watch mode.
  • next-rc, next-patch, next-minor & next-major for quick package version number advance.

Changed

• Webpack will now take the module path alias from tsconfig.json and set it for you thanks to tsconfig-paths-webpack-plugin. Manually set up in Webpack config is no longer needed.
• tsconfig now configured to use ES2020 features, with module resolution set to Node16 to match the NodeJS version used by Electron.
• Migrated to the new createRoot API introduced in React v18.
• Some APIs changed in Electron main entry script:
  • mainWindow now use loadFile API instead of loadURL.
  • Replaced app.on('ready') with app.whenReady() to align with syntax from Electron official quick start guide.
• electron-builder now configured to build universal dmg for mac, 32 & 64 bit exe for Windows.
• Moved electron-builder, Webpack & Webpack-related packages to optionalDependencies.
• Revamped README.
• Starting from this version, the maintenance schedule will be on a monthly update basis to keep the package dependencies up to date and keep the development going.

Fixed

• Allow to use import default statement on non ES modules (e.g. React, lodash) by enabling esModuleInterop in tsconfig. #14

Removed

• Mocha in favour of Jest.
• Spectron as it has been deprecated. See - Spectron Deprecation Notice

Updates on package dependencies

Added

• @types/jest, jest, ts-jest, eslint-plugin-jest - Jest support
• eslint-config-airbnb-typescript - Enhance Airbnb's rules in TypeScript
• ts-config-paths-webpack-plugin - Load tsconfig path alias into Webpack config

Updated

• Major version updates:
  • react & react-dom - 17.0.1 -> 18.2.0
  • @types/react - 17.0.0 -> 18.0.15
  • @types/react-dom - 17.0.0 -> 18.0.6
  • @typescript-eslint/eslint-plugin & @typescript-eslint/parser -
    4.11.0 -> 5.30.7
  • electron - 11.1.1 -> 19.0.9
  • eslint-config-airbnb - 18.2.1 -> 19.0.4
  • copy-webpack-plugin - 7.0.0 -> 11.0.0
  • css-loader - 5.0.1 -> 6.7.1
  • electron-builder - 22.9.1 -> 23.1.0
  • html-webpack-plugin - 4.5.0 -> 5.5.0
  • style-loader - 2.0.0 -> 3.3.1
  • ts-loader - 8.0.12 -> 9.3.1
  • ts-config-paths - 3.9.0 -> 4.0.0
• Minor & patch version updates:
  • eslint-import-resolver-webpack - 0.13.0 -> 0.13.2
  • eslint-plugin-import - 2.22.1 -> 2.26.0
  • eslint-plugin-jsx-a11y - 6.4.1 -> 6.6.1
  • eslint-plugin-react - 7.21.5 -> 7.30.1
  • eslint-plugin-react-hoots - 4.2.0 -> 4.6.0
  • lodash - 4.17.20 -> 4.17.21
  • webpack - 5.11.0 -> 5.73.0
  • webpack-cli - 4.3.0 -> 4.10.0

Removed

• react-router, react-router-dom, @types/react-router, @types/react-router-dom

  - Not being used in any part of the boilerplate

• @types/mocha, mocha, ts-node - Replaced by @types/jest, jest & ts-jest

• spectron - Deprecated package; No replacement

Donation

If you've found this project useful, consider buy me a coffee via donations or PayPal. 100% of your donation will fund my coffee buying budget for quality coffee beans from great roasters I know 😉 ☕

* Despite this release is published in late July, the next maintenance release v4.1.0 will be published on schedule in early August.

3.0.0 - 2020-12-26

Added

• NPM packages react-router & react-router-dom to package dependencies.
• NPM package eslint-plugin-react-hooks to devDependencies as required by the updated version of eslint-config-airbnb.
• NPM package copy-webpack-plugin to devDependencies as replacement of copy-pkg-json-webpack-plugin.
• NPM packages @typescript-eslint/eslint-plugin & @typescript-eslint/parser to devDependencies for using ESLint to lint TypeScript.

Changed

• Project is now being developed based on Node.js v14 (LTS).
• Minor version upgrades on package dependencies:
  • eslint-import-resolver-webpack - 0.11.1 -> 0.13.0
  • eslint-plugin-import - 2.18.2 -> 2.22.1
  • eslint-plugin-jsx-a11y - 6.2.3 -> 6.4.1
  • eslint-plugin-react - 7.17.0 -> ``7.21.5`
  • lodash - 4.17.15 -> 4.17.20
• Major version upgrades on package dependencies:
  • react & react-dom - 16.12.0 -> 17.0.1
  • cross-env - 5.2.1 -> 7.0.3
  • css-loader - 1.0.1 -> 5.0.1
  • electron - 3.1.13 -> 11.1.1
  • electron-builder - 20.44.4 -> 22.9.1
  • eslint - 5.16.0 -> 7.16.0
  • eslint-config-airbnb - 17.1.1 -> 18.2.1
  • file-loader - 2.0.0 -> 6.2.0
  • html-webpack-plugin - 3.2.0 -> 4.5.0
  • mocha - 5.2.0 -> 8.2.1
  • rimraf - 2.7.1 -> 3.0.2
  • source-map-loader - 0.2.4 -> 2.0.0
  • spectron - 5.0.0 -> 13.0.0
  • style-loader - 0.23.1 -> 2.0.0
  • ts-loader - 5.4.5 -> 8.0.12
  • ts-node - 7.0.1 -> 9.1.1
  • typescript - 3.7.2 - > 4.1.3
  • webpack - 4.41.2 -> 5.11.0
  • webpack-cli - 3.3.10 -> 4.3.0
• Moved @types packages from dependencies to devDependencies as those have no need to be included in production builds.
• Commands of NPM scripts dev & prod to make them work with Webpack 5.
• Migrated to ESLint from TSLint.
• Updated prefix of internal paths from @ to _ to avoid confusions with scoped NPM packages.
• Indentation for .ts files is now set as 2 spaces instead of 4.
• electron-builder settings:
  • win:
    • Enabled asar. (turn it off if the executable built doesn't work)
    • Disabled one click installer.
    • Allowed custom installation directory in the installer built.
  • mac:
    • Changed build target back to dmg.
  • buildVersion is now being used as build number instead of just another parameter for semantic version number.
• Updated section Known issues in README.

Fixed

• ESLint errors/warnings on main.ts & renderer.tsx.
• electron-builder fails to build dmg on macOS (issue electron-builder #3990)by upgrading the package version to > 21.2.0.

Removed

• NPM package copy-pkg-json-webpack-plugin as it doesn't work with Webpack 5 and seems not very well maintained.
• NPM packages acorn & ajv from devDependencies as they're not being used in this boilerplate.
• NPM packages tslint & tslint-microsoft-contrib as TSLint is now deprecated.

2.0.2 - 2019-12-02

v2.0.2 is a minor hotfix release fixed the documentation error and build
error on macOS Catalina(10.15+).

Added

• Extended README section Getting started with npm start command
  description.
• README section Known issue.

Changed

• Minor version upgrades on package dependencies.
• macOS build target to pkg from default dmg due to no 32-bit apps
  support from macOS Catalina that caused electron-builder fails to build
  dmg image on macOS prior to [email protected].
  pkg build is unaffected and is used as a workaround for the current version
  prior to the major version upgrades on dependencies in next release.
  Related issue: electron-builder #3990

Fixed

• [Issue #2] - incorrect command npm run install to npm install in README.

2.0.1 - 2019-02-05

v2.0.1 is a minor hotfix release patched the NODE_ENV not set on Windows
issue.

Added

• Package cross-env as devDependencies.
• README section "Author".

Fixed

• NPM scripts won't set environment variables on Windows issue.

2.0.0 - 2019-02-04

v2.0.0 is a major release that most part of the boilerplate has been rewritten.

Added

• ESLint for code checking on Javascript files.
• Airbnb's extensible .eslintrc package & its' peer dependencies.
• .eslintrc that extends Airbnb's config and has customised rules configured.
  • Rule no-default-export is set for JavaScript files to align with
    TypeScript.
• ESLint plugin eslint-import-resolver-webpack for ESLint to resolve path
  aliases set in Webpack config.
• Webpack plugin copy-pkg-json-webpack-plugin to generate a package.json
  file and pack into Webpack's bundled package for production.
• Build commands build:mac & build:win to package & build the installer of
  your Electron app for macOS & Windows using electron-builder.
• README section "Building the installer for your Electron app" & sub-section
  "Extra options".

Changed

• Refactored Webpack config file to have mainConfig & rendererConfig
  cleaned up, and set mode by environment variable.
• .gitignore to ignore folder out/ which will be auto-generated during the
  build process.
• README section "How does it work?" is now renamed to "Getting started" &
  completed the documentation of this section.
• README section "Folder structure" to reflect the changes in v2.0.0.

Fixed

• CSS files fail to inject into views issue by setting Webpack to use
  style-loader alongside with css-loader to bundle the files in Webpack
  config file.
• baseUrl in tsconfig.json points to root directory incorrectly issue.
  Corrected to current directory so VSCode can resolves the path aliases
  correctly.

Removed

• Redux & React-Redux related settings, including packages listed on
  devDependencies, path aliases & folders listed in folder structure.
  • Since Electron's built-in IPC & basic React states should be enough to get
    the works done, and most Electron apps which have their application logic
    runs on Electron's main process rather then renderer process actually
    don't need React-Redux, redux & react-redux are no longer included in
    this boilerplate.
  • Redux & React-Redux can still be used on this boilerplate by installing the
    package yourself. For details, please refer to the corresponding library's
    documents, there's no different than working on any other project which
    isn't based on this boilerplate.
• Separated Webpack config files for development & production mode.