如何在现有的 Express 应用程序中使用 Electron

Question

我阅读并尝试了类似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>

results.ejs

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

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

Answer 1

在 Electron main.js 文件中，您应该 require 您的 app.js 文件来启动 Express 应用程序，然后创建 BrowserWindow 的新实例并加载您的 Express 应用程序正在侦听的 URL。

请注意，您要么必须在 Electron 中对 IP 和 PORT 进行硬编码，要么将它们从 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 的目录，其中包含您的视图。