I have an issue building for distribution an electron app, on macOS.
I have some folders that are in the root dir of my project, next to my index.js, which I need to be included in my packaged app.
After trying by hardcoding each and every file inside of package.json, which didn't help, I ended up with the following block
"extraResources": [
{
"from": "files/",
"to": "files/",
"filter": [
"**/*"
]
},
{
"from": "assets/",
"to": "assets/",
"filter": [
"**/*"
]
},
{
"from": "accounts/",
"to": "accounts/",
"filter": [
"**/*"
]
}
]
If I run the .app it appears that the files are not there. Opening the Contents/Resources, I see they are there, so, toying around I discovered that the app is looking inside the app.asar container, where obviously the files are not.
I found a small hack by adding a couple of '..' in front of all my paths, so it goes outside the app.asar container but I really think this is a bit idiotic to be the solution to my issue.
Plus, I plan to build this for multiple platforms and I have a feeling that if I go through with this hacky way of fixing it, I'll have to create a hack for each platform, which I'd rather not do...
if you have files that you are using in the html (in my example assets/css etc.), or requiring in any file and have a folder structure like this, the folders would be automaticly in the asar.
Note: asar is read only package, you cant add, remove or edit files after creating this file.
the using of the css files in the assets/css folder is simple:
use the relative path from your html file and it would work on all plattforms.
if you have files that are not related to your project, or not used in your project but should be available in the packaged app:
you must use "extraFiles" in your package.json
extraFiles would copy the files to the app content directory on Mac OS, on Windows and Linux it will copy it to the app root directory. If you use extraResources it will copy the files to Contents/Resources on Mac and on Windows it will copy the files to resources Folder.
"extraFiles": [
"files",
"assets",
"accounts"
]
note: empty folders would not be copied
in your app use something like this module to get the root path of your app, and use your files with this path
alternative: use process.execPath and replace your executable name to get the correct path
based on your comment:
if you must load this files (css/js) in your app html, you can load dynamicly on the onload event with the solution i provided you above.
Related
I've got two "identical" (same OS, Visual Studio, etc.) machines. One has vcpkg with a number of installed packages ('older' versions), and I'd like an identical copy on the new machine that is integrated with Visual Studio. There seem to be a number of relatively complicated methods of accomplishing this: export/import, manifest versioning and binary caching. But what I'd really like to do is run a command on the new machine like "vcpkg installfrompath " or copy the vcpkg folder to the new machine and run "vcpkg restore". I really feel like this must exist and I'm just not seeing it.
Got answer from MS :) https://github.com/microsoft/vcpkg/issues/23464
Simply copy the vcpkg folder and run "vcpkg integrate install"
I verified that this works. Interestingly, this is the command you use when initially setting up vcpkg, but it didn't click for me, not did I see this answer in any of the similar questions I saw posted.
Use manifest mode. It's really easy and gives you exact control over different versions. Just add a file called "vcpkg.json" to the root folder of your project, activate "manifest" in the vcpkg entry of your Visual Studio project and you are almost done.
This is what a manifest file looks like:
{
"name": "myapp",
"version": "1.66.0",
"dependencies": [
{ "name": "pybind11" },
{ "name": "boost-format" },
{ "name": "boost-preprocessor" },
{ "name": "boost-uuid" },
{
"name": "python3",
"version>=": "3.7.4"
}
],
"builtin-baseline": "03ca9b59af1506a86840e3a3a01a092f3333a29b",
"homepage": "https://some.server.loc",
"supports": "windows"
}
Then simply build with Visual Studio. This will invoke vcpkg and build the exact versions you want.
We have a white-labeled app built with electron+angular and we want to build 3 different let's say 'flavours' of the app. Except for the UI changes in Angular we have a different electron-builder file with configurations for each project. The problem is that after I build the first one the next one is twice its size (as a .exe) and when I build the third one it's even bigger. It does not matter which I build first, as this is always the case.
I am building these apps with the electron-builder build command, using the --config option to pass a file with configurations.
This is the electron-builder file that I am using (with PROJECT_NAME, PROJECT_APP_ID, and PROJECT_ID changing depending on the project).
"productName": "<PROJECT_NAME>",
"appId": "<PROJECT_APP_ID>",
"directories": {
"output": "release/<PROJECT_ID>"
},
"files": [
"**/*",
"!**/*.ts",
"!*.code-workspace",
"!LICENSE.md",
"!package.json",
"!package-lock.json",
"!src/",
"!e2e/",
"!hooks/",
"!angular.json",
"!_config.yml",
"!karma.conf.js",
"!tsconfig.json",
"!tslint.json"
],
"win": {
"icon": "dist/assets/icons/<PROJECT_ID>"
},
"mac": {
"icon": "dist/assets/icons/<PROJECT_ID>"
},
"linux": {
"icon": "dist/assets/icons/<PROJECT_ID>"
},
}
Am I missing something for electron-builder? I am thinking maybe it keeps a 'cache' or something in a temporary folder and uses that to build on.
I know the question is a bit over the place, but I don't have experience with electron-builder. Any help or suggestion is welcomed.
Some details:
I tried building it from both a windows machine and mac os.
I am using electron-builder v22.9.1
I have tried using different folders for the result, it still didn't work.
[UPDATE] In the script that i use to build these projects, if i delete the directory of the build and then continue with the others, it will work.
We have a custom ExtJS CMD package created and used for main application. CMD package uses external js that is already minified/compressed. However on production build for app ExtJS again compresses already compressed file, leading to errors in app wherever those external resources are referenced.
Do we have any flag that turns of compression in package.json for externally included resources?
Well, one answer would be to simply not package the external JS with your app, but to serve it separately. Guessing that's not what you want to do, though...
So, to package the file and not have it be compressed, you edit the app.json. In particular, the production block, where there should be a js entry. Make it look something like this:
"production": {
"js": [
{"path": "app.js", "bundle": true},
{"path": "external_file_that_should_not_be_compressed.js", "compress": false }
],
...
},
I've been trying to add additional functionality to the electron installer, where I copy some files that are packaged inside the installer, but I receive a non-descriptive error when I try to compile my electron project to create the installer i.e. I get:
* writing effective config
* packaging
* building
x [object Object]
Here is what my script looks like:
!macro customInstall
Rename "$APPDATA\myfolder\img" "$APPDATA\myfolder\img-old"
SetOutPath "$APPDATA\myfolder"
File /nonfatal /a /r "additional_files\*"
CreateShortcut "$SMSTARTUP\mylink.lnk" "$INSTDIR\mylink.exe"
!macroend
Basically everything works except the file copy part. When I remove that part the project builds and compiles into an installer with no problems.
I've also tried to use CopyFiles instead of SetOutPath and File and it works as expected when I place the additional_files folder into the same folder as the installation (dist folder), but I want the folder to be packaged inside the installer. However, I cannot get the additional_files to be packaged with the installation.
I believe it's a location issue, that is, that the NSIS script cannot locate the additional_files/ folder. I've tried modifying the package.json file by adding to the files section the additional_files/ folder and placing it in the root of the project.
I've even tried placing it in the build folder where my installer.nsh script resides, but with no luck.
File looks for files relative to the directory where the .nsi is by default. /NOCD can be used to prevent that but I'm not sure if electron uses that switch.
!cd can be used inside a script to change the directory but I'm not sure if that is going to help you much in this case unless you are willing to use a absolute path and in that case you could just use the absolute path with the File instruction instead.
If you only know where your .nsh file is I suppose you could try File /r "${__FILEDIR__}\additional_files\*"
if you are using electron-builder you have two options inside the settings
extraResources this will copy files into the $INST_DIR/resources folder in your app (this is where the app.asar file is too), and you can access via process.resourcesPath, ex:
extraResources: [
{ from: './dist/ThirdPartyNotices.txt', to: 'ThirdPartyNotices.txt' },
]
extraFiles this would do the same but place the files into the $INST_DIR root folder of your installation ex:
extraFiles: [
{ from: './distrib/mytool.exe', to: 'mytool.exe' },
],
to get the root folder you can use something like remote.app.getAppPath().replace('resources\\app.asar', '').replace('resources/app.asar', '');
all info on: https://www.electron.build/configuration/configuration#overridable-per-platform-options
I have a dll-file that I need to use for a separate process that is started by the Main process in my Electron project.
So I want to include this dll in my electron project and I'm using electron-builder to build the project. The problem is that I don't know how to include the file without it being added in the asar package, which is not reachable from the separate process directly. When I use app.getPath() to get the path for the running instance it will look something like this:
C:\installPath\myProject\resources\app.asar\my.dll
my electron-builder.json currently looks like this:
{
"productName": "myApp",
"directories": {
"output": "release/"
},
"files": [
"**/*",
"my.dll"
],
"win": {
"icon": "dist",
"artifactName": "myApp.${ext}",
"target": [
"portable"
]
}
}
Are there any way to get my.dll included in the resources folder (or somewhere else) instead of in the app.asar?
Thanks!
Solution1:
You should be able to do it with "extraResources" param, put your .dll under resources folder, then create config param named "extraResources" under targeted dist.
The installation process should copy the file(s) to app’s resources directory
https://www.electron.build/configuration/contents#extraresources
Solution2:
You can download .dll file from a web server then move it to the desired place with fs.
If you Keep the DLL file in the Dist folder, Electron-builder tool will include that file into the app.asar file.
This is the limitation of that because if you trying to load the dll file using ffi module or your own written native node module then it will not load the file from app.asar file. so you have to keep the dll file outside of the app.asar file manually or make this copy setup part of your build system.