[Electron] 01-2. Electron + Typescript + React 시작하기

기록용 포스팅이기에 간결히 적습니다.

하지만 질문 및 지적은 환영합니다.

---

 

프로젝트 경로를 만든 뒤, 일렉트론 앱을 만들어서 실행하기까지의 과정을 다룹니다.

 

경로를 만든 뒤, 해당 경로에서

npx create-react-app 앱이름 --template typescript

 

electron 관련 패키지 설치

npm i electron-is-dev

dev 환경을 인식하여 Hot-Reloading 이용하기 위함.

npm i electron electron-builder concurrently cross-env wait-on --save-dev

• Electron-is-dev: 개발환경인지 빌드한 프로덕션환경인지 확인을 위하여 사용됨.
• Electron : 일렉트론을 실행하기 위해서 사용됨.
• Electron-builder : 일렉트론을 실제 프로덕션 버전으로 빌드하기 위해 사용됨.
• concurrently : 동시에 여러 명령어를 병렬적으로 사용하기 위함.
• cross-env : CLI환경에서 프로그램 실행 시, OS에 관계 없이 환경변수를 설정 가능하게 함.
• wait-on : HTTP 자원, port, file등이 활성화 될 때 까지 기다려주는 cross platform

 

 

 

public 폴더 아래에 electron.js 파일 만들고 아래 입력.

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

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 900,
    height: 680,
    webPreferences: {
      nodeIntegration: true,
      enableRemoteModule: true,
      devTools: isDev,
    },
  });

  mainWindow.loadURL(
    isDev
      ? "http://localhost:3000"
      : `file://${path.join(__dirname, "../build/index.html")}`
  );

  if (isDev) {
    mainWindow.webContents.openDevTools({ mode: "detach" });
  }

  mainWindow.setResizable(true);
  mainWindow.on("closed", () => (mainWindow = null));
  mainWindow.focus();
}

app.on("ready", createWindow);

app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

app.on("activate", () => {
  if (mainWindow === null) {
    createWindow();
  }
});

electron-builder가 패키징 시, create-react-app이 build한 build 폴더를 패키징하는데, 이 때 electron 앱의

엔트리 포인트가 없는 상태가 됨. 그래서 public 아래에 electron.js 만들어둬야 webpack이 build 폴더로

알아서 복사. 이름이 electron.js인 이름은 electron-builder가 인식하는 default값.

 

 

 

package.json 에서 main, homepage, scripts 아래처럼 수정

  "main": "public/electron.js",
  "homepage": "./",
  
"scripts": {
    "react-start": "react-scripts start",
    "react-build": "react-scripts build",
    "react-test": "react-scripts test",
    "react-eject": "react-scripts eject",
    "start": "concurrently \"cross-env NODE_ENV=development BROWSER=none yarn react-start\" \"wait-on http://localhost:3000 && electron .\"",
    "build": "yarn react-build && electron-builder",
    "release": "yarn react-build && electron-builder --publish=always"
  },

여기서 에러 발생 시, scripts를 아래처럼 사용. yarn 앞에 npx 붙임.

npx 생략하고 쓸 수 있는 법 모름.

  "scripts": {
    "react-start": "react-scripts start",
    "react-build": "react-scripts build",
    "react-testest": "react-scripts test",
    "react-eject": "react-scripts eject",
    "start": "concurrently \"cross-env NODE_ENV=development BROWSER=none npx yarn react-start\" \"wait-on http://localhost:3000 && electron .\"",
    "build": "npx yarn react-build && electron-builder",
    "release": "npx yarn react-build && electron-builder --publish=always"
  }

 

 

 

npm start 입력하면 윈도우 뜸.

 

 

 

참조

https://cpro95.tistory.com/185