Vue-cli-plugin-electron-builder: Executing a binary (ffmpeg) from a build

[getflourish]

Is your feature request related to a problem? Please describe.
I’m trying to use a ffmpeg binary in the build. It works by placing the binaries in the publicfolder and then referencing them through __static. However, in the build, it doesn’t work. Maybe because of permission, as in, the macOS app isn’t allowed to execute the binaries?

Describe the solution you'd like
child_process.execFile( path.join(__static, "ffmpeg")) should work in the build app.

Describe alternatives you've considered
Tried referencing the binaries outside of the public folder (for example app.getPath("exe")) but with no success so far.

Additional context
This might not be related to this vue-cli plugin at all, but I still felt this might be a reasonable place to ask, because it works in dev, just not in the build :)

[nklayman]

Files in the public folder will normally be copied into an asar archive, which electron uses to load web files. However, Electron Builder will atuomatically move executables outside of the asar, into the asar.unpacked folder at the same level. Try child_process.execFile( path.join(__static, "ffmpeg").replace('app.asar', 'app.asar.unpacked')). If that doesn't work, check dist_electron/PLATFORM-unpacked/resources and see if there is an app.asar.unpacked folder there and if it contains ffmpeg. If not, you may have to manually configure asarUnpack, see electron-builder docs and plugin docs for configuring electron-builder.

[getflourish]

Thanks for these hints where to look for the problem.

I’ve tried to set asar: false in the builderOptions and then had a look at the package.

It does contain the binaries, but interestingly macOS Finder shows them as “TextEdit Files” instead of “Executable Binaries”.

When I manually replace the binaries in the bundle, the app works.

Now I’ll try to find out what electron-builder gets wrong when moving the files. Does not seem to be related to asar afaik.

[getflourish]

I’ll close this because I don’t think my issue is related to the CLI-Plugin :)

[nklayman]

I think I found a solution, try this:

In vue.config.js:

module.exports = {
  pluginOptions: {
    electronBuilder: {
      builderOptions: {
        extraResources: ['./ffmpeg']
      }
    }
  }
}

In app.vue (or wherever you are spawning from):

import { spawn } from "child_process";
import path from "path";
spawn(path.join(__static, "../ffmpeg"));

This assumes ffmpeg is in the root dir of your project, but you can have it in a subfolder if you like, just update all the path references.

[getflourish]

🥳 It works exactly like that! Thank you!