Add express server and dockerize app built with vue-electron-builder

[aviTwito]

I asked that question on stack overflow, But then I thought it be more relevant for here
https://stackoverflow.com/questions/71305880/add-express-server-and-dockerize-app-built-with-vue-electron-builder

I built an electron vue app, When started the project I used Vue CLI Plugin Electron Builder
I`ve been asked to add an express REST server for all the main business logic functionality.
The express app should be stand-alone app running on docker container.
What I did until now is add the basic express server just for POC, I changed my backgraound.ts like this:

Before:

async function createWindow() {
  // Create the browser window.
  win = new BrowserWindow({
    width: 1200,
    height: 800,
    useContentSize: true,
    frame: false,
    webPreferences: {
      // Use pluginOptions.nodeIntegration, leave this alone
      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
      nodeIntegration: process.env
        .ELECTRON_NODE_INTEGRATION as unknown as boolean,
      contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION,
      preload: path.join(__dirname, "preload.js"),
      enableRemoteModule: true,
    },
  });
  win.maximize();

  if (process.env.WEBPACK_DEV_SERVER_URL) {
    // Load the url of the dev server if in development mode
    await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL as string);
    if (!process.env.IS_TEST) win.webContents.openDevTools();
  } else {
    createProtocol("app");
    // Load the index.html when not in development
    win.loadURL("app://./index.html");
  }
}

After:

...
import "./express-app/index.ts";
async function createWindow() {
  // Create the browser window.
  win = new BrowserWindow({
    width: 1200,
    height: 800,
    useContentSize: true,
    frame: false,
    webPreferences: {
      // Use pluginOptions.nodeIntegration, leave this alone
      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
      nodeIntegration: process.env
        .ELECTRON_NODE_INTEGRATION as unknown as boolean,
      contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION,
      preload: path.join(__dirname, "preload.js"),
      enableRemoteModule: true,
      enableBlinkFeatures: "Serial",
    },
  });
  win.maximize();
  win.hide();
  win.loadURL("http://localhost:3000/");
  // if (process.env.WEBPACK_DEV_SERVER_URL) {
  //   // Load the url of the dev server if in development mode
  //   await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL as string);
  //   if (!process.env.IS_TEST) win.webContents.openDevTools();
  // } else {
  //   createProtocol("app");
  //   // Load the index.html when not in development
  //   win.loadURL("app://./index.html");
  // }
}

My express index.ts

import express from "express";
const app = express();
app.get("/", () => {
  console.log("Get Request");
});

app.listen(3000, () => {
  // tslint:disable-next-line:no-console
  console.log(`server started at http://localhost:${3000}`);
});

So I just changed the part of win.loadURL() in the createWindow() boilerplate of the cli-plugin
I wanted to know how to add a dockerfile suitable for my scenario

I`m not sure how to even start my dockerfile since I'm not exactly sure what the script from package.json vue-cli-service electron:build does

[klren0312]

So you want to run the electron in docker ?

[klren0312]

How you see the app, when you run the electron app in docker. use vnc?

[aviTwito]

Not sure what you mean, I want the app to run as it runs when I run it locally with vue-cli-service electron:serve, But inside container.

[klren0312]

Not sure what you mean. you can

FROM node:9.11.1

RUN npm install --production

CMD npm run electron:serve

[aviTwito]

Its not exactly what I mean. I don`t really want it to run as in development.
With the plugin when building the app with "electron:build": "vue-cli-service electron:build" I get an installer which I can then install the app with. What I want to accomplish with docker is have a dockerfile which builds the app for production and runs it, But without creating an installer need to install the app, Cause at the end in that scenario I only want an express server inside a docker, Which happens to run on electron

[klren0312]

beyond my imagination