Ndtyjky

Project Description:

I have a functional front-end angularjs application that communicates with another back-end Java application deployed in tomcat running on different port(8443). I have been running it on a web browser but now i want to run it as a desktop application. I have been running it as grunt serve for development environment and grunt --clean --prod for production and distribution.
When run in dev mode using grunt serve, the application runs on http://localhost:9000/?baseApiUrl=https://localhost:8443&tenantIdentifier=demo

Question:

How do i go about making the application run in electron for dev mode and later package it for production? I tried How to port an existing angular app to electron? but it can't communication with the backed application on the port.

Please help.

Here's how,

1. The boilerplate code.

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. Take note of the line mainWindow.loadURL('file://${__dirname}/index.html').

Since your use case is to communicate with another backend application running on a port, using the file protocol (file://<uri>) won't work, you need to communicate with the port on http protocol.

3. To achieve this, I suggest to run a static files http server in your electron application, server your app over local server, and replace this mainWindow.loadURL('file://${__dirname}/index.html') line with mainWindow.loadURL(`http://localhost:9000`) this.

Edit 1:
You can run a very basic static files server like so, however there certainly are better ways to write it.

var express = require('express');

var server = express();

server.use('/', express.static(__dirname + '/'));

server.listen(9000);

Edit 2:

After some discussion in the comments, I decided to clone the repo and add the electron part myself, here's how I did it.

1. Install the following dependencies by running,

npm install --save electron express

2. index.js file

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. Add the following script in your package.json

"scripts": {

//...

  "start": "electron ."

 },

4. Result

PS: I had some troubles building angularjs project, because there were no build scripts in the project for windows, hence some styles are missing from the page.

Git repo:

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