Example throws error: EACCES

[jlarmstrongiv]

> electron-color-picker-example@ start /Users/~/Downloads/…/electron-color-picker/example
> electron ./main.js

[main:ipc-task:color-picker] start
[main:ipc-task:color-picker] done { result: undefined,
  error:
   { Error: spawn /Users/~/Downloads/…/electron-color-picker/example/node_modules/electron-color-picker/library/darwin/mockingbot-color-picker.app/Contents/MacOS/ColorPicker EACCES
       at Process.ChildProcess._handle.onexit (internal/child_process.js:246:19)
       at onErrorNT (internal/child_process.js:429:16)
       at processTicksAndRejections (internal/process/task_queues.js:81:17)
     errno: 'EACCES',
     code: 'EACCES',
     syscall:
      'spawn /Users/~/Downloads/…/electron-color-picker/example/node_modules/electron-color-picker/library/darwin/mockingbot-color-picker.app/Contents/MacOS/ColorPicker',
     path:
      '/Users/~/Downloads/…/electron-color-picker/example/node_modules/electron-color-picker/library/darwin/mockingbot-color-picker.app/Contents/MacOS/ColorPicker',
     spawnargs: [],
     cmd:
      '/Users/~/Downloads/…/electron-color-picker/example/node_modules/electron-color-picker/library/darwin/mockingbot-color-picker.app/Contents/MacOS/ColorPicker' } }

Clicking the button more than once creates this error

[main:ipc-task:color-picker] done { result: undefined,
  error:
   Error: color picker already running!
       at exports.getColorHexRGB (/Users/~/Downloads/…/electron-color-picker/example/node_modules/electron-color-picker/library/index.js:6:46)
       at EventEmitter.<anonymous> (/Users/~/Downloads/…/electron-color-picker/example/main.js:20:37)
       at EventEmitter.emit (events.js:194:13)
       at WebContents.<anonymous> (/Users/~/Downloads/…/electron-color-picker/example/node_modules/electron/dist/Electron.app/Contents/Resources/electron.asar/browser/api/web-contents.js:390:13)
       at WebContents.emit (events.js:194:13) }

Following https://github.com/npm/npm/issues/17268 does not fix the issue. Using MacOS 10.14.5 with https://github.com/nodenv/nodenv node v11.13.0

[jlarmstrongiv]

Using chmod -R u+x node_modules/electron-color-picker/library worked, but that seems like a hack

[jlarmstrongiv]

Consider running an initialization with shell chmod, similar to IBM-Design/Color-Bee

[ThatBean]

Thanks for reporting this!

In our internal usage there do have a snippet for resetting the permission, like this:

  const { chmodSync } = require('fs')
  const { join } = require('path')
  const rimraf = require('rimraf') // or other `rm -rf` code

  const BUILD_PLATFORM = process.platform // NOTE: or your target platform
  const PATH_ELECTRON_COLOR_PICKER = '/full/path/to/node_modules/electron-color-picker/'

  console.log('fix permission')
  BUILD_PLATFORM === 'linux' && chmodSync(join(PATH_ELECTRON_COLOR_PICKER, 'linux/linux-scrot/scrot'), 0o777)
  BUILD_PLATFORM === 'darwin' && chmodSync(join(PATH_ELECTRON_COLOR_PICKER, 'darwin/mockingbot-color-picker.app/Contents/MacOS/ColorPicker'), 0o777)

  console.log('trim extra platform (optional)') // Optional, to make output package smaller
  BUILD_PLATFORM !== 'win32' && rimraf.sync(join(PATH_ELECTRON_COLOR_PICKER, 'win32'))
  BUILD_PLATFORM !== 'linux' && rimraf.sync(join(PATH_ELECTRON_COLOR_PICKER, 'linux'))
  BUILD_PLATFORM !== 'darwin' && rimraf.sync(join(PATH_ELECTRON_COLOR_PICKER, 'darwin'))

Maybe this can be fixed by package the .tgz with correct permission, and some mentioning in README.md.

Will test for a fix later.

[jlarmstrongiv]

My only suggestion is to use a stricter permission than 777, but sounds great! 👍perhaps 755

[ThatBean]

Sorry for the long delay!

