Electron create MSI installer using electron-builder - electron

I managed to create an .exe installer for windows using electron builder, I create 2 package.json as pointed out in the docs :
https://github.com/electron-userland/electron-builder.
I ended up having a folder with a working .exe
"dist:win64": "./node_modules/.bin/build --platform win32 --arch x64"
The build section of my main package.json is
"build": {
"app-bundle-id": "org.test.mytest",
"app-category-type": "public.app-category.graphics-design",
"osx": {
"contents": [
{
"x": 410,
"y": 150,
"type": "link",
"path": "/Applications"
},
{
"x": 130,
"y": 150,
"type": "file"
}
]
},
"win": {
"title": "My awesome app",
"version": "2.28.999.1",
"noMsi": false,
"authors": "Author"
}
}
Everything works fine, I have and .exe installer but no way to have an .msi installer that put the content in program files directory.
Instead I ended up with an installation in the C:\Users\UserHome\AppData\Local\electron folder with and installer like below.
Is there a way to have a real .msi installer using electron builder that put the content in the Program file folder. The only one project that worked is this one https://github.com/theodo/electron-boilerplate but it uses a former version of electron-builder.
In the electron doc setting the noMsi to false, should do the trick ...
Should Squirrel.Windows create an MSI installer?

You don't actually need an MSI installed to get your app installed into Program Files.
If you disable one click in the nsis config (oneClick), the user is prompted whether to do the single user install (in AppData) or per machine (in Program Files).
If you don't want to give them the choice, you can set perMachine to false which will only allow install into Program Files:
"nsis": {
"oneClick": false,
"perMachine": false
},
I would personally leave them the option as they can still install without admin rights!
In the latest version of electron-builder there is also a allowToChangeInstallationDirectory option which allows the user to choose any install location.

as stated in the wiki of latest electron builder release you have to use the msi option within build.win:
"build": {
"app-bundle-id": "org.test.mytest",
"app-category-type": "public.app-category.graphics-design",
...
,
"win": {
"title": "My awesome app",
"version": "2.28.999.1",
"msi": true,
"authors": "Author"
}
}

I figured it out by looking at the target. do this
"win": {
"target": [
"msi"
]
//your code here
},

