typescript - Electron-forge: Cómo configurar el punto de entrada a una URL en lugar de un archivo HTML estático

Usé la plantilla electron-forge webpack-typescript para generar un proyecto de electron.

Por defecto carga index.html según lo configurado en entryPoints en package.json

...
"plugins": [
  [
    "@electron-forge/plugin-webpack",
    {
      "mainConfig": "./webpack.main.config.js",
      "renderer": {
        "config": "./webpack.renderer.config.js",
        "entryPoints": [
          {
            "name": "main_window",
            "html": "./src/index.html", // <-- HERE
            "js": "./src/renderer.ts",
          }
        ]
      }
    }
  ]
]
...

Quiero cargar la URL de Angular http://localhost:4200 como el punto de entrada.

Cuando cambio a "html": "http://localhost:4200",, no funciona.

Intenté eliminar la línea de package.json y codificar la URL directamente en index.ts

...
  // and load the index.html of the app.
  // mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);
  mainWindow.loadURL("http://localhost:4200");
...

Esto tampoco funciona. ¿Cómo puedo configurar la entrada a una URL en lugar de un archivo HTML estático?

Respuesta #1

simplemente haz que el punto de entrada sea un HTML en blanco con redirección

<html><head>
<meta http-equiv="refresh" content="2;url=http://example.com" />
<title>Page Moved</title>
</head><body>
<a href="http://www.example.com">continue</a></body>
</html>

La ventaja de esto es que incluso puedes agregar un pequeño javascript para primero verificar si el destino está disponible, para mostrar opcionalmente un mensaje de error, etc., si el puerto de destino por alguna razón no estuviera disponible para la aplicación, o mostrar una simple pantalla de bienvenida antes de que la aplicación se abra.

Respuesta #2

La respuesta corta es que la plantilla electron-forge webpack espera archivos js, ts, html como se menciona en la documentación de configuración del proyecto, por lo que no puedes establecer una URL de servidor como renderer allí.

Pero lo que puedes hacer es cargar tu aplicación web Angular desde tu proceso principal de Electron. De hecho, como hice aquí en mi electron-angular-quick-start, solo tienes que revisar tu configuración dev o prod por ejemplo y elegir qué recurso localhost:4200/index.html quieres cargar.

private loadRenderer(): void {
    if (process.env.X_NODE_ENV === "development") {
      // Dev mode, take advantage of the live reload by loading local URL
      this.window.loadURL(`http://localhost:4200`);
    } else {
      // Else mode, we simply load angular bundle
      const indexPath = url.format({
        pathname: path.join(__dirname, `../renderer/angular_window/index.html`),
        protocol: "file:",
        slashes: true,
      });
      this.window.loadURL(indexPath);
    }
}

Si todavía estás interesado en crear aplicaciones con Electron y Angular, te sugiero que le eches un vistazo para entender cómo funciona el inicio. Siéntete libre de publicar cualquier pregunta o enviar un problema en Github también.