vite + electron-builderが使いやすい

zenn過去記事からの転記です。
https://zenn.dev/hikaelis/articles/b0e68ec5f7a30e

electron + react + typescriptのプロジェクトを作るときに良い方法を見つけた。
electronでアプリを作るときに、様々なBoilerplateが存在するが、今は

• webpackよりも、vite,
• electron-forgeよりelectron-builderが主流

らしい (Electron公式はelectron-forgeを推しているが)。
そこでelectron-builderの公式サイトにおすすめされているBoilerplatesを試したが、
どれもTypeScript + Reactを使うとなると設定が面倒だった。
そこで見つけたのが以下。
https://evite.netlify.app/

なんとCLIでReact, TypeScriptを選ぶだけで、一発で環境を作ってくれた

npm create @quick-start/electron

webpackではなくviteなのでビルドもとても速い。メインプロセスとpreloadプロセスのホットリロードまで対応している。
また、公式ではあまり書かれていないが、package.jsonを確認するとelectron-builderまで対応していた。

"scripts": {
    "format": "prettier --write .",
    "lint": "eslint . --ext .js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix",
    "typecheck:node": "tsc --noEmit -p tsconfig.node.json --composite false",
    "typecheck:web": "tsc --noEmit -p tsconfig.web.json --composite false",
    "typecheck": "npm run typecheck:node && npm run typecheck:web",
    "start": "electron-vite preview",
    "dev": "electron-vite dev",
    "build": "npm run typecheck && electron-vite build",
    "postinstall": "electron-builder install-app-deps",
    "build:unpack": "npm run build && electron-builder --dir",
    "build:win": "npm run build && electron-builder --win",
    "build:mac": "electron-vite build && electron-builder --mac",
    "build:linux": "electron-vite build && electron-builder --linux"
  },

個人的に、electron-forgeよりelectron-builderを使いたかったのは、インストーラーをカスタマイズできるからだったため、
以下の設定をelectron-builder.ymlに加えた。

nsis:
  artifactName: ${name}-${version}-setup.${ext}
  shortcutName: ${productName}
  uninstallDisplayName: ${productName}
  createDesktopShortcut: always
  oneClick": false # add
  allowToChangeInstallationDirectory: true # add

https://www.electron.build/configuration/

を見れば様々なカスタマイズができる。

参考

https://github.com/alex8088/electron-vite
https://developer.mamezou-tech.com/blogs/2023/05/22/electron-vite/