Pre-configured boilerplate for Electron + React + TypeScript + Webpack
MIT License
Bot releases are visible (Hide)
Published by iamWing about 2 years ago
jest.config.ci.mjs
.lint
to run ESLint from CLI.jest
to replace the original test
script with the following changes:
jest --clearCache
at the beginning as the updated Jest & ts-jest settings execute the dynamic import lines with no issue.NODE_NO_WARNINGS=1
.jest-ci
to run Jest with CI config - jest.config.ci.mjs
.mjs
.ts-jest
config to transform
(#40)test
script to run scripts lint
then jest
.moduleResolution
in tsconfig
to Node
(means .js
file extension on relative imports is now OPTIONAL).pathsToESModuleNameMapper
in jest.config.js
to return a less clumsy mapping object.@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)@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)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 😉 ☕
Published by iamWing about 2 years ago
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
.import/no-extraneous-dependencies
on unit test files.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.electron
- 20.0.1
-> 20.0.2
eslint
- 8.21.0
-> 8.22.0
eslint-import-resolver-typescript
- 3.4.0
-> 3.4.1
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 😉 ☕
Published by iamWing about 2 years ago
@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
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 😉 ☕
Published by iamWing about 2 years ago
tsconfig.eslint.json
to avoid ESLint complains for file not being included in project provided..eslintrc
(ESLint config with no file extension) to CommonJS
file - .eslintrc.cjs
, with the following changes on the configurations:
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.webpack.config.js
by migrating to webpack-merge
from using lodash.deepClone()
for merging configuration objects."type": "module"
in package.json
).jest.config.js
& webpack.config.js
.eslint-import-resolver-typescript
- Enhanced TypeScript support for ESLint import
plugin
webpack-merge
- Replaced the sections using lodash.deepClone()
in webpack.config.js
electron
- 19.0.9
-> 20.0.1
tsconfig-paths-webpack-plugin
- 3.5.2
-> 4.0.0
@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
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
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 😉 ☕
Published by iamWing about 2 years ago
main
.watch-test
to run Jest in watch mode.next-rc
, next-patch
, next-minor
& next-major
for quick package version number advance.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.createRoot
API introduced in React v18
.main
entry script:
mainWindow
now use loadFile
API instead of loadURL
.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.electron-builder
, Webpack & Webpack-related packages to optionalDependencies
.README
.import default
statement on non ES modules (e.g. React, lodash) by enabling esModuleInterop
in tsconfig
. #14@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
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
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
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
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.
Published by iamWing almost 4 years ago
react-router
& react-router-dom
to package dependencies.eslint-plugin-react-hooks
to devDependencies
as required by the updated version of eslint-config-airbnb
.copy-webpack-plugin
to devDependencies
as replacement of copy-pkg-json-webpack-plugin
.@typescript-eslint/eslint-plugin
& @typescript-eslint/parser
to devDependencies
for using ESLint to lint TypeScript.v14 (LTS)
.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
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
@types
packages from dependencies
to devDependencies
as those have no need to be included in production builds.dev
& prod
to make them work with Webpack 5.@
to _
to avoid confusions with scoped NPM packages..ts
files is now set as 2
spaces instead of 4
.electron-builder
settings:
win
:
asar
. (turn it off if the executable built doesn't work)
mac
:
dmg
.buildVersion
is now being used as build number instead of just another parameter for semantic version number.Known issues
in README
.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
.copy-pkg-json-webpack-plugin
as it doesn't work with Webpack 5 and seems not very well maintained.acorn
& ajv
from devDependencies
as they're not being used in this boilerplate.tslint
& tslint-microsoft-contrib
as TSLint is now deprecated.Published by iamWing almost 5 years ago
v2.0.2
is a minor hotfix release fixed the documentation error and build
error on macOS Catalina(10.15+)
.
Getting started
with npm start
commandKnown issue
.macOS
build target to pkg
from default dmg
due to no 32-bit appsmacOS Catalina
that caused electron-builder
fails to builddmg
image on macOS
prior to [email protected]
.pkg
build is unaffected and is used as a workaround for the current versionnpm run install
to npm install
in README
.Published by iamWing over 5 years ago
v2.0.1
is a minor hotfix release patched the NODE_ENV
not set on Windows
issue.
cross-env
as devDependencies
.Published by iamWing over 5 years ago
v2.0.0
is a major release that most part of the boilerplate has been rewritten.
.eslintrc
package & its' peer dependencies..eslintrc
that extends Airbnb's config and has customised rules configured.
no-default-export
is set for JavaScript files to align witheslint-import-resolver-webpack
for ESLint to resolve pathcopy-pkg-json-webpack-plugin
to generate a package.json
build:mac
& build:win
to package & build the installer ofelectron-builder
.mainConfig
& rendererConfig
.gitignore
to ignore folder out/
which will be auto-generated during thev2.0.0
.style-loader
alongside with css-loader
to bundle the files in WebpackbaseUrl
in tsconfig.json
points to root directory incorrectly issue.devDependencies
, path aliases & folders listed in folder structure.
main
process rather then renderer
process actuallyredux
& react-redux
are no longer included indevelopment
& production
mode.