Skip to content

aprilandjan/lerna-electron-react-typescript-boilerplate

Repository files navigation

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:

Usage

Just clone this repo and install using yarn:

$ git clone [email protected]: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

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published