Setup electron when using webpack

Help Requests
1

right now I’m just trying to add electron to the basic hello world app (well, I did tweak some options in the aurelia cli, but still it’s just at hello world webpack+typescript).

my current attempt is to use webpack-electron, what I’m getting is a white screen of death. I can also get a black screen of death, if I exclude the renderer, it can’t find any of the resource files in that case, it’s looking for them at the wrong path.

here’s my src/main/app.ts

import { app, BrowserWindow } from "electron";
import * as path from "path";

let mainWindow: Electron.BrowserWindow;

const isDevelopment = process.env.NODE_ENV !== 'production';

function createWindowUrl(url) {
  const prefix = isDevelopment
    ? `http://localhost:${process.env.ELECTRON_WEBPACK_WDS_PORT}`
    : `file://${__dirname}`;

  return `${prefix}/${url}`;
}

function createWindow() {
  // Create the browser window.
  mainWindow = new BrowserWindow({
    height: 600,
    width: 800,
    webPreferences: {
      nodeIntegration: true,
    }
  });


  // and load the index.html of the app.
  mainWindow.loadURL(createWindowUrl('../index.html'));

  // Open the DevTools.
  mainWindow.webContents.openDevTools();

  // Emitted when the window is closed.
  mainWindow.on("closed", () => {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null;
  });
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on("ready", createWindow);

// Quit when all windows are closed.
app.on("window-all-closed", () => {
  // On OS X it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== "darwin") {
    app.quit();
  }
});

app.on("activate", () => {
  // On OS X it"s common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (mainWindow === null) {
    createWindow();
  }
});

// In this file you can include the rest of your app"s specific main process
// code. You can also put them in separate files and require them here.

and my src/renderer/main.ts which I’m sure is wrong per https://medium.com/kendraio/using-angular-with-electron-webpack-b9763903823c

import {} from "../main"

I don’t really care if I use webpack-electron, but how do I get aurelia working with electron in a way that also preserves the normal website/server code?

versions, but I doubt they matter

Calebs-MBP:warmaster calebcushing$ yarn list --depth=0 --pattern "^webpack|^aurelia|^electron"
yarn list v1.21.1
├─ aurelia-animator-css@1.0.4
├─ aurelia-binding@2.5.2
├─ aurelia-bootstrapper@2.3.3
├─ aurelia-cli@1.2.3
├─ aurelia-dependency-injection@1.5.2
├─ aurelia-event-aggregator@1.0.3
├─ aurelia-framework@1.3.1
├─ aurelia-history-browser@1.4.0
├─ aurelia-history@1.2.1
├─ aurelia-hot-module-reload@0.2.1
├─ aurelia-loader-default@1.2.1
├─ aurelia-loader-webpack@2.2.1
├─ aurelia-loader@1.0.2
├─ aurelia-logging-console@1.1.1
├─ aurelia-logging@1.5.2
├─ aurelia-metadata@1.0.6
├─ aurelia-pal-browser@1.8.1
├─ aurelia-pal@1.8.2
├─ aurelia-path@1.1.5
├─ aurelia-polyfills@1.3.4
├─ aurelia-route-recognizer@1.3.2
├─ aurelia-router@1.7.1
├─ aurelia-task-queue@1.3.3
├─ aurelia-templating-binding@1.5.3
├─ aurelia-templating-resources@1.13.0
├─ aurelia-templating-router@1.4.0
├─ aurelia-templating@1.10.3
├─ aurelia-testing@1.0.0
├─ aurelia-tools@2.0.0
├─ aurelia-webpack-plugin@3.0.0
├─ electron-builder@22.3.2
├─ electron-devtools-installer@2.2.4
├─ electron-publish@22.3.2
├─ electron-to-chromium@1.3.345
├─ electron-webpack-js@2.3.4
├─ electron-webpack@2.7.4
├─ electron@8.0.0
├─ webpack-bundle-analyzer@3.6.0
├─ webpack-cli@3.3.10
├─ webpack-dev-middleware@3.7.2
├─ webpack-dev-server@3.10.3
├─ webpack-log@2.0.0
├─ webpack-merge@4.2.2
├─ webpack-sources@1.4.3
└─ webpack@4.41.5
✨  Done in 1.03s.
1 Like
2

Cant say much about Webpack but if you’re fine with the built in CLI bundler this topic has an example

1 Like
3

after much pain, hair whitening, and hair loss I figured it out https://stackoverflow.com/a/60133678/206466

1 Like