Преобразование приложения Angular Framework в настольное приложение с помощью Electron

Question

Описание проекта:

---

У меня есть функциональное внешнее приложение angularjs, которое взаимодействует с другим внутренним Java-приложением, развернутым в tomcat , работающем надругой порт (8443).Я запустил его в веб-браузере, но теперь я хочу запустить его как настольное приложение.Я использовал его как grunt serve для среды разработки и grunt --clean --prod для производства и распространения.При запуске в режиме dev с использованием grunt serve приложение работает на http://localhost:9000/?baseApiUrl=https://localhost:8443&tenantIdentifier=demo

Вопрос:

---

Как мне поступитьо том, как заставить приложение работать в электронном режиме для dev , а затем упаковать его для производства?Я попытался Как перенести существующее угловое приложение на электрон? , но оно не может связаться с приложением с поддержкой через порт.

Пожалуйста, помогите.

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') на mainWindow.loadURL(`http://localhost:9000`) this.

Редактировать 1: Вы можете запустить очень простой статический файловый сервер, например, так что, безусловно, есть лучшие способы написать его.

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

---

Редактировать 2:

После некоторого обсуждения в комментариях я решил клонировать репо и сам добавить часть электрон , вот как я это сделал.

1. Установите следующие зависимости, запустив,

npm install --save electron express

2. файл index.js

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();
    }
});

3. Добавьте следующий скрипт в ваш пакет. Json

"scripts": {
//...
  "start": "electron ."
 },

4. Результат

PS: У меня были некоторые проблемы со сборкой проекта angularjs, потому что в проекте не было сценариев сборки для окон, поэтому некоторые стили отсутствуют на странице.

Git-репо:

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