Angular + Electron 시작하기

개요

Electron이 궁금했던 오늘 요즈음.
Angular를 오랜만에 만지고 싶은 경우도 있고, Angular + Electron으로 앱을 만들어 보려고 생각한다.
우선 Angular-CLI로 만든 템플릿을 Electron을 사용하여 시작할 수있는 곳까지 최선을 다할 것입니다.

TL; DR.

소스 코드

절차

Angular 프로젝트 만들기

# いつも通りCLIからスタート
$ng new angular-electron

Electron 설치

$ npm install electron --save-dev

시작할 수 있도록 다양한 수정

공식 문서과 angular-electron을 참고로 만들어 간다.

Angular.json 수정

projects > architect > build > oprions > outputPath를 /dist/プロジェクト名(今回はangular-electron)를 dist로만 수정했습니다.

{
  ...
  "projects": {
    ...
      "architect": {
        "build": {
          ...
          "options": {
            "outputPath": "dist",
            ...

main.js 만들기

앱을 시작하는 js를 만듭니다.
ts로 쓰고 싶거나 핫 리로드도 시도하고 싶지만,
일단 js로 제대로 움직이는 곳까지 확인한다.

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

let win = null;

function createWindow() {
  const electronScreen = screen;
  const size = electronScreen.getPrimaryDisplay().workAreaSize;

  // ブラウザウインドウを作成
  win = new BrowserWindow({
    x: 0,
    y: 0,
    width: size.width,
    height: size.height,
    webPreferences: {
      nodeIntegration: true
    }
  })

  win.loadURL(url.format({
    pathname: path.join(__dirname, 'dist/index.html'),
    protocol: 'file:',
    slashes: true
  }));

  // dev toolを開く
  win.webContents.openDevTools();

  win.on('closed', () => win = null);

  return win;
};

app.allowRendererProcessReuse = true;

app.on('ready', () => setTimeout(createWindow, 400));
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});
app.on('activate', () => {
  if (win === null) {
    createWindow();
  }
});

package.json 수정

electron package.json의 main에 위의 파일을 지정하여 명령으로 시작할 수 있습니다.

{
    "name": "angular-electron",
    "main": "main.js",
    ...
}

시작할 수 있는지 확인

앱을 실행할 수 있는지 확인합니다.
그 전에 Angular 빌드가 필요하기 때문에 실행해 둔다.

# Angularのファイルをビルド(最初から入っているコマンドそのまま)
$ npm run build
> dist配下にファイルが出力されていることを確認

# アプリを起動してみる
$ npx electron .

이미지와 같이 Angular-CLI 템플릿이 표시되는지 확인할 수 있으면 OK.

요약

Electron + Angular로 앱을 만들어 보려고 했으므로, 일단 시작할 때까지 했다.
시작만이라면 빨리 할 수 ​​있었으므로, 다음은 main.js (을)를 ts화하거나 앱을 만들어 가고 싶은 곳.

참고 사이트

문서 | Electron

최초의 Electron 앱 | Electron

maximegris/angular-electron: Ultra-fast bootstrapping with Angular and Electron (Typescript + SASS + Hot Reload)