Consider support for the `server` block from `capacitor.config`

[richardmward]

Is your feature request related to a problem? Please describe. I have seen that support for "Livereload for Ionic React app" (#50), however, I wonder if it'd be possible to support the server block from capacitor.config in the same way that it is used for android and ios.

Describe the solution you'd like Access would be required to all of capacitor.config (currently only the electron bit is in CapacitorFileConfig), and then something like:

  private async loadMainWindow(thisRef: any) {
    if (electronIsDev && config.server) {
      await thisRef.MainWindow.loadURL(config.server.url);
    } else {
      await thisRef.loadWebApp(thisRef.MainWindow);
    }
  }

Describe alternatives you've considered The existing solution (#50) works for reloading when the backend changes, but this would mean you don't have to wait for a complete build.

Additional context N/A

[jamieatbark]

Sharing a version with a hard-coded server url (tested with "@capacitor-community/electron": "^4.0.1").

electron/src/setup.ts

  // Helper function to load in the app.
  private async loadMainWindow(thisRef: any) {
    if (electronIsDev) {
      await thisRef.MainWindow.loadURL('http://localhost:3000');
    } else {
      await thisRef.loadWebApp(thisRef.MainWindow);
    }
  }

Allow localhost in dev mode:

// Set a CSP up for our application based on the custom scheme
export function setupContentSecurityPolicy(customScheme: string): void {
  session.defaultSession.webRequest.onHeadersReceived((details, callback) => {
    callback({
      responseHeaders: {
        ...details.responseHeaders,
        'Content-Security-Policy': [
          electronIsDev
            ? `default-src ${customScheme}://* 'unsafe-inline' devtools://* 'unsafe-eval' data: localhost:* ws://localhost:*`
            : `default-src ${customScheme}://* 'unsafe-inline' data:`,
        ],
      },
    });
  });
}

electron/live-runner.js

Watch both the React app src and Electron src directories:

function setupReloadWatcher() {
  reloadWatcher.watcher = chokidar
    .watch('../**/src/**/*', {
      ignored: /[/\\]\./,
      persistent: true,
    })

[drannex42]

You could extend @jamieatbark's solution to not need a double hard-coded server url by adding this:

electron/src/setup.ts

import * as config from "../capacitor.config.json";

  // Helper function to load in the app.
  private async loadMainWindow(thisRef: any) {
    if (electronIsDev && config.server.url) {
      await thisRef.MainWindow.loadURL(config.server.url);
    } else {
      await thisRef.loadWebApp(thisRef.MainWindow);
    }
  }

and adding this to electron/tsconfig.json

"compilerOptions":
    "resolveJsonModule": true,

[jdgjsag67251]

I believe the capacitorFileConfig argument passed to the ElectronCapacitorApp constructor does contain the whole config in version 4.1.0