I am working on app with electron and electron-forge, this app is being built on a virtual machine with no internet connection, so I got electron binaries files, and set the electron_config_cache to the path where I located the new binaries as well as for cacheRoot for packagerConfig in the package.json file, the problem is that:
When I run yarn package (electron-forge package) I am getting Done with green check next to each step which had been called by yarn package .. but the out folder is empty, while it should has appName-win32-x64 folder which contains .exe.
so does anyone have an idea regarding this?
Be sure that your package.json has the correct settings, including the "main" attribute as well as build directories. It seems electron forge uses electron-packager as its packaging platform so:
Following these instructions:
From Electron forge,Electron forge - packager options, Electron-packager options
Without a forge.config.js file:
Add this to your package.json:
"config": {
"forge": {
"packagerConfig": {dir:"./path/to/your/dir"},
"makers": [
{
"name": "#electron-forge/maker-zip"
}
]
}
Or with a forge.config.js file:
In your package.json, make sure to have:
{
"name": "my-app",
"version": "0.0.1",
"config": {
"forge": "./forge.config.js"
}
}
In your forge.config.js:
{
packagerConfig: {dir:"./path/to/your/dir"},
electronRebuildConfig: { ... },
makers: [ ... ],
publishers: [ ... ],
plugins: [ ... ],
hooks: { ... },
buildIdentifier: 'my-build'
}
I think it is most probable that forge is just not pointed to the correct dir, add the dir setting shown above.
The problem was a virtual machine problem, nothing related to electron forge itself, the VM was not able to copy the content from the temp folder to the out folder, this can be solved by changing the temp folder
Related
I'm trying to build an installer with electron-builder but every time I generate the installer and install my application, I get an error that "dist/index" doesn't exist in .asar file. I checked and no dist file is packed inside .asar.
The error I'm getting:
Not allowed to load local resource: file:///C:/Users/user1/AppData/Local/Programs/myApp/resources/app.asar/dist/index.html
I'm building with this script:
"publish": "set GH_TOKEN=<my_token> && electron-builder --win -p always"
Does electron-builder have any flags to tell him where to put the output files?
Okey after some trial and error, I found what was wrong...
So basically my package.json was configured wrong. In order to include dist in build it must be specified like this:
...
"build": {
"appId": "si.app.testing",
...
"directories": {
"output": "release",
"buildResources": "dist"
},
"files": [
"**/*",
"dist/**/*",
...
"!.github",
"!.vs",
"!node_modules/*"
]
},
...
I trying to build an electron with an exe installer on macOS with a MacBook Pro with an m1. I already tried different packages like electron-packager, electron-forge, but unfortunately, none of my tries worked. Did anyone has a solution to build an electron version with an exe on macOS.
My latest approach looked like, but when I start and after more then 30 minute it still do no finish.
yarn run electron-forge make --arch=x64 --platform=win32
The current code could be found here.
We using electron-builder for packaging electron app on Windows&MacOS(x86_x64/arm etc.), and you can try it.
add some config in package.json, like this:
"build": {
"appId": "com.electron.yourappid",
"productName": "your-product-name",
"asar": false,
"mac": {
"target": [
"pkg"
],
"entitlements": "entitlements.mac.plist"
},
"win": {
"target": [
{
"target": "zip",
"arch": [
"x64"
]
},
{
"target": "msi",
"arch": [
"x64"
]
}
]
}
},
"scripts": {
"dist": "electron-builder"
},
then run npm command like this:
# add package in your project
npm install --save-dev electron-builder
npm run dist # or 'npx electron-builder'
If you perfer using 'shelljs', create a file 'dist.js', and content:
const { exec, rm } = require('shelljs');
exec('electron-builder');
and then run node command
npm install --save-dev shelljs
node dist.js
More detail for config you can read offical doc of electron-builder.
I've looked into it and failed (building Apple Silicon, Apple Intel and Windows distributables from M1 Mac). I ended up setting up VMs that I use for building the distributables, and testing also.
electron-builder 23.0.3 and flag --universal work for me on Macbook M1 2021
This works for me. npx electron-builder --win --x64
Electron is giving me 'Error: Cannot find module './constructor/getOptions' when I open my executable. I tracked the error to a dependency I have which has the following file structure:
My issue is that in the built version of the program, the entire constructor folder is missing. The way I look at the built version is by using the command npx asar extract app.asar ./extracted to view the files. When I look at this dependency I only see index.js being listed there.
I have checked inside of the index.js to see if getOptions is being imported and it is. I have tried to import the file using relative and absolute path. I have also made sure that the dependency is not under devDependency as electron-builder ignores that. I'm not really sure what else to do. Does electron-builder have an option to go deeper into the file structure of a dependency?
Here is my package.json section for electron-builder:
"build": {
"productName": "MintAIO",
"appId": "aio.mint",
"win": {
"icon": "build/ic.png"
},
"mac": {
"target": "dmg",
"icon": "build/ic-mac.png"
}
}
For anyone who might come across this issue in the future, there is a bug with Asar where the directory name constructor is for some reason not included when being packaged. I'm not sure what other directory names this might cause this issue, but constructor is definitely one of them. To fix this, you can either rename that directory to something else, or specifically leave that one dependency unpacked using the asarUnpack option in the build config of electron.
you can try to include files on the build section for example
"build": {
"productName": "MintAIO",
"appId": "aio.mint",
"win": {
"icon": "build/ic.png"
},
"mac": {
"target": "dmg",
"icon": "build/ic-mac.png"
},
"files": [
"constructor/*"
]
}
I think this will do the trick ....
I've rigged create-react-app with the electron-forge app and now I need to somehow specify the build folder produced from the CRA for the packaging. That folder should also be served.
Would such a thing be possible with electron-forge?
I understand are you asking how to tell electron-forge which directory to find your source files in for packaging the app.
If so, see: https://github.com/electron-userland/electron-packager/blob/master/docs/api.md
where it describes the options of the
"config": {
"forge": {
object in your package.json file
inside they there is this package config object:
"electronPackagerConfig": {
"dir": "./src",
where you can specify your source folder.
Also, BTW: there you can specify files/file-regexs to be ignored in packaging:
"ignore": [".idea", ".gitignore"]
electron-forge has no option to specify input folder (project's root folder will be used):
Specify ignore option to skip folders/files;
Use main key in
package.json to specify correct start script.
For example, package.json for vue project:
{
"name": "project",
"version": "1.0.0",
"main": "index.js",
...
"config": {
"forge": {
"packagerConfig": {
"ignore": [
"^/[.]vs$",
"^/public$",
"^/src$",
"^/[.]browserslistrc$",
"^/[.]editorconfig$",
"^/tsconfig[.]json$",
"[.](cmd|user|DotSettings|njsproj|sln)$"
]
},
...
}
},
...
}
I'm trying out the new ASP.NET 5 with MVC 6, and I'm using bower to manage all my client-side dependencies. Everything is working fine.
But I have a question: When I add a dependency (let's say jQuery). It adds both the /dist and /src along with bower configuration files to the /lib folder of wwwroot. How do I make it include just the compiled source for usage? (So I can reference it in my pages via /lib/jquery/jquery.js?
I have recently been playing in this space and following is something that I have tried:
Deleted the .bowerrrc file to enable installing in the default bower_components folder under the project folder rather than under wwwroor\lib as anything under wwwroot tends to get published.
Added "main-bower-files": "2.9.0" to package.json. This package gets all the files mentioned in the main property of each installed package's bower.json files.
Created a gulp task using the above package
gulp.task('copyMainFiles', function () {
return gulp.src(mainBowerFiles(), { base: 'bower_components' })
.pipe(gulp.dest('wwwroot/lib'));
});
Added a postrestore step to your application's project.json file
"scripts": {
"postrestore": "gulp copyMainFiles",
"prepublish": [ "npm install", "bower install", "gulp clean", "gulp min" ]
}
Updated my application's bower.json to copy files which are not listed in main (like some packages do not have min files as main files..ex: jQuery). The following settings are read by main-bower-files:
"overrides": {
"jquery": {
"main": [ "dist/jquery.js", "dist/jquery.min.js" ]
},
"hammer.js": {
"main": [ "hammer.js", "hammer.min.js" ]
},
"bootstrap": {
"main": [
"./dist/js/bootstrap.js",
"./dist/js/bootstrap.min.js",
"./dist/css/bootstrap.css",
"./dist/css/bootstrap.min.css"
]
}
}
Finally had to update the jquery-validation package to use 1.14.0 instead of 1.11.1 as the previous version does not dist folder and indeed no bower.json...