After checking some package like: https://github.com/sindresorhus/open. It seems reasonable to pack executable with 0o755 permission directly into .tgz. The npm pack is now forbidden to run from win32 platform, due to permission loss in .tgz file.

The release process of Electron app with this package is kind of complex. A short description is added to #about-release-packaging. And a more complete dev & packing process has been added to example/, be sure to run & test that following #example.

[jlarmstrongiv]

Electron Builder

It would be great to include instructions for electron-builder as well. I’ve been pouring over their documentation, and I’m not quite sure which configuration is best.

• In Common Configuration, “Node modules, that must be unpacked, will be detected automatically, you don’t need to explicitly set asarUnpack - please file an issue if this doesn’t work.”
• This medium article demo’d setting the executables inside extra-resources

Example

I haven’t had the time to thoroughly understand the example yet. I noticed it depends on dr-js, which while I’m glad is helpful, makes it harder for beginners to understand without more documentation and adds a dependency to this module.

My question is—does the example build process change/patch the scripts since the locations of the executables change after being bundled? If the example is actually doing something else, could you give a high level overview on how it works? 🙂

If we’re patching the location in the scripts in the build process, I think a more permanent and streamlined solution would be to add configuration/options for the location of the executables (and have default configurations available for tools like electron-builder, electron-packager, and electron-forge).

Other Considerations

We should warn about using asar: false in the readme. It comes with drawbacks, such as node_modules failing due to long paths on windows.

Glad 0o755 works 👍

Thank you for your help on this! I think we’re getting close to a permanent solution 💯

[ThatBean]

Haven't used electron-builder yet. (the doc is quite long though)

Can you run the example and get a working Electron package?

---

The idea of the example is to show a working Electron app project setup, with most of the code inside app.asar, but also can require and use electron-color-picker.

A special delegate require file is needed: example/source/main/electronColorPicker.js to switch path between dev/prod mode, to access the correct electron-color-picker code

This minimal setup is extracted from our app build script. It should allow:

• Develop with unpacked electron
• Build packed electron app

And will put output file to 2 extra folder:

• ./pack-0-source-gitignore/: prepared source code (main/renderer) ready for pack
• ./pack-1-output-gitignore/: packed Electron app

For develop, the step is like: (npm run run-dev)

• npm run script-pack-0-source-dev:
  • delete & recreate to reset ./pack-0-source-gitignore/ content
  • build code & output to: ./pack-0-source-gitignore/ (npm run build-pack-0-source-dev)
• run code with electron ./pack-0-source-gitignore/main/index.js

For Production/Release, the step is like: (npm run run-prod)

• npm run script-pack-0-source:
  • delete & recreate to reset ./pack-0-source-gitignore/ content
  • build code & output to: ./pack-0-source-gitignore/ (npm run build-pack-0-source)
  • better optimize output file with code minify & remove unused file
• npm run script-pack-1-output:
  • delete & recreate to reset ./pack-1-output-gitignore/ content
  • pack with electron-packager and output to ./pack-1-output-gitignore/
  • copy electron-color-picker from node_modules, and put under output resources/ folder
  • optionally delete unused platform code from copied electron-color-picker

---

Follow the steps there is no special modification required for electron-color-picker package, just extra copy & special require code to toggle path.

In our build setup, we want to have more control of the intermediate output, for optimize, debug and later inspection, so we used electron-packager for only the packing. With electron-builder these custom steps should be possible to add, but may be harder, since it did a lot more than packing.

---

Will sort and add a more clear description to README.md later.

[mankeheaven]

great!

[jlarmstrongiv]

Thank you @ThatBean 👍 that explanation helped a lot.

I’m moving into a new house this month, so all my free time is put into packing everything and collecting legal documents. Once I’m settled down, I’ll try and see if I can get this package working with electron-builder.

[RobbieTheWagner]

I was able to get the resources copied over with electron-packager, but the picker still does not work when packaged with my app https://github.com/mockingbot/electron-color-picker/issues/6

I believe the process for electron-builder would be the same as electron-packager, where you can specify extraResource and have the files copied over.

Does anyone have this working on MacOS? I keep getting permissions issues, and no matter how many times I give permissions for input, I keep getting the popup asking for permissions.

[ThatBean]

Recent update for darwin platform is tracked in this issue: https://github.com/mockingbot/electron-color-picker/issues/6