Electron 설정

CRA 프로젝트에 Electron 추가

1. CRA 프로젝트 생성

2. cross-env 설치

3. electron 설치

4. public/electron.js 설정

5. yarn 설치

6. package.json 변경

7. 실행

CRA 프로젝트 생성

create-react-app 프로젝트를 생성한다

npx create-react-app electron-demo

cross-env 설치

Windows와 Linux 기반 운영체제는 환경 설정 방식이 다르므로 이를 공통으로 처리하는 cross-env를 설치하여 명령을 수행한다.

npm install cross-env

프로젝트 폴더로 이동한 뒤 설치해야 한다.

터미널의 현재 위치를 잘 확인한 뒤 진행한다.

Electron 설치

Electron은 개발용(devDependency)로 설치해야 한다.

npm install --save-dev electron electron-builder

package.json 파일을 열었을 때 다음과 같이 추가되어 있어야 한다.

package.json

{
    //... 생략 ...
    "devDependencies": {
        "electron": "^22.0.0",
        "electron-builder": "^23.6.0"
    }
}

electron 진입점 생성

public 폴더에 electron.js 혹은 본인이 원하는 이름으로 electron 진입점을 생성한다.

public/electron.js

const {app, BrowserWindow} = require('electron');
const path = require('path');
const url = require('url');

function createWindow() {

    const win = new BrowserWindow({
        width:1920,
        height:1080
    });
    
    const startUrl = process.env.ELECTRON_START_URL || url.format({
        pathname: path.join(__dirname, '/../build/index.html'),
        protocol: 'file:',
        slashes: true
    });
    
    win.loadURL(startUrl);
    
}

app.on('ready', createWindow);

yarn 설치

electron 실행 명령에 사용할 yarn 을 설치한다.

--global 옵션을 부여하여 전역 설치한다.

npm install yarn --global

package.json 설정

앞에서 준비한 내용들을 기반으로 electron이 실행될 수 있는 명령을 생성한다.

• headless-start - 브라우저 없이 React 앱 실행 명령

• electron-start - Electron 앱 실행 명령

• electron-build - Electron 앱 빌드 명령

package.json

{
  //... 다른 속성들은 생략 ...
  "scripts": {
    //... 기존 명령은 유지(생략) ...
    "headless-start": "cross-env BROWSER=none react-scripts start",
    "electron-start": "cross-env ELECTRON_START_URL=http://localhost:3000 electron .",
    "electron-build": "yarn build && electron-builder build -c.extraMetadata.main=build/electron.js"
  },
}

또한 파일상단에 홈페이지와 main 파일에 대해서 알려준다.

package.json

{
  //... 다른 속성들은 생략 ...
  "main": "public/electron.js",
  "homepage": "./",
  //... 다른 속성들은 생략 ...
}

실행

개발할 때는 먼저 react app을 실행하고 electron을 실행하여 웹뷰(WebView) 형태로 사용한다.

npm run headless-start
npm run electron-start

빌드

빌드는 다음 명령으로 한다.

npm run electron-build

dist 폴더에 설치 파일이 생성된다.