What To Keep In Mind When Porting an Electron Desktop App to Mac OS X

calendar_today Posted 9 months ago · 6 minute-read · Technology

Hav­ing to devel­op an appli­ca­tion for the oper­at­ing sys­tem you’re cur­rent­ly using or have access to is a bless­ing, since you can com­pile and debug your app right then and there. But what hap­pens when your user base is dis­trib­uted across mul­ti­ple oper­at­ing sys­tems?

I’ve recent­ly had to port an Elec­tron desk­top app to Mac OS X, an oper­at­ing sys­tem that I’ve hard­ly ever used before. I do use Lin­ux every now and then to man­age VMs, which can be sim­i­lar to Mac OS X’s ter­mi­nal in some ways, but I don’t use GUI Lin­ux dis­tri­b­u­tions. What I mean is that I don’t know how reg­u­lar con­sumers use these oper­at­ing sys­tems, and what users expect from apps run­ning on these plat­forms.

While Elec­tron does allow you to com­pile your app for oth­er plat­forms, there’s no way to test it with­out set­ting up vir­tu­al machines or by hav­ing access to the oper­at­ing sys­tem in ques­tion. I believe that vir­tu­al machines aren’t ide­al for test­ing GUI appli­ca­tions because it’s just not the real thing. VMs are usu­al­ly stripped from any form of GPU pro­cess­ing, which makes many apps unrunnable. Also, depend­ing on the OS you’re try­ing to vir­tu­al­ize, per­for­mance is usu­al­ly sub­par, which make apps slug­gish.

In order to pro­vide an opti­mal user expe­ri­ence, you need to get as close to retail as pos­si­ble. There are a few ways of doing this:

  • Using spe­cial soft­ware that runs OSes in a native man­ner (for exam­ple, Apple’s Boot­Camp). This soft­ware allows for a high per­for­mance desk­top expe­ri­ence that is very close to the real thing. Some PCs are able to be turned into a Hack­in­tosh, run­ning Mac OS X native­ly.

  • Rent­ing a VM in the cloud that is made for test­ing appli­ca­tions. Most VMs for sale are made for run­ning appli­ca­tion servers, but not for test­ing appli­ca­tions as reg­u­lar users. There are how­ev­er some providers that focus on bring­ing a vir­tu­al­ized desk­top expe­ri­ence that is made for test­ing apps. For exam­ple, Mac­In­Cloud pro­vides real Mac hard­ware with a GPU and the lat­est Mac OS X ver­sions, acces­si­ble from remote con­trol soft­ware like VNC.

  • Buy­ing real hard­ware. Obvi­ous­ly, if you buy the real thing, you’ll be able to test your app just like reg­u­lar users would. This is the best option in terms of per­for­mance and qual­i­ty, but not so much for cost. For exam­ple, if you need Mac hard­ware, be ready to shell out a good amount of cash for it.

So, what did I do in my sit­u­a­tion?

My Situation

  • Need to port from an Elec­tron app from Win­dows to Mac OS X.
  • Can’t afford to buy Mac hard­ware.
  • Hack­in­tosh is not pos­si­ble with my PC.

With these 3 con­straints, and after hav­ing tried local vir­tu­al machines run­ning Mac OS X (even though it is ille­gal to do so) with real­ly poor per­for­mance, I had to decide to go with rent­ing a VM in the cloud. Luck­i­ly, for Mac sys­tems there’s Mac­In­Cloud avail­able.

This post is not spon­sored, but I have to say that the ser­vice they offer is pret­ty great. I’ve used it exten­sive­ly for the past few weeks. I rent­ed a Ded­i­cat­ed Serv­er from them which turned out to be about 40 EUR a month, which is more than enough time for me to port and test the app (you can order for 1 week as well, if you think 1 month is too much time).

If you end up using Mac­In­Cloud, make sure you do not choose the Remote Desk­top addon. It just allows you to remote desk­top into the VM from your Win­dows PC, how­ev­er, you already get VNC remote desk­top for free. Per­for­mance is not great with VNC, but after your first login you can install TeamView­er which works much bet­ter.

Mac­In­Cloud was the solu­tion to my prob­lem in terms of hav­ing an accu­rate and per­for­mant Mac OS X envi­ron­ment, but I still need to devel­op the app and test it. After spend­ing days get­ting used to the Mac ecosys­tem and devel­op­ing the app using Visu­al Stu­dio Code, I have a few cross-plat­form Elec­tron tips to share with you:

Tips for Electron Apps on Mac OS X

  • Direc­to­ry sep­a­ra­tors should always be /, since this is sup­port­ed on Win­dows and Lin­ux. If pos­si­ble, nev­er use \.

  • By using electron-packager and electron-installer-dmg, you can cre­ate a DMG file for users to install your app eas­i­ly. Here’s an exam­ple of a com­mand to build one:
electron-packager . <AppName> --icon=./AppIcon.icns --platform=darwin --arch=all --overwrite --electron-version=8.2.0 --version-string.FileDescription='<AppDescription>' --out . && electron-installer-dmg ./<AppName>-darwin-x64/<AppName>.app <AppName> --out=. --icon=./AppIcon.icns --background=./DMG_Background.png --title=<AppName> --overwrite
  • Elec­tron tem­po­rary files are writ­ten to ~/Library/Application Support/<AppName> and this direc­to­ry is cre­at­ed when your app is first run. You’ll also want to write any appli­ca­tion-spe­cif­ic files here.

  • There’s no con­cept of Reg­istry in Mac OS X. If your appli­ca­tion relies on Reg­istry val­ues in order to func­tion, you’ll need to change this. You can use con­fig­u­ra­tion files that should be cre­at­ed and stored in ~/Library/Application Support/<AppName> in order to achieve the same func­tion­al­i­ty.

  • If your app need to run com­mands as sudo, there’s a very use­ful node pack­age named sudo-prompt which prompts the user to allow the app to run a cer­tain com­mand. This is good UX, your app should nev­er run as sudo from the begin­ning, it should ask for per­mis­sion right when it needs it.

  • Apps don’t need to be pub­lished or ver­i­fied by Apple to run on Mac OS X. At first I thought that I would have a hard time try­ing to run my appli­ca­tion since I have no way of sign­ing it and wasn’t inter­est­ed in upload­ing it to the App Store. This turned out not to be an issue: you can dis­trib­ute your app as a DMG and your users will have no issues installing your appli­ca­tion. In fact, you’ll have less prob­lems than on Win­dows because of the SmartScreen win­dow.

  • You can be assured that your app will pro­vide a con­sis­tent expe­ri­ence across Mac OS X ver­sions. What I’ve observed is that Mac OS X is great at pro­vid­ing con­sis­ten­cy across ver­sions. This has made me con­fi­dent in that my app will run the same way for every user. Unlike Win­dows, which has soft­ware that can inter­fere with the nor­mal func­tion­ing of the app, such as antivirus­es or fire­walls, Mac OS X nor­mal­ly doesn’t have any of that.

Those are my tips for devel­op­ing cross-plat­form Elec­tron apps for Mac OS X. For the most part, Elec­tron should abstract away any­thing plat­form-spe­cif­ic and make the devel­op­ment expe­ri­ence much eas­i­er for you, but there’s still a few things you should know about the dif­fer­ences between plat­forms.

Thanks for read­ing!

– Kedi