fix(app): Electron - missing icons folder in build (#11087)

[hawkeye64]

Fixes #11087

[rstoenescu]

Not ok.

1. If there would be something to copy then it should be hooked into CopyWebpackPlugin in create-chain.js.
2. Is it really always needed? electron-builder embeds the icons automatically into the executable (but can't remember what it does on Linux);
3. Is this related to building on Linux? Is there something we can do to alleviate the Linux icons problem? Then add it to the electron template.
4. Please test behavior with and without the changes for electron-packager and electron-builder.

[hawkeye64]

1. If there would be something to copy then it should be hooked into CopyWebpackPlugin in create-chain.js.

Done. Using CopyWebpackPlugin to copy the icons.

2. Is it really always needed? electron-builder embeds the icons automatically into the executable (but can't remember what it does on Linux);

You are referring to this code:

      cfg.electron = merge({
        packager: {
          asar: true,
          icon: appPaths.resolve.electron('icons/icon'), // <-- here
          overwrite: true
        },
        builder: {
          appId: 'quasar-app',
          icon: appPaths.resolve.electron('icons/icon'), // <-- here
          productName: this.pkg.productName || this.pkg.name || 'Quasar App',
          directories: {
            buildResources: appPaths.resolve.electron('')
          }
        }

This does not work with Ubuntu 20.04.3 or Windows (11). Here, I even tried being more specific by adding the file extension.

3. Is this related to building on Linux? Is there something we can do to alleviate the Linux icons problem? Then add it to the electron template.

This is related to building with both Linux (Ubuntu) and Windows (11). Given enough time, I can set up our Mac for development and also test that. However, if the previous code no longer works as expected, this works 100% for Linux and Windows (and I assume Mac).

4. Please test behavior with and without the changes for electron-packager and electron-builder.

Tested both builder and packager with both Linux and Windows. All 4 variations are working with this fix.

Here is some more information after further research:

Builder:
There is no root-level icon in the commonConfiguration. This is defined at the platform level; linuxConfirguration, macConfiguration, and windowsConfiguration.

Also, there's this note:

Please note — build resources is not packed into the app. If you need to use some files, e.g. as tray icon, please include required files explicitly: "files": ["**/", "build/icon."]

This implies that the icon used currently is for the file output (exe, setup, etc) and not specifically the tray icon.

Based on this information I tried this:

        builder: {
          appId: 'quasar-app',
          linux: {
            icon: appPaths.resolve.electron('icons/linux-512x512.png')
          },
          win: {
            icon: appPaths.resolve.electron('icons/icon.ico')
          },
          mac: {
            icon: appPaths.resolve.electron('icons/icon.icns')
          },
          // icon: appPaths.resolve.electron('icons/icon'),
          productName: this.pkg.productName || this.pkg.name || 'Quasar App',
          directories: {
            buildResources: appPaths.resolve.electron(''),
            files: ['icons/icon.', 'icons/linux-512x512.png']
          }
        }

Which did not work.

Packager:
Packager has a root-level icon in its configuration. For macOS the file must be .icns, for windows it must be .ico. There is no support for adding an icon to Linux and BrowserWindow must be used to accomplish this.

https://electron.github.io/electron-packager/main/interfaces/electronpackager.options.html#icon

If the file extension is omitted, it is auto-completed to the correct extension based on the platform, including when platform: 'all' is in effect.

Linux: this option is not supported, as the dock/window list icon is set via the icon option in the BrowserWindow constructor. Please note that you need to use a PNG, and not the macOS or Windows icon formats, in order for it to show up in the dock/window list. Setting the icon in the file manager is not currently supported.

[hawkeye64]

I don't know how to get rid of the "changes requested" flag. :(

[hawkeye64]

This fix should get rid of this PR: #10142

[hawkeye64]

Also, if you create a clean Electron app under Ubuntu, then process is missing important values, like process.platform and process.type (the latter used by VueJs Dev Tools).

console.log(process)

> Output

process: {
  nextTick: [Function (anonymous)],
  title: 'browser',
  browser: true,
  env: {},
  argv: [],
  version: '',
  versions: {},
  on: [Function: noop],
  addListener: [Function: noop],
  once: [Function: noop],
  off: [Function: noop],
  removeListener: [Function: noop],
  removeAllListeners: [Function: noop],
  emit: [Function: noop],
  prependListener: [Function: noop],
  prependOnceListener: [Function: noop],
  listeners: [Function (anonymous)],
  binding: [Function (anonymous)],
  cwd: [Function (anonymous)],
  chdir: [Function (anonymous)],
  umask: [Function (anonymous)]
}

Changes are done

[hawkeye64]

One last thing. This is what happens when you build under Ubuntu 20.04.3 using "builder"

The bottom vscode is where the build occurred. The top vscode is showing an issue with @quasar/app. The File Explorer is showing the icons are there, but in the app code, it's not using an extension, so they are unresolved.

When I comment out those two lines in @quasar/app then the appImage build works.

[rstoenescu]

Merged and pushed another commit on top of this to add to CopyWebpackPlugin from the main electron build config.