Electron-react-boilerplate: No asar archive with resources

[atassis]

I have an error with tray. In dev mode the tray icon is created, while it is not with builded and insalled app. I start the tray with tray = new Tray('resources/icon.png');, using the same resources boilerplate provides. As I understand, the asar archive with icons is not compiled, as I can't see it in app installation directory.

[Slapbox]

In your package.json add to the files array: "resources/"

I think that's all you have to do. If not let me know.

[atassis]

@Slapbox the resources shown there are true for client bundle. I need resources from root folder. I even tried to move resources directory into app, changing the path from resources/icon.png to app/resources/icon.png, as well as all resources in package.json are from app directory. Nothing changed. After unzipping asar file there is no resources folder inside. Later I'll try to clean all the caches, reinstall node_modules and restart my IDE to make it work, but for now- nothing.

[Slapbox]

Try using my original suggestion "resources/" rather than in `"app/resources/"

Then in webpack.config.base.js at line 22 add:

{ 
    test: /\.(?:ico|gif|png|jpg|jpeg|webp)$/, 
    use: 'url-loader' 
}

There is another identical issue somewhere around here where my advice led to resolution I believe. I may be missing a step here. When we do discover exactly what needs to be done to add an icon, I'll add a wiki page to the repo for how to do it.

[Slapbox]

@atassis see #906

[atassis]

I saw that. This and mine issues are working different ways. The issue above is using webpack to gain the image, while in my case tray uses native image module. They are even resolving in different ways. Still, I'll try to import image.

[Slapbox]

@atassis I may be mistaken, but I believe these are the same issues. Your issue seems to be that in development you have no problem getting the image because it's being served from your file system, but in production the image is not being packaged. Is this correct?

If that is the case, then the webpack.config and package.json changes above in conjunction with something like this below should be a complete resolution.

main.development.js

let appIcon = null;
const iconPath = `${__dirname}\\resources\\icon.png`; \\  Mine uses .ico, but I imagine .png works just the same from a quick glance at the Electron docs?

mainWindow = new BrowserWindow({
    icon: iconPath,
  });

appIcon = new Tray(iconPath);

[amilajack]

@atassis did you resolve this?

[amilajack]

Also I wouldn't recommend hardcoding paths. Instead, use path.join():

import path from 'path'
let appIcon = null;
const iconPath = path.join(__dirname, 'resources', 'icon.png')

mainWindow = new BrowserWindow({
  icon: iconPath,
});

appIcon = new Tray(iconPath);

[amilajack]

Closing due to no response. Assuming this was resolved

[Noitidart]

Try using my original suggestion "resources/" rather than in `"app/resources/"

Then in webpack.config.base.js at line 22 add:

{ 
    test: /\.(?:ico|gif|png|jpg|jpeg|webp)$/, 
    use: 'url-loader' 
}

There is another identical issue somewhere around here where my advice led to resolution I believe. I may be missing a step here. When we do discover exactly what needs to be done to add an icon, I'll add a wiki page to the repo for how to do it.

@Slapbox I tried this, but it didn't work. :(

My code:

new Tray(path.join(__dirname, 'resources', 'icons', '16x16.png'))

[Slapbox]

@Noitidart are you 100% certain that the path is correct? With Electron __dirname is sometimes not what you think. This is probably not the issue, but something you should check if you haven't via logging to file in production, since it's so simple.

In my Electron-Builder config I have the key, files which is an array and includes my path to my icons as so:

  "files": [
    "app/desktop/includes/",
  ]

Note that the directory where we store icons has changed since my last comment.

---

Just to confirm, this works for you in development, right?

Are you calling new Tray() after app.on('ready' () => { // Your Code }) ? I'm not sure that you have to, but that's where my call is located, in case that helps.

[Noitidart]

Thank you @Slapbox so much for such a fast reply!

Actually I had to make a correction that paste above didn't work in dev (i had pasted the wrong path into the post) but I just needed to .. to go to parent dir. So this worked in dev:

new Tray(path.join(path.dirname(__dirname), 'resources', 'icons', '16x16.png'))

Also doing this worked:

new Tray(path.join(__dirname, '..', 'resources', 'icons', '16x16.png'))

Yep I'm doing it from within app.on('ready'.

I saw this is how we open url for browserWindow - mainWindow.loadURL(file://${__dirname}/app.html); so I tried:

new Tray(`file://${path.dirname(__dirname)}/resources/icons/16x16.png`)

But this didn't work in dev even. It gave me this error:

 ex: TypeError: Error processing argument at index 0, conversion failure from file://C:/Users/Mercurius/Documents/GitHub/Yanky-Panky-Desktop/resources/icons/16x16.png
    at App._electron.app.on (C:\Users\Mercurius\Documents\GitHub\Yanky-Panky-Desktop\app/main.dev.js:92:5)

So my first code block above works in dev, but not in production. :(

In my package.json I added resources/:

  "main": "./app/main.prod.js",
  "build": {
    "productName": "Yanky Panky",
    "appId": "org.karobaar.yankypanky",
    "files": [
      "app/dist/",
      "app/app.html",
      "app/main.prod.js",
      "app/main.prod.js.map",
      "package.json",
      "resources/"
    ],

Thanks sincerely for your help!! Excuse my delay in reply please.

[Noitidart]

Wow so it's not erroring because its not in a try-catch. And I even saw the tray icon for 3 sec in packaged version and then it disappeared! So crazy! It's not coming back anymore haha. I didn't modify any webpack files. Just added resources/ to files array in package.json

[Slapbox]

@Noitidart you should definitely install electron-unhandled. It will prevent a tiny failure from catastrophically crashing the entire app, and will also log the failure for you if you provide it a logger (I recommend electron-log)

Are things working for you now? I'm not entirely clear. Happy to help out.

[Slapbox]

@amilajack I've submitted a PR to reduce the headaches that uncaught errors cause with electron-unhandled https://github.com/electron-react-boilerplate/electron-react-boilerplate/pull/2201

[Noitidart]

Wow sooo interesting @Slapbox - today I tested it on macOS and it worked totally fine. But on my Windows machine it's not working. In exe. I am installing from the setup.exe, and not the setup.msi. I have no idea what is going on haha.

Deepest gratitude for the attention and effort to help a brother out!

[Noitidart]

Goshhh this is so weird. I changed to using ico and it shows for like 3 seconds, during startup of app, then it disappers! So weird.

[Noitidart]

Oh gosh fixed it, it was getting GC'd instantly! So it was there but I just never noticed it! https://github.com/electron/electron/issues/5499

Thanks soooo much for bearing with me through the false alarm. You are tooooo awesome @Slapbox! True brother!

To recap for everyone else, I didn't have to modify webpack. I just had to add resources/ to package.json (actually I didn't test what happens if i remove this from package.json, I should do this.)

[Slapbox]

Glad you got it figured out! That's an issue that hadn't even occurred to me as a possibility.

I was a super noob starting out, so all thanks to @amilajack for bearing with me for long enough to get me up to speed to bear with you!

[Noitidart]

Hahaha noob circle of life! haha

On Wed, May 1, 2019 at 12:32 PM Slapbox [e-mail] wrote:

Glad you got it figured out! That's an issue that hadn't even occurred to
me as a possibility.

I was a super noob starting out, so all thanks to @amilajack
https://github.com/amilajack for bearing with me for long enough to get
me up to speed to bear with you!

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/electron-react-boilerplate/electron-react-boilerplate/issues/944#issuecomment-488389250,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABQTZCORL3PFASBBZQWG7NTPTHV3VANCNFSM4DIVOPDQ
.