electron-esbuild

Stars are welcome 😊

A package to build your electron app with esbuild.

✨ Features

• Build your electron app with esbuild
• Start a hot reload dev server for your renderer process
• Copy static files to the output directory
• Support to use vite for the renderer process
• Support for preload scripts
• Support for esbuild loaders and exclude options in each configuration
• Support for multiple main, preload and renderer configurations.

📥 Installation

npm install @eduardoleolim/electron-esbuild --save-dev

🖥️ Usage

npx electron-esbuild <command> [options]

⌨️ Commands

🛠️ build

Builds your electron app.

Options:

• --config or -c Config file path.
• --vite Use vite for the renderer process. Default: false

npx electron-esbuild build [--config electron-esbuild.config.json] [--vite]

👨‍💻 dev

Builds your electron app and starts a dev server for your renderer process.

Options:

• --config or -c Config file path.
• --vite Use vite for the renderer process. Default: false
• --clean Clean the output directory before building. Default: false

npx electron-esbuild dev [--config electron-esbuild.config.json] [--vite] [--clean]

⚙️ Configuration

You can configure the build with a json or yaml file in the root of your project. It looking for a config file named electron-esbuild.config.json or electron-esbuild.config.yaml.

Electron-esbuild will look for the config file in the following order:

• The path specified in the --config option
• The default yaml file
• The default json file

Electron Config

The electron config has the following properties:

• output - Optional. The output directory of your electron app, default: dist. It is relative to the root of your project
• main - The main process config
• preloads - Optional. A preload config can be an array of configs or a single config
• renderers - The renderer process config can be an array of configs or a single config
• resources - Optional. An array of files to copy to the output directory

{
  "output": "<rootProjectDir>/<outputDir>",
  "main": {
    ...
  },
  "preloads": [
    ...
  ],
  "renderers": [
    ...
  ],
  "resources": [
    ...
  ]
}

Main Config

The main config has the following properties:

• entry - The entry file of your main process
• args - Optional. The arguments to pass to the main process
• output - The output configuration of bundle
  • directory - The output directory of your main process. It is relative to the output property of ElectronConfig
  • filename - The output filename of your main process
• base - Optional. The path of esbuild config file
• exclude - Optional. An array of libs that you don't want to bundle
• loaders - Optional. An array of esbuild's loaders for specific files

{
  "entry": "<rootProjectDir>/main/file/directory",
  "args": [
    ...
  ],
  "output": {
    "directory": "<outputDir>/directory",
    "filename": "filename"
  },
  "base": "<rootProjectDir>/esbuild/config/file",
  "exclude": [
    ...
  ],
  "loaders": [
    ...
  ]
}

Preload Config

The preload config is composed of the following properties:

• entry - The entry file of your preload process
• renderers - Optional. An array of indexes of renderer configs that will be used to reload the renderer process when the preload process is updated
• output - The output configuration of bundle
  • directory - Optional. The output directory of your preload process. Default: same as output.directory of MainConfig
  • filename - The output filename of your preload process
• base - Optional. The path of esbuild config file
• exclude - Optional. An array of libs that you don't want to bundle
• loaders - Optional. An array of esbuild's loaders for specific files

{
  "entry": "<rootProjectDir>/preload/file/directory",
  "renderers": [0, 1],
  "output": {
    "directory": "<outputDir>/directory",
    "filename": "filename"
  },
  "base": "<rootProjectDir>/esbuild/config/file",
  "exclude": [
    ...
  ],
  "loaders": [
    ....
  ]
}

Renderer Config

The renderer config has the following properties:

• entry - The entry file of your renderer process
• html - The html file of your renderer process
• devPort - Optional. The port of the dev server. If port is not available, it will try the next one
• output - The output configuration of bundle
  • directory - Optional. The output directory of your renderer process. Default: same as output.directory of MainConfig
  • filename - The output filename of your renderer process
• base - Optional. The path of esbuild or vite config file
• exclude - Optional. An array of libs that you don't want to bundle
• loaders - Optional. An array of esbuild's loaders for specific files

{
  "entry": "<rootProjectDir>/renderer/file/directory",
  "html": "<rootProjectDir>/html/file/directory",
  "devPort": 8000,
  "output": {
    "directory": "<outputDir>/directory",
    "filename": "filename"
  },
  "base": "<rootProjectDir>/esbuild-or-vite/config/file",
  "exclude": [
    ...
  ],
  "loaders": [
    ...
  ]
}

Resources Config

The resources config could be a string or an object.

If it is a string, it will be copied to the output directory of ElectronConfig.

If it is an object, it is composed of the following properties:

• from - The path of the file to copy
• to - Optional. The path of the file in the output directory. Default: same as output.directory of ElectronConfig

The to property also can be and object with the following properties:

• directory - The output directory of the file
• filename - The output filename of the file

[
  "path/to/file",
  "path/to/directory",
  {
    "from": "path/to/file",
    "to": "<outputDir>/path/to/output/directory"
  }.
  {
    "from": "path/to/file",
    "to": {
      "directory": "<outputDir>/path/to/output/directory",
      "filename": "filename"
    }
  }
]

😊 Thanks

Inspired by electron-esbuild of Kiyozz.

📄 Examples

There are some examples in the examples directory.

• basic-js - A basic example with javascript using the basic configuration of electron-esbuild.
• basic-ts - A basic example with typescript using the basic configuration of electron-esbuild.
• react-ts - An example with react and typescript using the basic configuration of electron-esbuild with esbuild loaders for renderer process.
• svelte-ts - An example with svelte and typescript using the basic configuration of electron-esbuild. Also, it shows how to use an esbuild config file for the renderer process.
• tailwind-ts - An example with tailwind, react and typescript.