Electron + Angular2でHello, World!
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 でリロードできます。
おススメ