最北端で暮らすSEのknowhow

・debian 12.6
・vscode 1.89.1
・node 20.13.1
・typescript 5.4.5
・vite 5.2.12
・react 18.3.3
・electron 30.0.9

viteでプロジェクトを作成する。

$ npm create vite sample-app -- --template react-ts

electronをインストールする。

$ cd sample-app
$ npm install --save-dev electron electron-builder

electron用のディレクトリを作成する。

$ mkdir electron/

electronに必要なファイルを作成する。

• electron/main.ts
• electron/preload.ts
• electron/tsconfig.json

プロジェクトルートにあるtsconfig.jsonに作成したディレクトリを追加する。

    …
    "include": ["src", "electron"],
    …

preload.tsに定義されたAPIの動作確認のため、App.tsxの適当な場所に下記を追記する。

    …
    <button onClick={() => { alert(window.counterAPI.count()) }}>
        counting via API
    </button>
    …

vite.config.tsに相対パスを使用する定義と、Reactのビルド出力先の定義を追記する。

…
export default defineConfig({
  plugins: [react()],
  base: "./",
  build: {
    outDir: "build/"
  }
})

package.jsonにtypeとmainを定義する。typeはデフォルトでcjsなので削除してしまっても良い。

    …
    "type": "commonjs",
    "main": "build/electron/main.js",
    …

package.jsonに開発用とビルド用のスクリプトを追記する。

    …
    "scripts": {
        …
        "electron:dev": "tsc -p electron/ && electron . & vite",
        "electron:build": "tsc && vite build && tsc -p electron/ && electron-builder --dir"
    },
    …

package.jsonにビルドに必要な情報を追記する。

    …
    "build": {
        "appId": "com.example.sample-app",
        "productName": "SampleApp",
        "files": [
            "build/**/*"
        ]
    },
    …

reactのホットリロードを利用して開発用にアプリを起動する。

$ npm run electron:dev

アプリをビルドする。

$ npm run electron:build

    import { app, BrowserWindow } from "electron";
    import path from "path";
    import URL from "url";
    
    const createWindow = () => {
        const window = new BrowserWindow({
            width: 800,
            height: 600,
            webPreferences: {
                preload: path.join(__dirname, "preload.js"),
            },
        });
        window.loadURL(app.isPackaged
            ? URL.format({
                pathname: path.join(__dirname, "../index.html"),
                protocol: "file:",
                slashes: true
            })
            : "http://localhost:5173"
        );
        if (app.isPackaged === false) {
            window.webContents.openDevTools();
        }
    };
    
    app.on('ready', createWindow);
    
    app.on("window-all-closed", () => {
        app.quit();
    });
    

    import { contextBridge } from "electron";
    
    declare global {
        interface Window {
            counterAPI: {
                count: () => number;
            };
        }
    }

    let counted = 0;

    contextBridge.exposeInMainWorld("counterAPI", {
        count: () => {
            return ++counted;
        },
    });
    

    {
        "compilerOptions": {
            "target": "ES2020",
            "module": "CommonJS",
            "strict": true,
            "rootDir": "../",
            "outDir": "../build/",
            "esModuleInterop": true
        },
        "include": [
            "*.ts"
        ]
    }