electron을 공식 사이트는 https://www.electronjs.org/ 이다.
electron은 데스크탑 앱을 만들수 있도록 해준다. html, css, javascript 같은 웹 기술을 이용하여 쉽게 데스크탑 앱을 만들수 있다.
react 기반 electron을 개발할 수 있는 공식 boilerplate 사이트는 여기를 참고하자.
install
– – depth=1 을 deep clone 하되 히스토리 로그 중 가장 최근에꺼 한개만 가져오라는 것이다.
1 2 3 |
git clone --depth 1 --single-branch https://github.com/electron-react-boilerplate/electron-react-boilerplate.git your-project-name cd your-project-name yarn |
개발환경
개발 모드로 실행하는 방법은 아래와 같다.
1 |
yarn dev |
build and packaging
build 를 하면 dll 폴더에 관련 파일들이 빌드된다.
현재 OS 환경에 맞는 패키징을 할려면 yarn package를 실행한다. 예를 들어, 현재 실행환경이 윈도우라면 이 명령어를 실행후에 release 폴더에 .msi 와 .exe 실행 화일이 패키징 된다.
만일 모든 OS 플랫폼으로 패키징을 할려면 yarn package-all 을 한다.
1 2 3 4 5 |
// 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 에 대한 자세한 내용은 여기를 참고하자.