使用Electron将Angular Framework应用程序转换为桌面应用程序

Question

项目描述：

---

我有一个功能性的前端angularjs应用程序，该应用程序可以与另一个部署在 tomcat 中的后端Java应用程序通信，该应用程序在不同的端口上运行（8443）。我一直在Web浏览器上运行它，但现在我想将其作为桌面应用程序运行。对于开发环境，我一直将其作为grunt serve运行，对于生产和发行，我将其作为grunt --clean --prod运行。 使用grunt serve在 dev 模式下运行时，该应用程序在http://localhost:9000/?baseApiUrl=https://localhost:8443&tenantIdentifier=demo

上运行

问题：

---

我该如何使应用程序以电子方式在 dev 模式下运行，然后将其打包以进行生产？我尝试了How to port an existing angular app to electron?，但是它无法与端口上支持的应用程序通信。

请帮助。

Answer 1

方法是

---

1。。样板代码。

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
let mainWindow = null;

function createWindow () {
  mainWindow = new BrowserWindow({width: 800, height: 600});
  mainWindow.loadURL(`file://${__dirname}/index.html`);

  //Take note of this line.
  //mainWindow.loadURL(`http://localhost:9000`);

  mainWindow.on('closed', function () {
    mainWindow = null;
  });
}
app.on('ready', createWindow);

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

app.on('activate', function () {
  if (mainWindow === null) {
    createWindow();
  }
});

---

2。。注意行mainWindow.loadURL('file://${__dirname}/index.html')。

因为您的用例是要与在端口上运行的另一个后端应用程序通信，所以使用了 file 协议（file://<uri>）不起作用，您需要与http协议上的端口进行通信。

---

3。为此，我建议在您的电子应用程序中运行静态文件http服务器，通过本地服务器对应用程序进行服务器处理，并将此mainWindow.loadURL('file://${__dirname}/index.html')行替换为{{1 }}。

修改1： 您可以像这样运行一个非常基本的静态文件服务器，但是肯定有更好的写方法。

mainWindow.loadURL(`http://localhost:9000`)

---

编辑2：

在评论中进行了一些讨论之后，我决定克隆存储库并自己添加电子部分，这就是我的操作方法。

1。。通过运行

安装以下依赖项

var express = require('express');
var server = express();
server.use('/', express.static(__dirname + '/'));
server.listen(9000);

2。 index.js文件

npm install --save electron express

3。。在package.json中添加以下脚本

const electron = require('electron');
const path = require('path');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
let mainWindow = null;

var express = require('express');
var server = express();
let dir = path.join(__dirname, './dist/community-app');
server.use('/', express.static(dir));
server.listen(9000);

function createWindow() {
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600
    });

    mainWindow.loadURL(`http://localhost:9000`);

    mainWindow.on('closed', function () {
    mainWindow = null;
    });
}
app.on('ready', createWindow);

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

app.on('activate', function () {
    if (mainWindow === null) {
        createWindow();
    }
});

4。结果

PS：我在构建angularjs项目时遇到了一些麻烦，因为在Windows项目中没有构建脚本，因此页面中缺少某些样式。

Git存储库：

https://github.com/openMF/community-app