Execute an exe(Inside Project structure) in Electron - electron

While in developing mode, executing the exe is working well.
My code to launch the exe is
function LaunchExe() {
var child = require('child_process').execFile;
var executablePath = 'DemoExe/Sample.exe';
var parameters = ['Hai', 'Test', 'Dat'];
child(executablePath, parameters, function (err, data) {
console.log(err)
console.log(data.toString());
});
}
But after packaging the Electron app, I can't launch the exe.
The command I use to build the exe is
electron-packager . --asar
Error code
Error: spawn DemoExe/Sample.exe ENOENT
at Process.ChildProcess._handle.onexit (internal/child_process.js:232)
at onErrorNT (internal/child_process.js:407)
at process._tickCallback (internal/process/next_tick.js:63)
Regards.

Is your project with angular?
Maybe this can help, but I had problems too with electron-packager.
So I suggest you to use electron builder : https://www.electron.build
Fist you need to add a file at root called electron-builder.json and it shoul'd contain the following (you need to update productname and icons location):
{
"productName": "projectname",
"appId": "org.project.projectname",
"artifactName": "${productName}-setup-${version}.${ext}",
"directories": {
"output": "builds/"
},
"files": [
"dist/",
"node_modules/",
"package.json",
"**/*",
"!**/*.ts",
"!*.code-workspace",
"!package-lock.json",
"!src/",
"!e2e/",
"!hooks/",
"!angular.json",
"!_config.yml",
"!karma.conf.js",
"!tsconfig.json",
"!tslint.json"
],
"nsis": {
"oneClick": false,
"allowToChangeInstallationDirectory": true
},
"mac": {
"icon": "src/favicon.ico"
},
"win": {
"icon": "src/favicon.ico"
},
"linux": {
"icon": "src/favicon.png"
}
}
Then, you need to add those scripts to your package.json
"scripts": {
"build:prod": "npm run build -- -c production",
"package:windows": "npm run build:prod && electron-builder build --windows"
}
can compile the executable with
npm run package:windows
Also, don't forget to add electron builder into your dev dependencies :
yarn add electron-builder --dev
the executable with be located into /builds

Got to work with following steps,
1.package the Electron app using command
electron-packager .
2.Path to exe
path.join(__dirname, "DemoExe", "Sample.exe")

Related

electron-forge: npm run make creates an app with a white screen

