설치 및 초기 설정

1. Node.js 버전 확인
   Node.js가 설치되어 있어야 하며, Electron 지원을 위해 Node 16 이상 버전을 사용하는 것을 권유합니다.

2. Electron React Boilerplate 설치
   Electron React Boilerplate는 degit를 사용하여 복제할 수 있습니다. 아래 명령어를 통해 프로젝트를 생성해봅시다.

참고 : https://github.com/electron-react-boilerplate

npx degit electron-react-boilerplate/electron-react-boilerplate [프로젝트명]
cd [프로젝트명]
npm install

기본적인 프로젝트 구조

프로젝트
├── .erd               // 정적 파일
│   ├── configs          // Webpack, ESLint 등의 설정 파일 
├── assets               // 정적 파일
├── release              // 빌드 관련 파일
├── src
│   ├── main             // Electron 메인 프로세스
│   ├── renderer         // React 컴포넌트
│   └── common           // 공용 모듈
├── package.json
└── tsconfig.json        // TypeScript 설정

이 구조는 애플리케이션을 메인 프로세스 (src/main)와 렌더러 프로세스 (src/renderer)로 명확하게 나누고 있어, 관리가 용이합니다.

주요 파일 및 폴더 설명

.erd/configs/: 프로젝트의 Webpack과 ESLint 설정 포함
src/main/: Electron의 메인 프로세스를 다루는 폴더. 앱 생성, 윈도우 설정, 프로세스 간 통신을 담당
src/renderer/: React 기반의 UI 로직을 다루며, 주로 사용자 인터페이스를 렌더링하는 데 사용
release/: 배포 시 사용되는 파일을 관리하는 폴더로, 빌드 스크립트와 설정 포함

프로젝트 실행

실행 전 개발 모드에서 사용할 port 설정을 확인해야합니다.

>> src/main/util.ts

import { URL } from 'url';
import path from 'path';

export function resolveHtmlPath(htmlFileName: string) {
  if (process.env.NODE_ENV === 'development') {
    const port = process.env.PORT || 1212; //port는 개발 환경에서 세팅해서 사용
    const url = new URL(`http://localhost:${port}`);
    url.pathname = htmlFileName;
    return url.href;
  }
  return `file://${path.resolve(__dirname, '../renderer/', htmlFileName)}`; //배포 버전은 해당 소스를 실행
}

port 확인 후 아래 명령어로 애플리케이션을 개발 모드로 실행할 수 있습니다.

npm run dev

빌드 및 배포

프로젝트를 빌드 하려면 다음 명령어를 실행합니다.

npm run package

명령어 실행 정상적으로 완료가 될 경우 release/build 하위
폴더에 배포 가능한 파일을 생성됩니다. Windows, macOS, Linux용으로 각각 빌드 파일을 만들 수 있으며, package.json에서 script 설정에 따라 자동화된 패키징 옵션 관리가 가능합니다.

TypeScript 설정

Electron React Boilerplate는 TypeScript가 기본으로 설정되어 있습니다. 필요에 따라 tsconfig.json 파일을 수정해 프로젝트에 맞는 타입 검사를 구성할 수 있습니다.

{
  "compilerOptions": {
    "incremental": true,
    "target": "es2022",
    "module": "commonjs",
    "lib": ["dom", "es2022"],
    "jsx": "react-jsx",
    "strict": true,
    "sourceMap": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "resolveJsonModule": true,
    "allowJs": true,
    "outDir": ".erb/dll"
  },
  "exclude": ["test", "release/build", "release/app/dist", ".erb/dll"]
}