A complete Lerna-Electron-React-TypeScript project boilerplate.
When developing electron applications, perhaps you want to separate main process codes and renderer process codes into isolated parallel packages, and perhaps even more structure-independent packages which are actually linked while using. For example:
root
├── app-main # main process source codes
├── app-renderer # renderer process source codes
└── app-common # some commonly used codes
That's why in this boilerplate we use Lerna to help managing such a monorepo
structure.
This boilerplate is constructed originally from electron-react-boilerplate, but changed greatly to support lerna
typescript
things. The webpack
related develop experience mainly comes from CRA and electron-webpack. It supports:
- monorepo maintained by lerna and yarn workspace mode
- typescript(v4.5+) and babel7 support
- eslint(with ts support), stylelint(with scss support), prettier and commitlint integrated
- smooth and friendly development experience from CRA and electron-webpack.
Just clone this repo and install using yarn
:
$ git clone [email protected]:aprilandjan/lerna-electron-react-typescript-boilerplate.git
$ yarn
yarn dev
Check more scripts in package.json
scripts field.
vscode
debugger supports only inline-source-map
. In order to debug main process in vscode debugger, we should:
- change webpack devtool into
inline-source-map
- use
sourceMapPathOverrides
inlaunch.json
to correctly map webpack resources into actual resource url - alternatively, use webpack devtoolModuleFilenameTemplate to change generated sourcemap data url.
yarn build
Check more scripts in package.json
scripts field.
yarn package
Check more scripts in package.json
scripts field.
lerna publish --bump 1.1.0
If you want to skip changes for specific files or modules, add --ignore-changes to specify them.
- use
lerna
- add electron icons
- ensure
dev
&build
progress - add renderer compile time progress
- automatically dll compare & rebuild
- check dll running speed
- app main watch & reload: reload: use webpack, listen its compile status
- main process ask for restart if needed
-
main process modules partly hot-reload - main & renderer communicate through node ipc
- extract webpack things into dev-utils
- customizable build step
- whole project building process
- fix main bundle build warning
- pack electron app
- add
typescript
- allow
typescript
path alias - allow mixed
js(x)
andts(x)
- encapsuled eslint config
- encapsuled babel config
- style class name generation
- tsconfig include only src(or exclude
node_modules
) to speed up typechecking - user customized webpack config merging
- renderer webpack externals be default set as the main package's dependencies
- support unittest
- support e2e test
- attach debugger for main process in vscode
- attach debugger for main process while startup: add cmd to disable auto launch electron while dev, and extra vscode launch config
- attach debugger for renderer process in vscode
-
separated eslint rules for node scripts and browser scripts -
add eslint in webpack compile check - allow skip typechecking in webpack compiler
- webpack resolve and build lerna modules
- electron builder(asar) packing
- support
require.context
with webpack alias path -
lerna command registered with dotenv filesmakedev-utils
env read from lerna root path prior - find out unused files in main/renderer bundle
- logger info output time diff in ms like
debugger
- allow filter electron output message
- bug: set env always later than read dotenv files
- allow app-module build without webpack (using tsc and babel only)
- allow workspace code compile altogether
- configurable electron-builder options for mac/win separately
- bug: windows cannot quit dev process smoothly
- support
func?.()
in js files - use
find-lerna-package
to locate sub packages - ipc server automatically satisfied ipc client count
- parallel build sub packages
- complete type-safe components with
redux
react-thunk
, etc - when bundling node codes, automatically external all node_modules packages
- support
type-safenode require in webpack bundled files references - use
execa
instead of nativechild_process
- inject bundle build information, such as
commitId
,branchName
,buildTime
,buildMachine
,buildPipelineId
into process env - automatically generate changelog files(
for different major/minor versions) - when failed to launching electron, find if existed process is running and print warning (and force kill it in some seconds)
-
handle with "failed to fetch extension, trying x more times" - skip use of
yarn
to rundev
&build
- add timestamp before each output line
- outputs from std error are marked as red
- allow disable console time prefix & suffix
-
bug: sometimes press ctrl+c cannot terminate process, for example, when press fn+callow pressX
to exit dev process - the resources of each sub-modules when bundled support
-
use rollup to compile & bundle esm modules - create bundle at the root directory of the workspace
- bug: spawned child process did not exit when terminated in windows
- add unittest for dev scripts
- make execa not spawn process with extra shell processes
- customize testing-library
data-testid
(ref) - make clear electron app running environments while e2e tests
- when electron process exit as expected, do not quit dev process automatically
- renderer webpack automatically exclude main dependencies
- support multiple dev instance running in same computer
- allow press
C
to clear console if TTY - bug: json serialized outstream does not displayed completely in main process
- use ultra-runner to call npm scripts
- bugfix: set
PORT
env does not correctly apply to theElectron: Main
launch script - bugfix: listener leaks when restart electron dev process
- use esbuild to speed up dev & build
- allow press
Q
to quit running electron app - specify different shortcut for vscode launch tasks(ref)
- allow watch & reload env files and restart dev process
- refactor the ipc controlling to distinguish the client and server logics
- configure pipeline to run unit & e2e tests
- use pnpm to speed up installation
- multiple ts modules compilation together
- extract main/renderer/module configuration into root level configuration file
- webpack injected env
APP_NAME
APP_VERSION
should be loaded from project root - defect: webpack & babel-loader cannot emit declarations, need a solution for this(solution)
- defect: since
tsc
does not support emit js with resolved alias path, need a solution for this - fix annoying electron main process error outputs caused by
electron-devtools-installer
andreact-hot
possibly - migrate spectron to playwright
- https://github.com/electron-react-boilerplate/electron-react-boilerplate
- https://github.com/electron-react-boilerplate/examples/tree/master/examples/typescript
- https://github.com/amaurymartiny/cra-lerna-electron
- https://webpack.js.org/configuration/devtool/
- https://code.visualstudio.com/docs/nodejs/nodejs-debugging#_source-maps
- https://webpack.js.org/api/module-variables/#__non_webpack_require__-webpack-specific
- https://github.com/seymen/git-last-commit
- https://github.com/electron-userland/spectron
- http://v4.webdriver.io/api.html
- https://www.typescriptlang.org/docs/handbook/project-references.html
- https://github.com/RyanCavanaugh/project-references-demo
- https://github.com/NiGhTTraX/ts-monorepo/tree/project-references
- https://medium.com/@NiGhTTraX/how-to-set-up-a-typescript-monorepo-with-lerna-c6acda7d4559