If all you want is an installer in exe format (I don't know about msi) you can use electron-builder to build the exe unpacked to a directory. Check out the documentation at http://npmjs.org/package/electron-builder. The documentation is pretty straight forward. After you obtain the unpacked folder with your exe , use "Inno Setup Compiler" to create a professional looking installer. Once you get the hang of it , it just takes like 5 minutes to do the whole thing.

I haven't gotten this to work either (yet), but my understanding is that it's the opposite (terrible naming).
"noMsi": false // will make an MSI
"noMsi": true // will NOT make an MSI

You can use "electron-wix-msi" this package to do this task.
https://www.npmjs.com/package/electron-wix-msi
But first you need to pack resources of your project with Electron-packager or Electron-Builder and then give path of win-unpacked folder as APP-DIR

Related

electron-builder not including entire dependency in built version

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 ....

Electron-forge package generates an empty out folder

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

How to run asp.net mvc 4.5 in visual studio code editor?

I am looking forward to run asp.net mvc apps in vscode but it seems that the only pages that I found on google is with asp.net core which is not what I am looking. Can someone guide me with some steps, I installed some plugins like c# and msbuild. After attempt to run it. it display the following error:
"Failed to launch external program msbuild . spawn msbuild ENOENT"
The error Failed to launch external program msbuild . spawn msbuild ENOENT happens because vscode\task runner cannot find msbuild.
To run asp.net mvc 4.5 in visual studio code editor, you will need to install msbuild tools (I have installed the 2017 version) and IIS Express.
You could use vswhere to check msbuild location, in my case is C:\\Program Files (x86)\\Microsoft Visual Studio\\2017\\Community\\MSBuild\\15.0\\Bin\\msbuild.exe
In vscode execute the command Tasks: Configure Task Runner and edit the content of tasks.json according the file.
{
"version": "0.1.0",
"taskSelector": "/t:",
"showOutput": "silent",
"tasks": [
{
"taskName": "build",
"args": [
// Ask msbuild to generate full paths for file names.
"/property:GenerateFullPaths=true"
],
"windows": {
// change according your msbuild location
"command": "C:\\Program Files (x86)\\Microsoft Visual Studio\\2017\\Community\\MSBuild\\15.0\\Bin\\msbuild.exe"
},
// Show the output window only if unrecognized errors occur.
"showOutput": "silent",
// Use the standard MS compiler pattern to detect errors, warnings and infos
"problemMatcher": "$msCompile"
},
{
"suppressTaskName": true,
"taskName": "iisexpress",
"isShellCommand": true,
"windows": {
"command": "C:\\Program Files (x86)\\IIS Express\\iisexpress.exe"
},
"args": [
// change according your project folder and desired port
"/path:${workspaceRoot}\\MyProjectFolder",
"/port:51714"
],
// Show the iisexpress output always.
"showOutput": "always"
}
]
}
You don't need to restart your IIS on every change, you just need to build the application CTRL+SHIFT+B.
If you wan't to stop IIS use the vscode command Tasks: Terminate Running Task.
References:
https://stackoverflow.com/a/42719644/5270073
https://learn.microsoft.com/en-us/iis/extensions/using-iis-express/running-iis-express-from-the-command-line
I've created a gulpfile that handle the build for me:
It starts an IISExpress instance.
Refresh my browser on razor code change.
And automatically rebuild my application when I change C# code.
You can find the gulpfile on my project's Github
As per VS Code documentation, VS Code does not support debugging applications running on the Desktop .NET Framework. The ASP.NET MVC Application (though ASP.NET Core is supported) are not recognized by VS Code. Hence VS Code is lightweight tool to edit a file, they are recommending to use Visual Studio Community.
For Visual Studio Code 1.30.2 I've got it configured to build and run my ASP.NET applications in IISExpress using the following setup.
Terminal -> Configure Tasks
Then select Create tasks.json file from template entry.
Once you do that then select the MSBuild template
This will create the default MS build task template.
You should be able to copy the following to the task.json file:
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
//Task for building your ASP.NET Solution
{
"label": "build",
"type": "shell",
"command": "msbuild",
"args": [
// Ask msbuild to generate full paths for file names.
"/property:GenerateFullPaths=true",
"/t:build"
],
"windows": {
"command": "C:\\Program Files (x86)\\Microsoft Visual Studio\\2017\\Professional\\MSBuild\\15.0\\Bin\\msbuild.exe"
},
"group": "build",
"presentation": {
// Reveal the output only if unrecognized errors occur.
"reveal": "always"
},
// Use the standard MS compiler pattern to detect errors, warnings and infos
"problemMatcher": "$msCompile"
},
//Task for running App in IIS Express
//You can add additional projects here if you want to run more than one project in IIS Express
//For example this shows how I'm running my WebApp and API locally in IIS Expresse
{
"label": "iisexpress-WebApp",
"type": "shell",
"windows": {
"command": "C:\\Program Files (x86)\\IIS Express\\iisexpress.exe"
},
"args":[
"/path:${workspaceRoot}\\Web",
"/port:52945"
],
"presentation": {
"reveal": "always"
}
},
{
"label": "iisexpress-API",
"type": "shell",
"windows": {
"command": "C:\\Program Files (x86)\\IIS Express\\iisexpress.exe"
},
"args":[
"/path:${workspaceRoot}\\Api",
"/port:49243"
],
"presentation": {
"reveal": "always"
}
}
]
}
Once you save the file just hit Ctrl + Shift + B and select the Build task from the window. If all goes well you should see the output displayed in the terminal below.
Then to spin up your Apps in IIS go to Terminal -> Run Task
That window will then show your IIS Express tasks, select the one you want to spin up and you should see the Output window show IIS starting up. Once that is successful just open your browser and navigate to localhost:{portyouconfigured} and you should see your application running.
I know I'm a little late, but after researching this myself in 2019, I think using VSCode's tasks is a better approach.
Create a tasks.json file inside your project's .vscode folder, this is where the below code will live.
Add the following script to tasks.json, I'm using this to build the project and then run iisexpress.
Once saved, you can run the Build & Run Server task by pressing pressing CTRL+SHIFT+B. You can also just access the available commands with CTRL+SHIFT+P and search for task: run build task.
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"label": "Build & Run Server",
"dependsOrder": "sequence",
"group": "build",
"dependsOn":["Build ASP.NET", "Run IIS EXPRESS"]
},
{
"type": "shell",
"label": "Build ASP.NET",
"group": "build",
"presentation": {
"echo": true,
"reveal": "always",
"focus": false,
"panel": "shared",
"showReuseMessage": true,
"clear": true
},
"args": [
// Ask msbuild to generate full paths for file names.
"/property:GenerateFullPaths=true"
],
"windows": {
// change according your msbuild location
"command":"${env:ProgramFiles(x86)}\\Microsoft Visual Studio\\2019\\Enterprise\\MSBuild\\Current\\Bin\\msbuild.exe"
},
// Use the standard MS compiler pattern to detect errors, warnings and infos
"problemMatcher": "$msCompile"
},
{
"type":"shell",
"label": "Run IIS EXPRESS",
"group": "build",
"windows": {
"command": "C:\\Program Files (x86)\\IIS Express\\iisexpress.exe"
},
"args": [
// change according your project folder and desired port
"/path:${workspaceRoot}\\VSSMVCProj",
"/port:59010"
],
// Show the iisexpress output always.
"presentation": {
"echo": true,
"reveal": "always",
"focus": false,
"panel": "shared",
"showReuseMessage": true,
"clear": false
},
}
],
}
Since Visual Studio Code 1.14
There is a new syntax to create tasks.
In your Menu Click on
Terminal -> Configure Tasks
Create a task in vscode that build your project like so:
{
"version": "2.0.0",
"tasks": [
{
"label": "build",
"args": [
"${workspaceRoot}\\Some\\Window\\Path\\ToSolution.sln",
"/target:Build"
],
// Path to your msbuild
// The path used corresponds to the path provided by a Visual Studio 2017 installation.
// To find it your msbuild path, go in your file explorer, and search for "msbuild.exe".
"windows": {
"command": "C:\\Program Files (x86)\\Microsoft Visual Studio\\2017\\Professional\\MSBuild\\15.0\\Bin\\msbuild.exe"
},
"problemMatcher": "$msCompile"
}
]
}
The path used corresponds to the path provided by a Visual Studio 2017 installation.
To find it your msbuild path, go in your file explorer, and search for "msbuild.exe".
I would better recommend you installing dotnet cli to get started on it within 10 minutes as page says. If you're using Linux as I was using CentOS and followed the steps below in terminal:
sudo rpm -Uvh https://packages.microsoft.com/config/rhel/7/packages-microsoft-prod.rpm
sudo yum update
sudo yum install dotnet-sdk-2.2
To confirm if dotnet-cli installed successfully:
dotnet
The commmand below sets up a basic asp.net web application in myWebApp folder:
dotnet new webApp -o myWebApp --no-https
cd myWebApp
Simply type dotnet run in terminal to run your first asp.net app This makes your first project run sucessfully. In my opinion, this would work better with Visual studio code than any other method. I use this link source

