Electron + Express で デスクトップアプリを作る

動作環境

Electron: 1.3.9
Express: 4.14.0

ElectronにWEBサーバーを設置したい

と言うわけで

ElectronにExpressを設置することにしました。

Express導入

まずはプロジェクトフォルダを作って、Expressを設置する。

mkdir Electron_kabanoki
cd Electron_kabanoki

npm i --save express
npm i express-generator -g
express
npm install
npm start

npm startをして、サーバーが立ち上がったら、ブラウザで以下URLにアクセス。

http://127.0.0.1:3000

これで以下画像のページが出たら設置は完了です。

Electronを導入

次にElectronを導入します。

npm i electron --save
npm init -y

続いて、プロジェクトフォルダにあるpackage.jsonの "main" のファイルを main.js に変更する。

{
 "name": "electron-kabanoki",
 "version": "0.0.0",
 "private": true,
 "scripts": {
 "start": "node ./bin/www"
 },
 "dependencies": {
 "body-parser": "~1.15.2",
 "cookie-parser": "~1.4.3",
 "debug": "~2.2.0",
 "electron": "^1.4.9",
 "express": "~4.14.0",
 "jade": "~1.11.0",
 "morgan": "~1.7.0",
 "serve-favicon": "~2.3.0"
 },
 "main": "main.js",
 "devDependencies": {},
 "keywords": [],
 "author": "",
 "license": "ISC",
 "description": ""
}

書き換えが終わったら、app.jsと同じ階層にmain.jsファイルを作成する。

'use strict';

// Electronのモジュール
const electron = require("electron");
const appExpress = require("./app");

// アプリケーションをコントロールするモジュール
const app = electron.app;

// ウィンドウを作成するモジュール
const BrowserWindow = electron.BrowserWindow;

// メインウィンドウはGCされないようにグローバル宣言
let mainWindow;

// 全てのウィンドウが閉じたら終了
app.on('window-all-closed', function() {
 if (process.platform != 'darwin') {
 app.quit();
 }
});

// Electronの初期化完了後に実行
app.on('ready', function() {
 // メイン画面の表示。ウィンドウの幅、高さを指定できる
 mainWindow = new BrowserWindow({width: 800, height: 600});
 mainWindow.loadURL('http://127.0.0.1:3000');

// ウィンドウが閉じられたらアプリも終了
 mainWindow.on('closed', function() {
 mainWindow = null;
 });
});

最後に、app.jsに listen を設置する。

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var index = require('./routes/index');
var users = require('./routes/users');

var app = express();

app.listen(3000, "127.0.0.1");// ←これを追加

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', index);
app.use('/users', users);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
 var err = new Error('Not Found');
 err.status = 404;
 next(err);
});

// error handler
app.use(function(err, req, res, next) {
 // set locals, only providing error in development
 res.locals.message = err.message;
 res.locals.error = req.app.get('env') === 'development' ? err : {};

 // render the error page
 res.status(err.status || 500);
 res.render('error');
});

module.exports = app;

全てが完了したら、Electronを起動する。

electron ./

これで以下の画像のようになれば、OK