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化したり、アプリを作っていきたいところ。