react 기반 electron을 개발할 수 있는 공식 boilerplate 사이트는 여기를 참고하자.

install

 – – depth=1 을 deep clone 하되 히스토리 로그 중 가장 최근에꺼 한개만 가져오라는 것이다.

git clone --depth 1 --single-branch https://github.com/electron-react-boilerplate/electron-react-boilerplate.git your-project-name
cd your-project-name
yarn 

개발환경

개발 모드로 실행하는 방법은 아래와 같다.

yarn dev 

build and packaging

build 를 하면 dll 폴더에 관련 파일들이 빌드된다.

현재 OS 환경에 맞는 패키징을 할려면 yarn package를 실행한다. 예를 들어, 현재 실행환경이 윈도우라면 이 명령어를 실행후에 release 폴더에 .msi 와 .exe 실행 화일이 패키징 된다.

만일 모든 OS 플랫폼으로 패키징을 할려면 yarn package-all 을 한다.

// build
yarn build
// packaging
yarn package
yarn package-all 

프로젝트 구조

package.json 화일은 루트와 app 폴더 두군데에 있다. 대부분의 의존성은 루트에 있는 package.json에 설치하고 네이티브 모듈은 app폴더에 설치한다.

create-react-app으로 만들어진 프로젝트는 아니고 typescript로 구성되어있다.  소스는 src가 아니라 app 폴더에 위치해 있다.

엔트리 포인트는 app 폴더의 index.tsx 이다.

router가 구성되어 있는데 특이한 점은 Browser Router가 하니라 Hash Router 이다. 

그리고 redux가 적용되어있는데, redux toolkit 이 적용되어있다.

redux tookit 에 대한 자세한 내용은 여기를 참고하자.