コマンド一発で Electron x React x Vite x TypeScript プロジェクトを作成する

プロジェクトのスキャフォルド

create-electron を使うとコマンド一発で簡単にプロジェクトをスキャフォルドできます。

Feature

Use ESLint + Prettier to better lint and style your code, help you to write high-quality code.
Use electron-vite, a fast build tooling integrated with Vite 3, support for HMR, hot reloading, debugging and source code protection.
Use electron-toolkit to help you develop. For example: TSconfig extends, easily expose Electron APIs to renderers in preload scripts, etc.
Use electron-builder and pre-configured to pack your app.
Use electron-updater for auto-update, based on electron-builder.

$ pnpm create @quick-start/electron

作成するプロジェクトについて質問されるので回答します。

? Project name: 任意
? Select a framework: react
? Add TypeScript: yes
? Add Electron updater plugin: No / Yes # 自動アップデートのプラグインを導入するかどうか
? Enable Electron download mirror proxy: No / Yes # Electron をミラーからダウンロードするかどうか

質問に答えた後、パッケージインストールして pnpm dev するだけでアプリが立ち上がります。

$ pnpm install
$ pnpm dev