How to create release channels with electron/electron-builder?

I have an Electron app where I want to introduce parallel release channels: stable, next (for early adopters) and dev (for testing the latest build).
These will have a branch each, with new features appearing first in dev, progressing to next for beta testing and finally moving into stable.
I'm using electron-builder to make these release packages, and I want each to have its own auto-updates - so when I publish a new next release all the users with it get the update.
I want the applications to be independent - a user can have two channels installed and run both at the same time. They'll have different names and different icons.
I can manually set these up in the branches, but really I want to automate this as much as possible - a publish from the next branch should use the right name, icons, IDs and updater without risk of it going to the wrong channel.
Is there a way to do this with electron or electron-builder?
It's possible with electron-builder. I would have several build configurations and tell electron-builder which to use when building.
For example, create file config/beta.json with the following setup:
{
"appId": "com.company.beta",
"productName": "App Beta",
"directories": {
"buildResources": "build/beta" // directory containing your build-specific assets (e.g., beta icons - icon.icns, icon.ico & background.png)
},
"mac": {
"category": "public.app-category.finance"
},
"win": {
"target": [
"nsis"
]
},
"nsis": {
"perMachine": false
},
"publish": [
{
"provider": "s3",
"bucket": "com-app-beta" // dedicated S3 bucket for each build
}
],
}
And duplicate config/beta.json for next.json and current.json (make sure to edit settings accordingly).
In package.json, add the following build scripts (note --em.name=app-beta to overwrite package.json's "name" value):
{
"scripts": {
"build": "build -owl --x64 --config ./config/current.json -p always --em.name=app",
"build-beta": "build -owl --x64 --config ./config/beta.json -p always --em.name=app-beta",
"build-next": "build -owl --x64 --config ./config/next.json -p always --em.name=app-next"
}
}
Run build script when ready to deploy:
npm run build-beta
Using electron-builder version 20.15.1 and MacOS, #Jon Saw's solution needs a minor change because em option is not valid:
"build-beta": "build -owl --x64 --config ./config/beta.json -p always -c.extraMetadata.name=app-beta"

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