Electron と Express を使ってデスクトップアプリを作ってみる

はじめに

Electron でのデスクトップアプリ開発に Express を導入したら便利じゃん、と思って試しにやってみた。

Node.js のインストールはこちら

www.yjhm214.com

前提

Node.js v6.9.2
npm 4.0.5

つくりかた

プロジェクトディレクトリ作成
Experss の導入 (express-generator を使って導入)
Electron の導入

1. プロジェクトディレクトリ作成

プロジェクトディレクトリを作成する。

$ mkdir myapp ; cd $_

2. Experss の導入

まずは Express アプリケーションのひな形を作るツールの express-generator を導入する。

$ npm i express-generator -g

次に express-generator を使ってアプリケーションのひな形を作成する。

$ express --view=ejs myapp

依存パッケージをインストールする。

$ cd myapp
$ npm install

以下のコマンドでアプリケーションを実行。

$ npm start

http://localhost:3000/ にアクセスして以下の画面が表示されたら Express の導入は完了！

f:id:yjhm214:20170113191620p:plain

3. Electron の導入

次に Electron を導入する。

$ npm i electron --save

package.json に “main”: 以下のコードを追記する。

{
  "name": "myapp",
  "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.13",
    "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';
 
const electron = require("electron");
const appExpress = require("./app");
 
const myapp = electron.app;
 
const BrowserWindow = electron.BrowserWindow;
 
let mainWindow;

myapp.on('window-all-closed', function() {
  if (process.platform != 'darwin') {
    myapp.quit();
  }
});
 
myapp.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 に Express を 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 を起動する。