Electron + Vite + Typescript + React – 桌面應用開發 ep1. 環境設定

參考 Electron Course - Code Desktop Applications (inc. React and Typescript)

Create project

建一個資料夾，並進入資料夾路徑

create vite project
```
npm create vite .
```
- 選 React
- 選 TypeScript
所有檔案會出現長這樣
安裝package.json的東西
```
npm install
```
就會出現 node_modules，裡面就會一堆 dependencies，到這部就算是初步完成project的建置
檢查是否可以跑出預設的介面
- 先下指令
```
npm run dev
```
- 會在預設的port長這樣

設定 React

存放 code 的 src/ 中新增一個 ui/ 資料夾
把預設的的檔案都放到 ui/ 底下
設定 ui 的 javascript 路徑，因為他剛剛被我移到 ui/ 底下了
測試一下目前做的對不對
```
npm run dev
```
把 vite 的 icon圖片svg 還有不用的東西刪掉
- public 這裡可以整個刪掉
- 把有用到這張圖的地方也刪掉
- 就剩這樣
設定 包裝完的程式 要放哪個路徑
- 首先看到他原本 build 完是直接丟在 dist/ 底下
```
npm run build
```
- 為了跟 electron 的 build 出來的東西有區別，在 vite.config.ts 中設定 output 的路徑
- 在跑一次 build，他就會到我們指定的 dist-react/ 中了，這時候 dist/ 就可以刪掉了
```
npm run build
```
- 最後，記得把他加到 .gitignore，這樣他就不會被 push 上去了

設定 Electron

安裝 electron

npm install --save-dev electron

在 src/ 底下創建 electron/ ，並新增 main.js

main.js: 控制 electron 的介面，叫他載入 dist-react/index.html

import {app, BrowserWindow} from 'electron';
import path from 'path';

app.on("ready", ()=>{
    const mainWindow = new BrowserWindow({});    
    mainWindow.loadFile(path.join(app.getAppPath(), '/dist-react/index.html'))
})

在 package.json 設定主要程式進入點，以及react和electron的執行腳本

{
    ...
    "main": "src/electron/main",
    "homepage": "./",
    "scripts":{
        "dev:react": "vite",
        "dev:electron":"electron .",
        ...
    }
}

到 vite.config.ts 中設定路徑
- 加上相對路徑的符號 ./
- 否則build出來會長這樣，這樣會找不到檔案
開始跑 electron 應用程式
```
npm run dev:electron
```

設定 TypeScript

刪先看到這三個檔案
- tsconfig.json：全局的配置。
- tsconfig.app.json：前端的配置（React 项目）。
  裡面加上這行表明這個 TypeScript 專案是一个複合專案，允許引用其他项目
```
{
    ...            
    "composite": true,
    ...
}
```
- tsconfig.node.json：後端的配置（Node.js 或 Electron）。
  裡面加上這行表明這個 TypeScript 專案是一个複合專案，允許引用其他项目
```
{
    ...            
    "composite": true,
    ...
}
```
在全局的 tsconfig.json 中指定包含和不包含設定涵蓋的範圍
在 electron/ 底下新增 tsconfig.json，並把 main.js 改名為 main.ts

在 electron/tsconfig.json 中

{
    "compilerOptions": {
      // require strict types (null-save)
      "strict": true,
      // tell TypeScript to generate ESM Syntax
      "target": "ESNext",
      // tell TypeScript to require ESM Syntax as input (including .js file imports)
      "module": "NodeNext",
      // define where to put generated JS
      "outDir": "../../dist-electron",
      // ignore errors from dependencies
      "skipLibCheck": true
    }
  }

在 package.json 加入 electron/tsconfig.json 編譯

"scripts":{
    ...,
    "transpile:electron": "tsc --project src/electron/tsconfig.json"
}

執行 build，就會看到build完的東西跑到 dist-electron/ 底下了
```
npm run transpile:electron
```

package.json 設定程式進入點為 electron/main，因為我們是要跑 electron 而不是 react

{
    ...
    "main": "dist-electron/main.js",
    ...
}

測試能不能跑
```
npm run dev:electron
```
應該要是依樣長這樣喔
最後，記得加到 .gitignore，設定TypeScript到這就結束了

