본문으로 건너뛰기

시작하기

참고​

https://lasbe.tistory.com/189

1. 프로젝트 생성​

vite를 통해 React + Typescript 프로젝트를 생성해요.

yarn create vite

2. Electron 관련 패키지 설치​

Electron 개발에 필요한 패키지를 설치해요.

yarn add electron-is-dev
yarn add -D electron electron-builder concurrently cross-env wait-on 
yarn add -D @types/electron @types/electron-is-dev

위의 패키지별 역할은 아래와 같아요.

  • electron-is-dev
    개발 환경인지, 프로덕션 환경인지 구분하는 패키지에요.

  • electron
    일렉트론 패키지에요.

  • electron-builder
    일렉트론을 패키징하여 설치파일로 만들어주는 패키지에요.

  • concurrently
    두 개 이상의 명령어를 하나의 스크립트에서 실행할 수 있도록 도와주는 패키지에요.

  • cross-env
    OS별로 다른 환경변수 설정을 통일시켜주는 패키지에요.

  • wait-on
    delay 의 역할을 하는 패키지에요.

3. package.json 수정​

"type": "module",
"main": "public/electron.ts",
"homepage": ".",

...

"scripts": {
    "react-start": "vite",
    "react-build": "tsc -b && vite build",
    "start": "concurrently \"cross-env NODE_ENV=development BROWSER=none yarn react-start\" \"wait-on http://localhost:5173 && electron .\"",
    "build": "yarn react-build && electron-builder",
    "build:win": "yarn react-build && electron-builder --win --x64",
    "lint": "eslint .",
    "preview": "vite preview"
}