⚡

React+viteとelectronでデスクトップアプリっぽいものを作りたい②

2025/03/09に公開

2025/09/29

 前回記事https://zenn.dev/tarotarotaros/articles/2025-03-09_1

 exe化electron-builderのインストール
npm install electron-builder --save-dev
参考記事
https://qiita.com/saki-engineering/items/203892838e15b3dbd300
package.json
package.jsonのbuild項目は、electron-builderを使用してアプリケーションをパッケージする際の設定を指定します。以下はその主な内容です。files: パッケージに含めるファイルやディレクトリを指定します。ここでは、distフォルダ、main.js、preload.js、package.jsonが含まれます。
  "version": "0.0.0", //←ここはsetupに影響する
...
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "electron": "set NODE_ENV=development && electron .",
    "electron:build": "npm run build && electron .",
    "lint": "eslint .",
    "preview": "vite preview",
    "dist": "electron-builder" // ←ここ追加
  },
...
  // build項目の追加
  "build": {
    "files": [
      "dist/**/*",
      "main.js",
      "preload.js",
      "package.json"
    ]
  }
...

 インストーラー作成・実行$ npm run dist
ここでは「desktoptest Setup 1.0.0.exe」を実行してインストールを実行します。
C:\Users\UserName\AppData\Local\Programs\desktoptestにファイル一式が配置されました。また正しく実行されました。

 まとめプロジェクト作成→electron導入→カスタムタイトルバー作成→electron-builderでインストーラ作成→インストール実行→デスクトップアプリ化という流れで実装

前回記事

exe化

インストーラー作成・実行

まとめ

Discussion