[解決済み] 既存のExpressアプリケーションでElectronを使用する方法

質問

のようなサンプルを読み、試してみました。 https://github.com/frankhale/electron-with-express しかし、ExpressアプリをElectronに変換する方法がよくわからない。

既存のExpressアプリケーションでElectronを使用するにはどうすればよいですか？

例えば、このようなExpressアプリケーションを考えてみましょう。

app.js

var express = require("express");
var app = express();

var request = require("request");

app.set("view engine", "ejs");

app.get("/", function(req, res) {
    res.render("search");
});

app.get("/results", function(req, res){
    var query = req.query.search;
    var url = "https://yts.am/api/v2/list_movies.json?sort=seeds&limit=15&query_term='" + query + "'";
    request(url, function(error, response, body){
        var data = JSON.parse(body);
        if(!error && response.statusCode == 200){
            //res.send(data["data"]["movies"][0]["title"]);
            res.render("results", {data: data});
            //["movies"][0]["title"]
        }
        else
        console.log(data);
    });
});

app.listen(process.env.PORT, process.env.IP, function(){
    console.log("IMDB server has started");
});

search.ejs

Search for a movie

<form action="results" method="GET">
    <input type="text" placeholder="search term" name="search">
    <input type="submit">
</form>

結果.ejs

Results page
<ul>
    <% data["data"]["movies"].forEach(function(movie){ %>
        <li>
            <strong><%= movie["title"]%></strong> - <%= movie["year"]%>
        </li>
    <% }) %>
</ul>

<a href="/">Search again</a>

解決方法は？

エレクトロンで main.js ファイルでは require あなたの app.js ファイルのインスタンスを作成して、Express アプリケーションを起動します。 BrowserWindow を作成し、Express アプリケーションがリッスンしている URL をロードします。

IPとPORTはElectronでハードコーディングするか、ExpressからエクスポートしてElectronにインポートする必要があることに注意してください。 main.js スクリプトを使用します。

<サブ ./main.js

const { BrowserWindow, app } = require('electron')
require('./app.js')

let mainWindow = null

function main() {
  mainWindow = new BrowserWindow()
  mainWindow.loadURL(`http://localhost:3000/`)
  mainWindow.on('close', event => {
    mainWindow = null
  })
}

app.on('ready', main)

<サブ ./package.json

{
  "name": "your-app-name",
  "version": "1.0.0",
  "description": "A description of your application",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "repository": "https://github.com/link/to/repo",
  "keywords": [ "some","keywords" ],
  "author": "You",
  "license": "Your License",
  "dependencies": {
    "ejs": "^2.6.1", // required for your specific example where `ejs` package is used
    "electron": "^3.0.9",
    "express": "^4.16.4"
  }
}

続いて、その後にある node_modules ディレクトリと同じディレクトリにある main.js と package.json .

最後に、Express/Electronアプリケーションを起動することができます。

> npm start

ExpressアプリケーションがElectronと同じディレクトリにない場合、Expressアプリケーションに views ディレクトリを作成します。

<サブ app.js

var path = require('path')
var request = require("request");
var express = require("express");
var app = express();

app.set('views', path.join(__dirname, '/views'));

...

ここで /views からの相対的なディレクトリです。 app.js を作成し、その中にビューを格納します。