electron-esbuild

Easily integrate esbuild for your Electron environment.

Features

Use of esbuild for main source code building
Use of esbuild or webpack for renderer source code building
HMR for renderer and main processes
Full control of your esbuild configuration
Full control of your webpack configuration
Use electron-builder for final package

Create a Electron app

npx create-electron-esbuild-app --name my-app --package-manager npm --template react-typescript

Manual

npm i -D electron-esbuild

Start a development build (example)

npx electron-esbuild dev

Create a build (example)

npx electron-esbuild build

npx electron-esbuild build --no-clean # do not clean output before build

Package the app (example)

npx electron-builder

You can use this example for a starter React with TypeScript

Configuration

Create a electron-esbuild configuration electron-esbuild.config.yaml

mainConfig:
  type: esbuild # currently, only esbuild is supported for mainConfig
  path: esbuild.main.config.js
  src: src/main/main.ts
  output: dist/main
rendererConfig:
  type: esbuild # 'webpack' for using webpack in renderer, see examples/react-typescript-webpack
  path: esbuild.renderer.config.js
  html: src/renderer/index.html
  src: src/renderer/index.tsx
  output: dist/renderer

Main esbuild config

See example

const path = require('path')

/** @var {Partial<import('esbuild').BuildOptions>} */
module.exports = {
  platform: 'node',
  entryPoints: [path.resolve('src/main/main.ts')],
  bundle: true,
  target: 'node14.16.0', // electron version target
  loader: {
    '.ts': 'ts',
  },
}

Renderer esbuild configuration