Developed an Electron app using Vuejs and everything works fine in development, but when packaged I keep getting this pop-up after start up (NOTE: This is a sample image - mine doesn't say 'windowsdefender' but is otherwise the same).
Using electron-builder to create the application with the following build json, and it is installed on the PC:
{
"productName": "My App",
"appId": "com.mycompany.myapp",
"win": {
"icon": "build/icon.png",
"target": [
"nsis"
]
}
}
Though the app does open, there is no initial screen. However, I can open the dev tools but there are no errors displayed.
Any ideas on what is causing this or how to resolve?
After many tries, I finally figured it out (or at least I think I know what caused the issue).
The primary issue was that in using vue router (from an app ported from the web), it is important that you use 'hash' mode and not 'history. Add this to your router file:
const router = new VueRouter({
mode: process.env.IS_ELECTRON ? "hash" : "history",
routes
});
See this link for more details (common issues): Vue CLI plugin common issues
Second, I think there is a rights issue (i.e. having elevated rights to install) so I added this line along with the guid to my electron-builder.json file. The result was a build file like this:
{
"productName": "My App",
"appId": "com.abcco.my-app",
"win": {
"icon": "build/icon.png",
"target": "nsis",
"requestedExecutionLevel": "requireAdministrator"
},
"nsis": {
"guid": "6ee647a9-d5c6-46a9-a480-aa7d6d3d1c10",
"oneClick": false,
"allowToChangeInstallationDirectory": true
}
}
As I am developing only for Windows I was able to use material from this page (React but not that different with respect to Electron packaging):
Electron Build file help
The last thing I did was to remove all 'dist' files and uninstall the app entirely (previous versions). I think this cleared up a lot of the 'baggage' left over from testing.
Hopefully this helps others who may experience the same issue.
Related
I am using ACE editor in my browser extension. It all works fine in a Chrome/Chromium browser, but when I try the extension in Firefox (latest version), only ace.define and ace.require are available (ace.edit is needed, at least, to initialize).
Here is the part of the manifest (MV2) file involved:
"content_scripts" :
[
{
"matches": ["*://example.com/*"],
"all_frames": true,
"js": [
"ace-min/ace.js",
"myscript.js"
],
"run_at": "document_end"
},
]
What could be done wrong? Both files are being read, but only a part of ace.js seems to be executed. Imagine that myscript.js contains a console.log(ace), to see which functions can I use.
Thanks in advance!
I posted an issue on the ACE's GitHub repository. The response was very quick and polite.
All is explained in this comment: https://github.com/ajaxorg/ace/issues/4898#issuecomment-1217887526
Just a side note, use noconflict ace instead of normal ace. The function you need to change is at the bottom.
I have developed Azure DevOps extension and published it to marketplace. Recently I have came across mandatory UI changes. While performing dev testing, I have noticed that once I install new extension (with UI changes) it still showing old UI components.
For example, let’s say I have string input named “Name” and I have replaced it with “Full Name”. I still see my old input which is “Name”.
Old :
{
"name": "name",
"type": "string",
"label": "Name",
"required": true
}
New:
{
"name": "fullName",
"type": "string",
"label": "Full Name",
"required": true
}
I removed temp files under below locations, but issue persists.
C:\Users\<< User Name >>\AppData\Local\Microsoft\Team Foundation\
<< Agent Folder >> \ _Work\
Windows Temp folder
I have changed the task id (GUID) and it seems resolving this issue. But this is not viable solution as I cannot issue new task id for already published extension.
Due to this reason I believe best option to resolve this issue is deleting cached data. Please let me know, Where does the Azure DevOps / TFS cache it’s extension data?
Thanks in Advance!
Try to clean the browser cache, and check whether you have increase the version number in the task.json.
Also, try to Delete task -- Save definition -- add task again, which should help.
For me solution with updating task version and removing browser cache didn't work. I found the DistributedTask folder in one of subfolders in the root cache folder. In my case it was cache_root_folder/<some_uuid>/Proxy/<another_uuid>/DistrebutedTask/. I dont know what these UUIDs mean and found this path just accidentally. Removing all from this folder helped.
#angular/cli#7+ allows a customWebpackConfig to be specified to provide custom webpack configuration, such as:
"architect": {
"build": {
"builder": "#angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {
"path": "./build/custom-webpack.config.js",
"mergeStrategies": {
"externals": "prepend"
}
},
...
This file then technically allows you to prepend, append or replace any portion of the webpack configuration. Prior to upgrading to #angular#7.1.3 and #angular/cli#7.1.3 we had ejected the webpack configuration to make some additions. One such addition was the postcss-momentum-scrolling postcss-loader plugin that automatically enabled iOS momentum scrolling on all scrollable containers.
I am seeking support on figuring out how to generate the necessary custom webpack code to load this plugin via the supported customizations allowed by #angular/cli#7+.
Here is a sample of what I have tried in my custom-webpack.config.js file:
const postcssMomentumScrolling = require('postcss-momentum-scrolling');
module.exports = {
module: {
rules: [
{
test: /\.scss$|\.sass$/,
use: [
{
"loader": "postcss-loader",
"options": {
"plugins": [
postcssMomentumScrolling(),
]
}
}
]
},
],
},
};
As soon as I touch the scss chunk of the webpack config, it seems to do a replace instead of a merge or prepend, breaking the build.
I am wondering if anyone has a guide or suggestions on how to see what the initial webpack configuration that #angular/cli generates that is the starting point for modifications and a way to preview/peek at the code to be executed as debugging.
Also, an example of a similar customization would be great.
Thanks!
I think you need to tell to "customWebpackConfig" which portion to merge. Like this:
"mergeStrategies": {
"module.rules": "prepend"
}
In this way you're going to tell to merge with prepend strategy.
According to "custom-webpack" documentation it should default to "append" which doesn't seem the case in your example.
It's been a while since you've put the question but I wanted to actually ask if you have been able to fix it since I'm running in some issues getting my "module.rules" merged...it seems to work only if I set "replace" strategy.
I'm using electron-react-boilerplate to develop electron app (which uses electron-builder to pack apps).
I want to create tray, but it requires icon path or native image. The question is how to retrieve icon image from electron-builder or how to tell electron-builder to include icons dir into resources (without packing), so I can use:
appIcon = new Tray(iconPath | nativeImage)
I kind of struggled with a solution about non-packaged assets (such as media or JSON config files), mostly because I was not familiar with Electron until now. :)
I built a simple personal tray-only app and I didn't want to repackage every time I change an icon for instance.
If you too plan on using changing/dynamic assets you can distinguish between "development" and "production" using this property:
https://electronjs.org/docs/api/app#appispackaged-readonly
Make sure you have this in your package.json:
"build": {
...
"extraResources": [
"./assets/**"
],
}
https://www.electron.build/configuration/contents#extraresources
Then in your code you can have:
const assetsPath = app.isPackaged ? path.join(process.resourcesPath, "assets") : "assets";
Of course you can also use a different path for storing assets, independent of your packaged app folder, for example your user's home or user's documents:
https://electronjs.org/docs/api/app#appgetpathname
Electron v7.0.1
electron-builder 21.2.0
Firstly you need to tell electron-builder which extra files need copying into your output build. I copy over native drivers for each os like below, but you should be able to adapt this to your needs. The "to": "resources" means you'll be able to use the next code to find the files later.
"build": {
...
"extraFiles": [
{
"from": "resources/${os}/drivers",
"to": "resources",
"filter": [
"**/*"
]
}
],
Then to get access to that path from in electron you can use:
const path = require('path');
const imgPath = path.join(process.resourcesPath, 'image.png')
If you're in the main process you can omit the remote part.
You can then use nativeImage.createFromPath to get a native image:
const nativeImage = require('electron').nativeImage
let image = nativeImage.createFromPath(imgPath)
Thanks, Tim, your answer gave me a good thought. I reused it with some addition depending on how I run my app - form vs code using electron or from installed deb file:
"build": {
...
"extraFiles": [
{
"from": "assets",
"to": "resources",
"filter": [
"**/*"
]
}
]
...
}
And then:
let imgPath = process.env.DEV ? "assets/icon.png" : path.join(process.resourcesPath, "icon.png");
tray = new Tray(imgPath);
I'm using the latest version of Trigger.io and have my mobile application configured to require iOS 5.0 or higher, and I've got all the icons loaded in the config.json file, e.g:
"modules": {
…
"icons": {
"android": {
"36": "path/to/ICON_36sq.png",
"48": "path/to/ICON_48sq.png",
"72": "path/to/ICON_72sq.png"
},
"ios": {
"57": "path/to/ICON_57sq.png",
"72": "path/to/ICON_72sq.png",
"114": "path/to/ICON_144sq.png",
"512": "path/to/ICON_512sq.png",
"prerendered": true
}
},
…
However, when trying to deploy the application to the App Store using the Application Loader, I get the following error:
iPhone/iPod Touch: Info.plist: Unable to verify icon dimensions, no icon found. You must define CFBindleIcons, CFBundleIconFiles, CFBundleIconFile, or provide a default Icon.png that us 57x57.
The icon file does exist and is correctly configured for my app, so it's not a issue of the file not existing. It also works correctly on the simulator and my development device, just not when releasing to the app store.
Any help is appreciated.
POSSIBLE CAUSE: If I dig into the IPA and look at the Plist.info file in the resulting package created by trigger.io, the MinimumOSVersion is set to 4.3, and not respecting what I have in my config.json file (minimum version I've set to is iOS 5.0).
After more research, I found that I can deploy the app successfully using v1.4.36 and below. Looks like the refactor in v1.4.37 has broken the Minimum OS Requirements again!
This was a bug in the Trigger.io platform: we deployed a fix in v1.4.44 - see https://trigger.io/docs/current/api/release_notes.html
There are currently two ways to define custom icon file names in an iOS app. After recreating an Xcode project we use internally, the newly generated Info.plist only conformed to the new style, which causes Application Loader problems.
v1.4.44 restored the old-style icons configuration.
You need to use relative paths from the 'src' directory rather than assuming a baseUrl. So use "path/to/ICON_36sq.png" not "/path/to/ICON_36sq.png"
If you look at "development/ios/build_steps/icons.json" you'll see something like that.
[
{
"do": {
"copy_file_from_src": {
"filename": "{{plugins.icons.config.ios.57}}",
"dest": "normal.png"
}
}
},
{
"do": {
"copy_file_from_src": {
"filename": "{{plugins.icons.config.ios.72}}",
"dest": "ipad.png"
}
}
},
{
"do": {
"copy_file_from_src": {
"filename": "{{plugins.icons.config.ios.114}}",
"dest": "retina.png"
}
}
},
{
"do": {
"copy_file_from_src": {
"filename": "{{plugins.icons.config.ios.144}}",
"dest": "ipad-retina.png"
}
}
},
{
"do": {
"icons_handle_prerendered": {}
}
}
]
As shown above, the build is copying the 57px icon in your configuration to "normal.png" and the 72px to "ipad.png", but for some reason the Application Loader is not recognizing the CFBundleIconFiles entry in the Info.plist.
I solved my problem using a postbuild hook to copy the 57px icon to the expected default name "Icon.png" and the 72px icon to "Icon-72.png" (the file names are case sensitive). The files have to be copied to the "development/ios/device-ios.app/" folder.