Angular 프로젝트 Electron 앱으로 배포하기

0. Angular 프로젝트 생성

프로젝트 생성 후, index.html 파일의 base href를 "./"로 수정한다.

1. Electron 설치

npm install electron --save-dev

2. main.js 파일 생성

const {app, BrowserWindow} = require('electron');

let win;

function createWindow() {
  win = new BrowserWindow({
    width: 600,
    height: 600,
    backgroundColor: '#fff'
  })

  win.loadURL(`file://${__dirname}/dist/electron-app/index.html`)

  win.webContents.openDevTools()

  win.on('closed', function () {
    win = null
  })
}

app.on('ready', createWindow)

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

app.on('activate', function () {
  if (win === null) createWindow()
})

Electron에서 제공하는 BrowserWindow API를 사용하여 GUI 윈도우를 만들고, loadURL() 메서드로 dist 폴더의 index.html 파일을 불러온다. dist 폴더는 프로젝트를 빌드하면 생성된다.

앱을 실행할 때 index.html의 경로를 확실하게 작성해야 화면이 정상적으로 출력된다.

3. package.json 파일 수정

package.json 파일에서 메인 엔트리 포인트를 수정한다.
쉽게 프로젝트를 빌드하고 실행할 수 있도록 스크립트를 추가한다.

{
  "name": "electron-app",
  "version": "0.0.0",
  "main": "electron-main.js",
  "scripts": {
  	...
    "start:electron": "ng build --prod && electron ."
  },
}

4. electron-packager 설치 및 스크립트 추가

데스크탑 앱을 배포하기 위해 electron-packager를 설치하고, package.json에 스크립트를 추가한다.

npm install electron-packager --save-dev

// package.json
"pack:electron-win": "electron-packager . --platform=win32",	// Window
"pack:electron-darwin": "electron-packager . --platform=darwin"	// Mac

5. Windows 앱 패키징

위에서 작성한 스크립트를 입력하면 .exe 파일이 생성된다.
윈도우에서 해당 파일을 실행하면 Electron 앱에서 Angular 프로젝트가 실행된다.