Electron + Angular2でHello, World!

2017/02/26

Electron + Angular2でデスクトップアプリを作ってみるべく、Build a Music Player with Angular 2+ & Electron I : Setup & Basics Concepts | Scotchを参考に環境構築してみました。環境はWindows10です。

Node.jsが必要なので、先にWindows7にNode.js環境を作る | backportあたりを参考にして入れておいてください。

Node.jsがインストールされていることを確認してからAngular CLIをグローバルインストール。

F:\workspace> node -v
v6.10.0
F:\workspace> npm install -g angular-cli
(snip)
F:\workspace> ng version
As a forewarning, we are moving the CLI npm package to "@angular/cli" with the next release,
which will only support Node 6.9 and greater. This package will be officially deprecated
shortly after.

To disable this warning use "ng set --global warnings.packageDeprecation=false".



                             _                           _  _
  __ _  _ __    __ _  _   _ | |  __ _  _ __         ___ | |(_)
 / _` || '_ \  / _` || | | || | / _` || '__|_____  / __|| || |
| (_| || | | || (_| || |_| || || (_| || |  |_____|| (__ | || |
 \__,_||_| |_| \__, | \__,_||_| \__,_||_|          \___||_||_|
               |___/
angular-cli: 1.0.0-beta.28.3
node: 6.10.0
os: win32 x64

F:\workspace>

Angular CLIでAngular2アプリの雛形を作ります。

F:\workspace> ng new sampleapp
(snip)
Project 'sampleapp' successfully created.

F:\workspace>

sampleappというディレクトリが作られ、その中に雛形一式が生成されます。 ng serveコマンドでビルドインサーバーを立ち上げます。

F:\workspace> cd sampleapp
F:\workspace\sampleapp > ng serve
(snip)
webpack: Compiled successfully.

http://localhost:4200 にブラウザでアクセスするとapp works!と表示されるはず。 ビルドインサーバーはCtrl+C`で終了できます。

次にElectronをインストールします。

F:\workspace\sampleapp > npm install --save-dev electron
(snip)
F:\workspace\sampleapp >

Electronに必要なファイルを作りましょう。sampleappディレクトリ直下にmain.jsという名前で以下のようなファイルを作成します。

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

let window = null;

app.on('ready', function () {

  window = new BrowserWindow({ width: 800, height: 600 });

  window.loadURL('http://localhost:4200');

  // Chrome Developer Toolsを有効にしたい場合はコメントアウトを外す
  // window.webContents.openDevTools();

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

});

app.on('activate', () => {
  if (window === null) {
    createWindow()
  }
});

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

package.jsonにElectronのエントリーポイントを追記。

  "name": "sampleapp",
  "version": "0.0.0",
  "main": "main.js",
  "license": "MIT",

ここまでできたらAngular CLIのビルドインサーバーを起動します。

F:\workspace\sampleapp > ng serve
(snip)
webpack: Compiled successfully.

別のコンソール(コマンドプロンプト)を開き、Electronを起動します。

F:\workspace\sampleapp > electron .

これでElectronが起動し、app works!と表示されます。

これで最低限の準備は整いました。

Angular CLIのビルドインサーバーはライブリローディングの機能がついているので、Angular2側のファイルを書き換えるとElectron側にちゃんと反映されます。 Electron側を修正した場合はメニューの View → Reload でリロードできます。




おススメ