設定 electron-builder

安裝 electron-builder

npm i --save-dev electron-builder

設定要件成怎樣的執行檔

創建 electron-builder.json

在 electron-builder.json 設定不同平台要創建的執行檔格式，icon的部分隨便，沒有設定應該就是預設的 icon

{
    "appId": ".com.lun.ICDApp",
    "files":["dist-electron", "dist-react"],
    "icon": "desktopIcon.png",
    "mac":{
        "target":"dmg"
    },
    "linux":{
        "target":"AppImage",
        "category":"Utility"
    },
    "win":{
        "target":["portable", "msi"]
    }
}

在 package.json 中設定生成執行檔的腳本

{
    ...,
    "scripts":{
        ...,            
        "dist:mac": "npm run transpile:electron && npm run build && electron-builder --mac --arm64",
        "dist:win": "npm run transpile:electron && npm run build && electron-builder --win --x64",
        "dist:linux": "npm run transpile:electron && npm run build && electron-builder --linux --x64",
    },
    ...
}

看你用啥 OS，就執行哪個，阿我是 windows
```
npm run dist:win    
```
到產生執行檔的路徑 dist/
長這樣就代表build的功能設定完成了!

設定開發模式和生產模式

安裝 corss-env
```
npm i --save-dev cross-env
```

到 package.json 設定辨別現在的模式是 development 在執行 electron

{
    ...,
    "scripts":{
        ...,
        "dev:electron": "cross-env NODE_ENV=development electron .",
    },
    ...
}

上面是OS 知道現在啥情況，但是程式碼並不知道，所以現在要寫一個程式來判斷現在是開發模式還是啥
- 先在 src/electron/ 底下創建一個 util.ts
- 判斷函數 isDev()
```
export function isDev(): boolean {
  return process.env.NODE_ENV === 'development';
}
```
在 vite.config.ts 設定 react 要跑在哪個 port，port 那個就看你自己可以隨便定
先測試 react 是不是跑在 port 上
```
npm run dev:react
```
水 :laughing:

對於 electron 到底要載哪個，介面也要設定，到 src/electron/main.ts

import {app, BrowserWindow} from 'electron';
import path from 'path';
import { isDev } from './util.js';


app.on("ready", ()=>{
    const mainWindow = new BrowserWindow({ });    

    if(isDev()){         
        // 如果是開發模式
        mainWindow.loadURL('http://localhost:5173');
    }else{
        // 如果是生產模式
        mainWindow.loadFile(path.join(app.getAppPath(), '/dist-react/index.html'))
    }
})

開始測試
要開兩個 terminal，順序沒差，如果沒開react server的話electron就開不了喔
- 一個執行 react 的 server
```
npm run dev:react
```
- 一個執行 electron 的應用程式
```
npm run dev:electron
```

優化開發

為了不用每次都要開兩個 terminal

安裝 npm-run-all
```
npm i npm-run-all
```

package.json 修改執行腳本

{
    ...,
    "scripts": {
        "dev": "npm-run-all --parallel dev:react dev:electron", //加這行
        "dev:react": "vite",
        "dev:electron": "npm run transpile:electron && cross-env NODE_ENV=development electron .",//改這行
        "build": "tsc -b && vite build",
        "lint": "eslint .",
        "preview": "vite preview",
        "transpile:electron": "tsc --project src/electron/tsconfig.json",
        "dist:mac": "npm run transpile:electron && npm run build && electron-builder --mac --arm64",
        "dist:win": "npm run transpile:electron && npm run build && electron-builder --win --x64",
        "dist:linux": "npm run transpile:electron && npm run build && electron-builder --linux --x64"
  },
}

這樣之後開發就只要跑一行就行
```
npm run dev
```
vite 支持 HMR，所以就一邊改程式，畫面也會跟著變

可以開始開發app了!

Electron + Vite + Typescript + React – 桌面應用開發 ep1. 環境設定

Create project

設定 React

設定 Electron

設定 TypeScript

設定 electron-builder

設定開發模式和生產模式

優化開發

Read more

2025q1 Homework5 (assessment)

2025q1 Homework3 (kxo)

2025q1 Homework1 (ideas)

2025q1 Homework1 (lab0)