[컴][nodejs] electron 의 hello world

atom electron chromium

Hello world 설치 및 실행

필요한 것

1. git 이 설치
2. git 에 대한 path 설정
3. npm 설치 : https://nodejs.org/en/ 에서 download 하고 설치하면 된다.

절차

1. source download : https://github.com/electron/electron-quick-start
2. npm install
3. npm start

npm install && npm start

npm install 을 마친후에 npm start 로 application 을 실행하면 아래처럼 화면이 뜬다. 딱보이게 그냥 chrome 이다. chrome 처럼 ctrl+shift+i 를 누르면 inspection 창을 닫을 수 있다.

배포, Application Distribution

• electron/application-distribution.md at master · electron/electron · GitHub

npm start 를 이용하면 electron.exe main.js 를 실행한다. 이것을 그냥 electron.exe 만 실행하면 알아서 package.json 을 보고 main.js 를 호출해서 현재의 application 을 실행하게 할 수 있다.

이것은 dist 부분만 있으면 된다. 이 dist 의 resources 안에
app 이란 이름의 folder 를 만들어서 그 안에

1. index.html
2. main.js
3. package.json

을 넣으면 된다. 그리고 나서 이 dist 부분만 배포하면 된다.

이제 dist 안에 electron.exe 를 실행하면 된다. 당연한 이야기지만 이 electron.exe 의 이름은 원하는 대로 바꿔도 된다.

그 이외에도 위의 글 에서

• rebranding
• asar 로 packaging

등의 내용도 확인할 수 있다.

app folder

소스 분석

아래 글이 도움이 된다.

• Write your First Electron App, Quick Start

좀 더 복잡한 application 을 위한 Boilerplate 사용하기

Boilerplate application for Electron runtime 을 사용 해 보자.
source download 를 위해 git 이 필요하다.(그냥 web page 로 가서 다운로드해도 된다.)

• Don't Panic Labs – GitHub Electron Tutorial: Using Electron-Boilerplate : boilerplate 에 대한 좀 더 자세한 설명이 있다.

set path=%path%;c:\Program Files (x86)\Git\bin\;
git clone https://github.com/szwacz/electron-boilerplate.git
cd electron-boilerplate
npm install
npm start

구조

이 boilerplate 의 구조에 대한 설명은 아래 구조에서 확인할 수 있다.

• GitHub - szwacz/electron-boilerplate: Boilerplate application for Electron runtime

주의할 것은 electron, 즉 실제 application 에서 사용할 package 의 install(npm install) 은 <boilerplate>/app 안에서 하면 되고,
개발에 필요한 package 의 install 은 <boilerplate> root 에서 하면 된다.

개발

이 boilerplate 를 이용해서 개발할 때 알아야 할 사항들은 아래를 참고하자.

• Development - szwacz/electron-boilerplate: Boilerplate application for Electron runtime

jsx 추가

jsx 를 사용하려고 위의 boilerplate 에 jsx 부분을 추가했다. 아래 diff 를 참고하자.

• - example for jsx transpililation is added, GitHub
• - bug fixes to work React, GitHub

배포

빌드는 npm start 를 하거나 gulp build 를 하면 된다. 이 때 build folder 가 만들어진다.

dist/electron.exe

이녀석은 아래 경로에 electron.exe 가 있다.

• <electron-boilerplate-master>\node_modules\electron-prebuilt\dist\electron.exe

resources/app

• <electron-boilerplate-master>\build\ 을
  -->  <electron-boilerplate-master>\node_modules\electron-prebuilt\dist\resources\app

로 copy 하면 된다.

See Also

1. Boilerplate application for Electron runtime, GitHub - szwacz/electron-boilerplate

Reference

1. Quick Start > Write your First Electron App
2. GitHub - electron/electron-quick-start: Clone to try a simple Electron app