ViteのElectron環境で簡単にWindowsアプリとインストーラーを作成

今回Vite（7.0.0）のElectron環境をWindows上で試したので、その結果をレポートしたい。

環境作成

• Windows版Node.js（現22.16.0、互換22.12以上）がインストールされていること
• コマンドプロンプトでnpm create viteを実行（以下を参照）

C:\PATH\TO\FOLDER>npm create vite
※以降「← 入力」や「← 選択」は会話形式で入力／選択した内容

> npx
> create-vite

│
◆  Project name:
│  electron1  ← 入力
└

│
◆  Select a framework:
│  ○ Vanilla
│  ○ Vue
│  ○ React
│  ○ Preact
│  ○ Lit
│  ○ Svelte
│  ○ Solid
│  ○ Qwik
│  ○ Angular
│  ○ Marko
│  ● Others  ← 選択
└

│
◆  Select a variant:
│  ○ Extra Vite Starters ↗
│  ● Electron ↗ (npm create electron-vite@latest)  ← 選択
└

> npx
> create-electron-vite electron1

? Project template: ≫ - Use arrow-keys. Return to submit.
    Vue
>   React  ← 選択
    Vanilla

※以降は画面に残った表示内容

> npx
> create-vite

│
◇  Project name:
│  electron1
│
◇  Select a framework:
│  Others
│
◇  Select a variant:
│  Electron ↗

> npx
> create-electron-vite electron1

√ Project template: » React

Scaffolding project in C:\PATH\TO\FOLDER\electron1...

Done. Now run:

  cd electron1
  npm install
  npm run dev

• 画面に表示されたメッセージに従ってcd electron1とnpm installを実行

試運転

• 画面に表示されたメッセージに従ってnpm run devを実行
• 以下の画面が表示されることを確認

※ちなみに、いずれかのロゴをクリックすると別ウィンドウが表示されて、そこにリンク先のページが表示される。

ビルド

• npm run buildを実行すると、EXE化とインストーラーの作成まで一気通貫で行われる

npm run buildの実行は「管理者として実行」したコマンドプロンプトで行わないとエラーが発生する

• 以下の「←」付きコメントの通り、インストーラーとEXE化されたアプリが保存された

C:\PATH\TO\FOLDER\electron1\release>tree /f
フォルダー パスの一覧
ボリューム シリアル番号は 9EB8-A658 です
C:.
└─0.0.0
    │  builder-debug.yml
    │  builder-effective-config.yaml
    │  YourAppName-Windows-0.0.0-Setup.exe  ← インストーラー
    │  YourAppName-Windows-0.0.0-Setup.exe.blockmap
    │
    └─win-unpacked
        │  chrome_100_percent.pak
        │  chrome_200_percent.pak
        │  d3dcompiler_47.dll
        │  ffmpeg.dll
        │  icudtl.dat
        │  libEGL.dll
        │  libGLESv2.dll
        │  LICENSE.electron.txt
        │  LICENSES.chromium.html
        │  resources.pak
        │  snapshot_blob.bin
        │  v8_context_snapshot.bin
        │  vk_swiftshader.dll
        │  vk_swiftshader_icd.json
        │  vulkan-1.dll
        │  YourAppName.exe  ← EXE化されたアプリ
        │
        ├─locales
        │      ... 多いので割愛 ...
        │      ja.pak
        │      ... 多いので割愛 ...
        │
        └─resources
                app.asar
                elevate.exe

まとめ

• viteを使えば、とても簡単にWindowsアプリを作成できることが体験できた
• プロジェクトフォルダのelectron-builder.json5を修正することで、自分好みのEXEファイル名、アイコン、インストーラーファイル名が設定できる（要確認）
  参照：https://github.com/pure-admin/electron-pure-admin/blob/master/electron-builder.json5
• ElectronはマルチOS対応なので、MacアプリやLinuxアプリも作成できることが素晴らしい
• Electronではローカルファイルにアクセス可能なので、正しくローカル環境で実行するアプリが作成可能
  参照：https://qiita.com/rnsm504/items/dd4ed2d01fdd415635e5