electron-esbuild

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

See example

const path = require('path')

/** @var {Partial<import('esbuild').BuildOptions>} */
module.exports = {
  platform: 'browser',
  entryPoints: [path.resolve('src/renderer/index.tsx')],
  bundle: true,
  target: 'chrome89', // electron version target
  loader: {
    '.ts': 'ts',
    '.tsx': 'tsx',
    '.css': 'css',
  },
}