ElectronでBrowserWindowにlocalhostを表示する 💻

ElectronでBrowserWindowにlocalhostを表示するコードを書きました。
PC内に既にlocalhostが立ち上がっていればそれをそのまま、立ち上がっていなければ起動してからBrowserWindowに表示します。
静的なサーバを起動するだけなので、Expressは必要ないのですが、楽したいのでExpressを使っています。

使い道

ものすごく稀なケースだと思いますが、既に完成しているNext.jsでのプロジェクトや、Nuxt.jsでのプロジェクトをデスクトップアプリ化したい場合に利用しています。
静的書き出ししたディレクトリをホスティングするだけでOKです。

ただ、最近は新規でElectronアプリを作る際は、 Next.jsのElectronテンプレート を使っているので、出番は減ってきています。

blog.kimizuka.org
blog.kimizuka.org

Next.jsのElectronテンプレートは意外とはまりどころが多いので、不測の事態に直面した際のバックアッププランとしては心強いです。

ソースコード

const { app, BrowserWindow } = require('electron');
const express = require('express');
const path = require('path');
const request = require('request');
const DELAY = 500;

request({ // リクエストを送信し、localhost:3000が立ち上がっているか確認する
  url: 'http://localhost:3000',
  method: 'GET'
}, (err) => {
  if (err && err.code === 'ECONNREFUSED') {
    const server = express();
    const http = require('http').Server(server);

    server.use('/', express.static(`${ __dirname }/out`));
    http.listen(3000, '0.0.0.0'); // 立ち上がっていない場合はlocalhost:3000を起動する
  }
});

app.on('ready', () => {
  setTimeout(() => {
    const window = new BrowserWindow();

    window.loadURL('http://localhost:3000');
  }, DELAY);
});

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

リポジトリ

github.com