[Electron] Angular2 + Electron으로 Desktop app 만들기(1) - Setup & Basics Concept

다음 포스팅을 참고하였습니다.

https://scotch.io/tutorials/build-a-music-player-with-angular-2-electron-i-setup-basics-concepts

Tools & Tools Setup

1. 새로운 Angular app 만들기

Angular CLI는 개발자가 Angular의 components, pipes, services 등을 효율적으로 생성시키고 만들 수 있도록 도와주는 Util Tool입니다.

• Angular CLI Tool을 설치합니다.

npm install -g angular-cli

• 아래와 같은 명령어로 CLI를 사용하여 새로운 app을 만들 수 있습니다.

ng new scotch-music-player

single line command로 Angular app을 간편하게 만들었습니다.

2. Electron 설치

방금 만든 Angular app에 Electron을 아래와 같은 명령으로 설치합니다.

npm install --save-dev electron

3. Electron 구성

Angular App의 root에 위치해있는 main.js에서 만듭니다.

lifecycle event를 listening 함으로써 javascript를 사용하여 Electron을 구성 및 설정할 수 있습니다.

이는 API method에 접근하고, 이 메소드에 옵션을 전달합니다.

// ./main.js const {app, BrowserWindow} = require('electron')   let win = null;   app.on('ready', function () {     // Initialize the window to our specified dimensions   win = new BrowserWindow({width: 1000, height: 600});     // Specify entry point   win.loadURL('http://localhost:4000');     // Show dev tools   // Remove this line before distributing   win.webContents.openDevTools()     // Remove window once app is closed   win.on('closed', function () {     win = null;   });   });   app.on('activate', () => {   if (win === null) {     createWindow()   } })   app.on('window-all-closed', function () {   if (process.platform != 'darwin') {     app.quit();   } });

앱이 준비되면 새로운 앱을 만들고 BrowserWindow를 구성합니다.

다음으로 loadURL 메소드를 사용하여 어디에서 컨텐츠를 가져와야하는지 알려줍니다.

http://localhost:4000 은 우리가  ng serve를 수행할경우 Angular CLI가 Angular 앱을 실행할 위치입니다.

openDevTools메서드는 디버깅 목적으로 개발자 도구를 보여줍니다. 앱을 배포 할 때는 필요하지 않으므로 이전에 제거해야합니다.

package.json에 다음과 같이 명시해주어 Electron에게 알려줍니다.

{   "name": "scotch-music-player",   "version": "0.0.1",   "main": "main.js",   ... }

다음 명령어로 Angular를 실행시킵니다.

ng serve

그리고 다음 명령어로 Electron을 실행시킵니다.

electron .