일렉트론-리액트 설정

create-react-app으로 만든 구조의 어플리케이션에 적용하는 것을 전제로 한다.

설치

electron과 electron-builder를 설치한다.
npm install -D electron electron-builder

main.js 작성

public 폴더 안에 public/index.html의 랜더링 프로세스와 연결하는 main.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);

main 파일 바꾸기

package.json에서 main 파일을 바꿔준다.
"main": "public/main.js",

스크립트 추가

package.json에 데스크탑 앱으로 띄우기 위한 script를 추가

"react-start": "BROWSER=none npm start",
"electron-start": "ELECTRON_START_URL=http://localhost:3000 electron .",
"electron-pack": "npm run build && electron-builder build -c.extraMetadata.main=build/main.js"

react-start: 브라우저 모드가 아닌 채로 리액트를 돌린다
electron-start: http://localhost:3000를 일렉트론에서 띄운다
electron-pack: 일렉트론으로 데스크탑 앱 빌드하는 명령어

개발 환경 돌리기

npm run react-start, npm run electron-start
터미널창을 두개 띄워서 두 명령어를 동시에 돌려야 한다.

배포용 빌드

빌드하는 명령어이다.
npm run electron-pack