Setting electron app icons for Windows from OSX

When building cross platform apps using GitHub's electron (website), you may run into the same issue I did a few days ago. When you want to automatically build the app Windows and OSX directly from an OSX system using the gulp-atom-electron module.

Setting the Windows App Icon didn't work for me when building it from the Mac. gulp-atom-electron has a dependency on rcedit which is a small Windows executable that is responsible for updating either Windows Assemblies or Windows Executables to make resource changes from outside. GitHub itself has published a corresponding npm module which uses wine to execute wine rcedit app-name.exe --set-icon app-icon.ico if you're executing the code on a OSX or Linux system.

So that should work - so my thoughts. But there is a platform switch in gulp-atom-electron that prevents rcedit from being invoked. That's why I've ended up with a public fork of gulp-atom-electron named gulp-awesome-electron (website) which doesn't prevent the execution.

The package isn't on npm! Installation is shown below

Installing the dependencies

As mentioned, wine is required to get this working on OSX or Linux. wine can easily be installed on OSX using Homebrew (aka brew). Wine has a dependency to xquartz so you've to execute the following commands to install both

// ensure that brew is up to date

$ brew update
$ brew install wine

brew install wine may fail if you haven't installed xquartz yet. If so, follow the instructions to install xquartz and try the wine installation again.

Installing required npm packages for Gulp.JS

My gulpfile does a lot of things, so I stripped it to only focus on electron stuff right here. In order to get the electron build working, I've used the following dependencies.

$ npm i gulp del --save-dev
$ npm i https://github.com/ThorstenHans/gulp-awesome-electron --save-dev

The gulpfile

Configuration for gulp-awesome-electron is exactly the same as for gulp-atom-electron, if you haven't used it yet, go and read the docs of the plugin first.

var gulp = require('gulp'),  
    electron = require('gulp-awesome-electron'),
    symdest = require('gulp-symdest'),
    del = require('del');

gulp.task('clean', function(done){  
   del.sync('build/**/*', { force: true});
   done();
});

gulp.task('default', ['clean'], function(){  
   return gulp.src([
       './electron-assets/package.json',
       './bundled-app/**/*'])
     .pipe(electron({
        version: '0.36.1',
        platform: 'win32',
        winIcon: './electron-assets/app-icon.ico',
        companyName: 'Thinktecture AG'
     }))
     .pipe(symdest('build/win32'));
});

Align the paths to match those of your project and start the gulp script using gulp.

Once the build has finished, go and copy your Windows App to a Windows machine. OSX isn't able to display the App Icon for Windows Executables.