[ElectronJS] 크로스 플랫폼 앱 with React

Pre-requsition

npx create-react-app . --template typescript

현재 디렉토리에 CRA Typescript Project를 생성해줍니다.

npm run eject

CRA Project를 Eject해줍니다.
더욱 많은 리소스를 사용할 수 있습니다.

npm install electron electon-is-dev

Electron 개발 환경을 설치합니다.

electron && electron-is-dev library는 package.json의 dependencies => devDependencies로 옮겨줍니다.

// ./public/electron.js

const path = require('path');
const url = require("url");

const { app, BrowserWindow } = require('electron');
const isDev = require('electron-is-dev');

function createWindow() {
  // Create the browser window.
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    },
  });

  const live = url.format({
    pathname: path.join(__dirname, "./index.html"),
    protocol: "file:",
    slashes: true,
  });
  win.loadURL(isDev ? 'http://localhost:3000' : live);
  // Open the DevTools.
  if (isDev) {
    win.webContents.openDevTools({ mode: 'detach' });
  }
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(createWindow);

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bars to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

public/electron.js 파일을 생성하고 위 코드를 입력합니다.

중요! Electron으로 패키징하는 과정은 React Project를 빌드하고난 Build 디렉토리 안의 결과물로 진행합니다. (Build 결과 Dir를 별도로 수정하지 않았을 경우)
따라서, Dev가 아닌 Prod 단계에서 win.loadURL을 Build 디렉토리 기준으로 작성바랍니다.

createWindow() : Electron Browser를 생성하는 함수입니다.

app.whenReady() : Electron App이 Onload되었을 때 createWindow()를 Trigger합니다.

app.on('window-all-closed', callback) : Windows 환경에서 Application의 창이 모두 닫혔을 때 callback 함수를 Trigger합니다.

app.on('activate', callback) : ???

// package.json

{
	
	"main": "public/electron.js",
	"homepage": "./",
    "scripts" : {
        "start": "node scripts/start.js",
        "build": "node scripts/build.js",
        "test": "node scripts/test.js",
        "react-start": "BROWSER=none npm start",
    	"electron-start": "electron ."
    },
    ...etc,
}

여기까지 작업이 되었다면 개발환경 구축은 끝이 났습니다.

npm run-script react-start를 실행 후,
새 터미널에서 npm run-script electron-start를 입력해줍니다.

---

Build Electron App

npm install electron-builder electron-builder-squirrel-windows

Cross Platform (Mac, Windows & Linux) 환경의 Application 제작이기에 electron-builder를 사용합니다.

* electron-builder VS electron-forge

	electron-forge	electron-builder
Package	Mac, Linux	Mac, Linux & Windows

// package.json

{
	...etc,
    "build": {
    "appId": "planet-node-electron",
    "files": [
      "build/**/*",
      "node_modules/**/*"
    ],
    "dmg": {
      "contents": [
        {
          "x": 110,
          "y": 150
        },
        {
          "x": 240,
          "y": 150,
          "type": "link",
          "path": "/Applications"
        }
      ]
    },
    "win": {
      "target": "squirrel",
      "icon": "./build/logo512.png"
    }
  },
}

package.json의 내용

// pacakge.json

"dist": "electron-builder -mwl",
"dist:mac": "electron-builder --mac --c.extraMetadata.main=build/electron.js",
"dist:windows": "electron-builder --windows --c.extraMetadata.main=build/electron.js"

scripts에 위와 같은 Electron 패키징 명령어를 입력합니다.

Dev 단계에서는 package.json의 main=public/electron.js을 읽어서 Compile을 합니다.

하지만, Prod 단계에서는 해당 build 디렉토리를 기준으로 Electron-builder가 프로젝트를 패키징하기 때문에 -c.extraMetadata.main=build/electron.js로 명시해줍니다.

이어서 windows app을 패키징하겠습니다.

npm run dist:windows 명령어를 입력하면 squirrelWindows.iconUrl is not specified...과 같은 에러를 마주하게 됩니다.

// package.json

squirrelWindows : {
	iconUrl : "..."
}

macOS Catalina 사용자의 경우에는 실행파일 생성이 불가능합니다. 때문에, NSIS로 Installer를 생성하게 됩니다.

// package.json

"win": {
	"target": [{
		"target": "nsis",
		"arch": [ "x64", "ia32" ]
		}],
    },
    ...etc,
}

여기까지, Electron with React Build & Packaging Tutorial을 마치겠습니다.

---

Reference :
Building-electron-descktop-apps-with-react
From React to an Electron App ready for production