Lerna-Electron-React-TypeScript Boilerplate

A complete Lerna-Electron-React-TypeScript project boilerplate.

Why

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.

Features

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.

Usage

Just clone this repo and install using yarn:

$ git clone git@github.com:aprilandjan/lerna-electron-react-typescript-boilerplate.git
$ yarn

Develop

yarn dev

Check more scripts in package.json scripts field.

Debug Main Process

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 in launch.json to correctly map webpack resources into actual resource url
• alternatively, use webpack devtoolModuleFilenameTemplate to change generated sourcemap data url.

Build

yarn build

Check more scripts in package.json scripts field.

Release

yarn package

Check more scripts in package.json scripts field.

Version & Changelog

lerna publish --bump 1.1.0

If you want to skip changes for specific files or modules, add --ignore-changes to specify them.

TODO

• 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) and ts(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 files make dev-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-safe node require in webpack bundled files references
• use execa instead of native child_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 run dev & 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+c allow press X 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 the Electron: 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 and react-hot possibly
• migrate spectron to playwright

References

• 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