I created a template with npx create-electron-app my-new-app --template=typescript-webpack (from https://www.electronforge.io/templates/typescript-+-webpack-template). I adapted the package.json like this (in order to get rid of an error):
"plugins": [
{
"name": "#electron-forge/plugin-webpack",
"config": {
"mainConfig": "./webpack.main.config.js",
"renderer": {
"config": "./webpack.renderer.config.js",
"entryPoints": [
{
"html": "./src/index.html",
"js": "./src/renderer.ts",
"name": "main_window",
"preload": {
"js": "./src/preload.ts"
}
}
]
}
}
}
]
When I run npm run make, electron forge builds an app that has a white screen(missing all the content).
Update: after installing npm install -g #electron-forge/cli#beta
and running electron-forge make instead of npm run make I get this:
✔ Checking your system
✖ Resolving Forge Config
Electron forge was terminated:
Expected plugin to either be a plugin instance or [string, object] but found [object Object]
This seems to be a bug in the latest #electron-forge version.
Please follow the below steps to resolve this issue.
Delete the below files and folders
package-lock.json
node_modules
.webpack
Change all the #electron-forge versions in packages.json to 6.0.0-beta.63.
"devDependencies": {
"#electron-forge/cli": "6.0.0-beta.63",
"#electron-forge/maker-deb": "6.0.0-beta.63",
"#electron-forge/maker-rpm": "6.0.0-beta.63",
"#electron-forge/maker-squirrel": "6.0.0-beta.63",
"#electron-forge/maker-zip": "6.0.0-beta.63",
"#electron-forge/plugin-webpack": "6.0.0-beta.63",
Make sure you do not have ^ in front of the version numbering. Or else, it will fetch the latest version.
Modify the plugins section as shown below.
"plugins": [
[
"#electron-forge/plugin-webpack",
{
"mainConfig": "./webpack.main.config.js",
"renderer": {
"config": "./webpack.renderer.config.js",
"entryPoints": [{
"name": "main_window",
"html": "./src/index.html",
"js": "./src/renderer.ts",
"preload": {
"js": "./src/preload.ts"
}
}]
}
}
]
]
Now install the packages
npm install
or, if you use yarn
yarn install
Now you should be able to see the page when you do an npm run make.

Electron-builder doesnt generate dist files

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/*"
]
},
...

Build electron as exe on macbook m1

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

npm run make is not working in electron-forge

I have created and electron application and trying to use electron forge for building purpose.
Please find below command which i have run it for creating the electron application:
#npm i -g create-react-app
#npm i -g #electron-forge/cli
#npx create-electron-app my-ele-app
The above last command created a project my-ele-app. and now i am able to start the application as well.
#npm start.
content of package.json file is:
{
"name": "my-ele-app",
"productName": "my-ele-app",
"version": "1.0.0",
"description": "My Electron application description",
"main": "src/index.js",
"scripts": {
"start": "electron-forge start",
"package": "electron-forge package",
"make": "electron-forge make",
"publish": "electron-forge publish",
"lint": "echo \"No linting configured\""
},
"keywords": [],
"author": {
"name": "rohit",
"email": "rohit#xyz.com"
},
"license": "MIT",
"config": {
"forge": {
"packagerConfig": {},
"makers": [
{
"name": "#electron-forge/maker-squirrel",
"config": {
"name": "my_ele_app"
}
},
{
"name": "#electron-forge/maker-zip",
"platforms": [
"darwin"
]
},
{
"name": "#electron-forge/maker-deb",
"config": {}
},
{
"name": "#electron-forge/maker-rpm",
"config": {}
}
]
}
},
"dependencies": {
"electron-squirrel-startup": "^1.0.0"
},
"devDependencies": {
"#electron-forge/cli": "^6.0.0-beta.55",
"#electron-forge/maker-deb": "^6.0.0-beta.55",
"#electron-forge/maker-rpm": "^6.0.0-beta.55",
"#electron-forge/maker-squirrel": "^6.0.0-beta.55",
"#electron-forge/maker-zip": "^6.0.0-beta.55",
"electron": "12.0.9"
}
}
Now when i am running below command, it is throwing error:
#npm run make
Error is:
> my-ele-app#1.0.0 make
> electron-forge make
√ Checking your system
√ Resolving Forge Config
An unhandled rejection has occurred inside Forge:
Error: Could not find module with name: #electron-forge/maker-squirrel. Make sure it's listed in the devDependencies of your package.json
at _default (C:\Users\212807091\Desktop\Rohit\Office Note\RBAC\Electron_project\npx_electrong\my-ele-app\node_modules\#electron-forge\core\src\api\make.ts:125:15)
at C:\Users\212807091\Desktop\Rohit\Office Note\RBAC\Electron_project\npx_electrong\my-ele-app\node_modules\#electron-forge\cli\src\electron-forge-make.ts:44:5
Electron Forge was terminated. Location:
{}
NOTE: i can see there is module available in node_modules folder:
my-ele-app\node_modules#electron-forge\maker-squirrel
If anyone here has any idea how to fix this issue. please provide the answer. Thanks!
In my cases, it makes error when the description or author is empty in package.json file.
I got the same error after following the "Getting Started" instructions. Nothing resolved it until I ran npm install -g #electron-forge/cli#beta -- after that finished I was able to successfully run electron-forge make.
Also running npm run make did the same as electron-forge make as I didn't appear to have it installed. Another thing I noticed is that if I run npm run make with maker-squirrel at version 6.0.0-beta.55 then I get this error: Could not find module with name: #electron-forge/maker-squirrel. However, if I re-install maker-squirrel as npm install --save-dev #electron-forge/maker-squirrel#6.0.0-beta.33 and re-run npm run make then I get an out folder with an exe.
you have installed all the required dependencies so just run this command
npm run package
And after this a folder with name out is generated and inside that your .exe file will be present
I had a similar issue but I followed the instructions from here: https://www.electronjs.org/docs/latest/tutorial/quick-start#package-and-distribute-your-application
I missed calling npx electron-forge import. So the full pipeline looks like this:
npm install --save-dev #electron-forge/cli
npx electron-forge import
npm run make
Check the documentation. i solve same problem with this
If you are using Windows, this works for me:
Run npm i electron-winstaller --save-dev --ignore-scripts
Install 7zip x86 in your computer. After installed, go to C:\Program Files (x86)\7-Zip and copy both 7z.dll and 7z.exe files to /path/to/your_project/node_modules/electron-winstaller/vendor if they are not still there.
Run npm electron-forge import again
Then try run npm run make again. I hope it works.

Electron APP packaging

I'm trying to package my recent electron app. I tried to use electron-packager and I actually build the app though it is a bunch of files.
Now I'm facing some problems:
How do I change the app icon? I did it by setting its path in BrowserWindow creation, but shouldn't I be able to do it with electron packager?
And what about the actual desktop icon?
And finally how should I do to package all the files built by electron-packager in one .exe?
I'm building it in windows for windows architecture.
Oh i have faced that problem. first of all i'll leave you an example of how to use the API of electron-packager
var packager = require('electron-packager');
var options = {
'arch': 'ia32',
'platform': 'win32',
'dir': './',
'app-copyright': 'Paulo Galdo',
'app-version': '2.0.5',
'asar': true,
'icon': './app.ico',
'name': 'TierraDesktop',
'ignore': ['./releases', './.git'],
'out': './releases',
'overwrite': true,
'prune': true,
'version': '1.3.2',
'version-string':{
'CompanyName': 'Paulo Galdo',
'FileDescription': 'Tierra de colores', /*This is what display windows on task manager, shortcut and process*/
'OriginalFilename': 'TierraDesktop',
'ProductName': 'Tierra de colores',
'InternalName': 'TierraDesktop'
}
};
packager(options, function done_callback(err, appPaths) {
console.log(err);
console.log(appPaths);
});
Here i left you the link with all the information. Electron packager API
And finally a module so you can build your installer easily, just follow their API.
Windows installer
electron-builder is an all in one packager that will create a Windows installer (or other platforms) and allow you to set icons and many other settings. It actually uses electron-packager as a dependency for the actual packaging.
https://github.com/electron-userland/electron-builder
In Package.json
{
"name": "APP_NAME",
"version": "6.1.0",
"description": "About APP",
"main": "main.js",
"scripts": {
"preinstall": "npm i -g electron-packager",
"start": "electron .",
"package-win32": "electron-packager ./ APP_NAME --overwrite --platform=win32 --arch=ia32 --icon=assets/YOUR_Icon.ico --out=release-builds --app-copyright=\"Copyright © COMPANY_NAME 2020\" --version-string.CompanyName=COMPANY_NAME"
},
"author": "YOUR NAME",
"license": "YOUR LICENSE",
"devDependencies": {
"electron": "^2.0.0",
"electron-packager": "^12.2.0"
}
}

Resources